Hero CNNs

A large illustrative hero SVG that animates the core CNN motif — a 3×3 kernel sliding across a 6×6 input grid, filling a 4×4 output feature map on a continuous loop. 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-cnns.json

Usage

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

Understanding the component

1. Continuous storyboard. A single useEffect schedules the full ~8s cycle: input grid fade-in, kernel appears, output grid fade-in, kernel scans 16 positions, brief hold, output pulse, fade, loop. Every timer is cleaned up on unmount and when reduced-motion changes.
2. Motion values, not re-renders. All 36 input highlights and 16 output cells 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.snap, SPRINGS.smooth, SPRINGS.bouncy).
3. Theme-driven color. Base grid, borders, labels, and caption use currentColor, so the host tints the whole illustration with any text-cb-* utility. The accentColor prop colors the kernel, glow, output cells, connection line, and pulse — any CSS color (including var(--color-accent-500)).
4. Reduced-motion safe. When prefers-reduced-motion: reduce is set, the loop short-circuits to a static end state: kernel parked at the top-left, output fully filled, connection line hidden.

Variants / Examples

// Compact thumbnail.
<HeroCNNs size={200} />
 
// Explicit accent color.
<HeroCNNs size={480} accentColor="var(--color-accent-300)" />
 
// Custom hex.
<HeroCNNs 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/HeroCNNs.tsx).
• Inspiration: classic CNN feature-map slides — local weights, repeated.