craftbits*

Hero Attention

A looping illustrative SVG that visualises attention as a soft lookup by similarity: five token nodes take turns as the query and beam weighted arcs to the rest, with a softmax-style bar chart below reading out the live weight distribution.

Customize
Hero
accent
false

Installation

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

Usage

import { HeroAttention } from "@craft-bits/core";
 
<HeroAttention />

Tint the accent by setting text colour on a parent, or pass an explicit colour:

<div className="text-cb-accent">
  <HeroAttention />
</div>
 
<HeroAttention accentColor="#4A7BF7" />

Understanding the component

  1. Single inline SVG. One <svg viewBox="0 0 400 280"> paints every frame. Pass size for a fixed pixel width or let it fill its parent.
  2. Three-phase loop. Tokens at index 0, 2, and 4 each become the query for ~2.2 seconds, emitting variable-width beams to the others. After a brief hold the cycle restarts. Phase plans, beam widths, and target weights are precomputed module constants.
  3. Springs from @craft-bits/core/motion. Glow opacity uses SPRINGS.bouncy, scale uses SPRINGS.snap, beam stroke and bar height use SPRINGS.damped so widths track without overshoot.
  4. Reduced motion respected. usePrefersReducedMotion short-circuits the cycle; the hero paints a single static phase instead. The paused prop forces the same behaviour explicitly.
  5. Tokens, not hex. The surface uses var(--cb-bg), labels use var(--cb-fg-muted), and the accent defaults to currentColor so any text-cb-* utility on a parent tints the active query, beams, and bar fill.

Variants / Examples

// Paused — useful for thumbnails / OG images.
<HeroAttention paused />
 
// Fixed pixel width.
<HeroAttention size={480} />
 
// Explicit accent override.
<HeroAttention accentColor="var(--cb-info, #3b82f6)" />

Props

PropTypeDefaultDescription
accentColorstring'currentColor'Colour for the active query, beams, and bar fill.
sizenumber—Optional fixed pixel width. Omit to fill the parent.
pausedbooleanfalseWhen true, render a single static phase instead of looping.
classNamestring—Extra classes merged onto the root <svg>.

Accessibility

  • The hero is decorative (aria-hidden="true"); pair it with adjacent text that conveys the meaning. Override with aria-label and role="img" on the consuming wrapper if it needs to be announced.
  • The looping animation pauses automatically when prefers-reduced-motion: reduce is set. The paused prop offers a manual escape hatch (e.g. for thumbnails, print, or OG screenshots).
  • Colour contrast tracks the parent text colour through currentColor, so the hero inherits any prefers-contrast overrides applied site-wide.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/heroes/HeroAttention.tsx).