craftbits*

Hero Vec S3

A large illustrative hero SVG for the linear-algebra mantra "a matrix is a lens on space". A circular lens reveals a warped inner grid (transformed by the active 2x2 matrix) atop an identity outer grid; the lens cycles through identity, shear, rotate, and scale with a ripple-stagger morph, and a top-right HUD reads out the live matrix. Theme-driven via currentColor + a single accentColor prop; reduced-motion users see a single static shear pose.

Customize
Hero illustration
400px
accent
false

Installation

npx shadcn@latest add https://craftbits.dev/r/hero-vec-s3.json

Usage

import { HeroVecS3 } from "@craft-bits/core/svg/hero-vec-s3";
 
<HeroVecS3 size={400} />
 
// Tint via the parent text color.
<div className="text-cb-accent">
  <HeroVecS3 />
</div>

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full cycle: the outer identity grid fades in, the lens border springs into place, the inner grid appears at identity, and the matrix readout panel fades in. Then the lens cycles through shear, rotate, scale, identity at 3.6s per pose. Each morph triggers a ripple-stagger across the 35 inner dots from the lens centre outward, plus a label crossfade in the HUD. Every timer is cleaned up on unmount.
  2. Motion values, not re-renders. Per-dot x/y springs (70 motion values), the four matrix readout cells, the lens scale/pulse, and the group opacities are all driven by useMotionValue + useSpring, so the React tree never re-renders during the loop. Springs come from @craft-bits/core/motion — a gentle spring for grid morphs, SPRINGS.snap for the matrix readout, SPRINGS.bouncy for the lens border spring-in.
  3. Theme-driven color. The outer grid, HUD bracket glyphs, and caption use currentColor, so the host tints the structural chrome with any text-cb-* utility. The accentColor prop colors the lens ring, inner warped grid, glow halo, and HUD matrix readout — any CSS color (including var(--cb-accent)).
  4. Reduced-motion safe. When prefers-reduced-motion: reduce is set, or the paused prop is true, the loop short-circuits to a single static frame in the shear pose with all chrome visible and no timers.

Variants / Examples

// Paused — useful for thumbnails / OG images.
<HeroVecS3 paused />
 
// Compact thumbnail.
<HeroVecS3 size={200} />
 
// Explicit accent color.
<HeroVecS3 size={480} accentColor="var(--cb-accent)" />
 
// Custom hex.
<HeroVecS3 accentColor="#8b5cf6" />

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400x280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the lens ring, inner warped grid, glow halo, and HUD readout.
pausedbooleanfalseWhen true, render a single static frame (shear pose) instead of looping.
classNamestring—Extra classes merged onto the root SVG.
...restSVGAttributes<SVGSVGElement>—Other SVG props forwarded to the root.

Accessibility

  • The root SVG carries aria-hidden="true" — the illustration is decorative; pair it with a visible heading or caption in its surrounding context.
  • Motion respects prefers-reduced-motion: reduce: the loop short-circuits and renders a single static frame.
  • All colors flow from currentColor + the accentColor prop, so contrast tracks the consumer's text and accent tokens — no hardcoded hex values.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/heroes/HeroVecS3.tsx).
  • Inspiration: the linear-algebra "matrix as transformation" intuition — a lens you can look through to see space deformed.