Hero Vec S2

A large illustrative hero SVG for the lesson "a matrix is a function on space". A 7×7 dot grid connected by thin lines warps between three 2×2 matrix transforms with spring physics — identity, then a shear, then a rotation + scale. Inner dots animate first; outer dots last. Each dot's glow halo brightens proportionally to its displacement. A tiny matrix readout in the bottom-right corner tracks the active transform. Theme-driven via currentColor + a single accentColor prop; reduced-motion users see a static frame.

Installation

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

Usage

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

Understanding the component

1. Three-phase warp loop. A single useEffect cycles through the matrices [1, 0, 0, 1] (identity), [1.0, 0.6, -0.3, 1.0] (shear), and [0.8, -0.5, 0.5, 0.8] (rotation + scale). After a 1.2-second entrance the first warp begins, then each phase holds for ~3 seconds before the next. The loop runs continuously while mounted; every timer is cleaned up on unmount and when reduced-motion changes.
2. Ripple stagger. Every dot's transition is delayed by its Manhattan distance from the origin (30 ms per ring), so inner dots move first and outer dots last — the warp reads as a wave radiating outward.
3. Displacement-driven glow. Each dot's glow halo opacity is proportional to how far that dot moved between the previous and current matrix, capped at 0.55. The halo fades back to zero ~900 ms after the dot starts moving, so the brightest dots correspond to the largest local distortion.
4. Motion values, not re-renders. Each of the 49 dots owns a useMotionValue + useSpring triple (x, y, glow), so the React tree never re-renders during the loop. The matrix-label readout updates imperatively via a ref. Dot positions use SPRINGS.smooth; the glow halos use a tighter inline spring so they settle within one cycle.
5. Theme-driven color. The surface, caption, and matrix label use currentColor, so the host tints the chrome with any text-cb-* utility. The accentColor prop tints the dots, connecting lines, and glow halos; the originColor prop sets the centre / origin dot (defaults to var(--cb-bg) so the origin reads as a pin against the warped grid).
6. 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 with the shear matrix already applied — no timers, no spring updates.

Variants / Examples

// Paused — useful for thumbnails / OG images.
<HeroVecS2 paused />
 
// Compact thumbnail.
<HeroVecS2 size={240} />
 
// Explicit accent color.
<HeroVecS2 size={480} accentColor="var(--cb-accent)" />
 
// Custom hex.
<HeroVecS2 accentColor="#8b5cf6" />
 
// Custom origin pin colour (e.g. on a non-bg surface).
<HeroVecS2 originColor="#ffffff" />

Props

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 static frame.
• All colors flow from currentColor + the accentColor / originColor props, 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/HeroVecS2.tsx).
• Inspiration: classic linear-algebra visualisations — "a matrix is a function on space".