craftbits*

Hero Modern Arch

A large illustrative hero SVG that animates the "modern transformer architectures" motif — five stacked layer bars on the left, five tokens that fly into a KV cache column on the right, and two memory bars at the bottom contrasting the linear-in-n footprint (with cache) against the quadratic n-squared blow-up (without cache). Theme-driven via currentColor and a single accentColor prop; reduced-motion users see a static end state.

Customize
Hero illustration
400px
accent
false

Installation

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

Usage

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

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full ~9s cycle: scene fades in, five layer bars stagger in, the cache outline appears, then five tokens generate one per second — each pops above the model, flies into the cache, and increments the linear memory bar. At 5.8s the quadratic bar reveals dramatically (animating to 25 units with a warning-glow overlay), the comparison holds, then everything fades and the loop restarts. Every timer is cleaned up on unmount and when reduced-motion changes.
  2. Motion values, not re-renders. Token positions, opacities, cache fills, and memory-bar widths are 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 entrances, SPRINGS.bouncy for token cubes and the quadratic reveal, SPRINGS.snap for token flights, SPRINGS.slow for the linear memory bar.
  3. Theme-driven color. Layer bars, "model" / "KV cache" labels, cache outline, and caption use currentColor, so the host tints the base illustration with any text-cb-* utility. The accentColor prop colors the cache blocks, flying tokens, both memory bars, and the warning-glow overlay — 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 five layers visible, the cache filled, both memory bars at their final widths (linear at n=5, quadratic at 25).

Variants / Examples

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

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the cache blocks, flying tokens, both memory bars, and the warning-glow overlay.
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/HeroModernArch.tsx).
  • Inspiration: "same idea, faster pen" — the modern KV-cache trick that turns autoregressive decoding from quadratic to linear.