craftbits*

Hero Vec S4

A retro CRT oscilloscope on a phosphor grid: Wave A holds steady, Wave B drifts continuously around the unit circle, and the screen's radial glow plus a tabular dot-product readout track the cosine of the phase difference in real time. Theme-driven via currentColor plus a single accentColor prop; reduced-motion users see the aligned-peak frame statically.

Customize
Oscilloscope hero
400px
accent
false

Installation

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

Usage

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

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full cycle: the CRT bezel breathes opacity gently, both waves draw in via pathLength springs (Wave A at 0.4s, Wave B at 0.8s), and at 1.4s the phase begins a linear drift through one full turn every 6 seconds — repeating forever until the component unmounts or reduced-motion flips.
  2. Motion values, not re-renders. The phase is a useMotionValue; a useTransform derives cos(phase), another derives the absolute value for the glow, and a damped useSpring smooths the result. A requestAnimationFrame loop reads the phase each frame and writes the new Wave B d attribute plus the live dot-product text, so the React tree never re-renders during the drift. Springs come from @craft-bits/core/motion — SPRINGS.slow for the entrance, SPRINGS.damped for the glow.
  3. Theme-driven color. Bezel, grid lines, Wave A, formula label, and caption all use currentColor, so the host tints the structural chrome with any text-cb-* utility. The accentColor prop colors the drifting Wave B, the radial alignment glow, and the dot-product readout — any CSS color (including var(--cb-accent)).
  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 frame: both waves aligned at phase 0, glow at peak intensity, dot-product readout pinned at 1.00.

Variants / Examples

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

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the drifting Wave B, alignment glow, and dot-product readout.
pausedbooleanfalseWhen true, render a single static frame (aligned waves, peak glow) 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 aligned frame.
  • All colors 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/HeroVecS4.tsx).
  • Inspiration: retro CRT oscilloscope showing two sine waves — "when waves agree, the product peaks".