craftbits*

Hero Vec S1

A large illustrative hero SVG that animates the matrix-vector multiplication motif. A 3-by-3 matrix A populates cell-by-cell on the left, an input column vector x slides in on the right, row highlights sweep across the matrix, and the output Ax pops into place row-by-row. After a brief hold the dataset rotates and the cycle replays. Theme-driven via currentColor + a single accentColor prop; reduced-motion users see a static end state.

Customize
Hero
accent
false

Installation

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

Usage

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

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full ~8s cycle: matrix brackets fade in, the 3-by-3 cells populate left-to-right / top-to-bottom with a 60ms stagger, the input vector slides in from the right with a snappy spring, then row highlights sweep left-to-right while each output value pops with a bouncy spring and a brief accent glow. After a hold the dataset rotates and the cycle replays. Every timer is cleaned up on unmount and when reduced-motion changes.
  2. Motion values, not re-renders. Cell opacities, translate-Y, row-highlight scale-X, output scale + glow, and bracket opacities are all driven by motion's useMotionValue + useSpring, so the React tree never re-renders during the loop. Springs come from @craft-bits/core/motion — SPRINGS.snap for the input vector slide-in, SPRINGS.bouncy for output-cell pops.
  3. Theme-driven color. Matrix brackets, the multiply dot, equals sign, and serif caption use currentColor. The accentColor prop colors the matrix numerals, vector / output brackets, row highlights, output numerals, and pop glow — any CSS color (including var(--color-accent-500)).
  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 end state (matrix populated, vector visible, output fully resolved) — no timers, no spring updates.

Variants / Examples

// Paused — useful for thumbnails / OG images.
<HeroVecS1 paused />
 
// Fixed pixel width.
<HeroVecS1 size={480} />
 
// Explicit accent color.
<HeroVecS1 accentColor="var(--color-accent-300)" />
 
// Custom hex.
<HeroVecS1 accentColor="#8b5cf6" />

Props

PropTypeDefaultDescription
accentColorstring'currentColor'Any CSS color. Tints matrix numerals, vector / output brackets, row highlights, output numerals, and the pop glow.
sizenumber—Optional fixed pixel width. Omit to fill the parent (height tracks the 400-by-280 aspect ratio).
pausedbooleanfalseWhen true, render a single static end state 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 static end state.
  • 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/HeroVecS1.tsx).
  • Inspiration: classical linear-algebra diagrams of the row-by-row matrix-vector product.