Hero Sequences

A large illustrative hero SVG that animates the sequence-model motif (RNN / LSTM / GRU) as a "memory relay": three timestep cells on a horizontal track receive dropping tokens, hidden-state bars fill, the cell-state ribbon brightens across the cells, output arrows rise as h-one, h-two, and h-three, and connecting arrows pulse between cells to convey hidden-state passing through time. Theme-driven via currentColor + a single accentColor prop; reduced-motion users see a static end state.

Installation

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

Usage

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

Understanding the component

1. Continuous storyboard. A single useEffect schedules the full ~8s cycle: the horizontal track fades in, the three cell outlines stagger in left-to-right, the cell-state ribbon base appears, then tokens (x-one, x-two, x-three) drop into each cell in turn. After each token lands, the cell glow intensifies, the inner hidden-state bar fills to a higher target (0.4, then 0.65, then 0.9 of max), the corresponding ribbon segment brightens, and the output arrow rises. Connecting arrows between cells pulse as the signal passes. Everything fades, token positions reset, and the loop restarts. Every timer is cleaned up on unmount and when reduced-motion changes.
2. Motion values, not re-renders. Cell glow opacity, hidden-bar widths, ribbon-segment opacities, output-arrow positions, and token Y values 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.smooth for cell entrances and most opacities, SPRINGS.bouncy for dropping tokens, SPRINGS.snap for output arrows, SPRINGS.slow for the master fade.
3. Theme-driven color. Cell bodies, the track line, and the caption use currentColor, so the host tints the structural chrome with any text-cb-* utility. The accentColor prop colors the glow halo, ribbon segments, hidden-state bars, output arrows, connecting arrows, and dropping tokens — 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: all three cells lit, ribbon fully bright, output arrows raised, connecting arrows visible.

Variants / Examples

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

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 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/HeroSequences.tsx).
• Inspiration: classical recurrent-network diagrams (RNN / LSTM / GRU) — "memory through time".