craftbits*

Hero Neural Nets

A large illustrative hero SVG that animates a forward pass through a tiny 3-4-2 fully connected network. Pulses of light travel left-to-right through the connections, and each layer's nodes light up with a bouncy spring as the signal arrives. Theme-driven via currentColor + 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-neural-nets.json

Usage

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

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full ~6s cycle: nodes fade in with stagger, lines fade in, input layer fires, input→hidden connections brighten, hidden layer activates and input cools, hidden→output connections brighten, output layer pops with a scale bounce, output resets, loop. Every timer is cleaned up on unmount and when reduced-motion changes.
  2. Motion values, not re-renders. All 9 nodes and 20 connections 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.bouncy for layer activations, SPRINGS.snap for connection pulses, SPRINGS.slow for the entrance fade.
  3. Theme-driven colour. Surface, node base, border, and caption use cb-* tokens. The accentColor prop colours the active node glow, connection pulses, and the radial backdrop behind the hidden layer — any CSS colour, including var(--color-accent-500).
  4. Reduced-motion safe. When prefers-reduced-motion: reduce is set (or paused is true), the loop short-circuits to a single static end state: every node painted, output nodes gently glowing, connections dimly visible.

Variants / Examples

// Compact thumbnail.
<HeroNeuralNets size={200} />
 
// Paused — useful for OG images.
<HeroNeuralNets paused />
 
// Custom hex.
<HeroNeuralNets accentColor="#8b5cf6" />

Props

PropTypeDefaultDescription
accentColorstring'currentColor'Any CSS colour. Tints the active node glow, connection pulses, and backdrop.
sizenumber—Optional fixed pixel width. Omit to fill the parent. Height tracks the 400x280 aspect ratio.
pausedbooleanfalseWhen true, render the 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. The paused prop offers a manual escape hatch.
  • All colours flow from currentColor plus 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/HeroNeuralNets.tsx).
  • Inspiration: classic forward-pass diagrams — a neuron is a tiny decision-maker.