craftbits*

Hero Vibe Check

A large illustrative hero SVG that animates the "vibe check" motif as a star constellation: fifteen main stars in three rows reveal a hidden network of seventeen connection edges. The edges draw in one by one, the pattern glows, a ripple sweeps through the stars, the network breathes, then the whole sky fades back to a quiet dim state before the cycle repeats. Theme-driven via currentColor + a single accentColor prop; reduced-motion users see a static revealed frame.

Customize
Hero illustration
400px
accent
false

Installation

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

Usage

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

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full ~10s cycle: 30 dim background stars twinkle indefinitely; 15 main stars fade in with a gentle stagger; 17 connection lines draw in via pathLength springs; a soft radial glow centred on the network brightens; the stars brighten and grow; a wave ripples through the constellation; the connection opacities pulse to make the network breathe; everything fades back to a dim state. Every timer is cleaned up on unmount and when reduced-motion changes.
  2. Motion values, not re-renders. Star opacity, star scale, edge pathLength, edge opacity, and network-glow opacity are all driven by useMotionValue + useSpring, so the React tree never re-renders during the loop. Springs come from @craft-bits/core/motion — SPRINGS.damped for star opacities and the glow, SPRINGS.slow for edge draws, SPRINGS.bouncy for star scales.
  3. Theme-driven color. The bright star cores and bodies use currentColor, so the host tints the structural chrome with any text-cb-* utility. The accentColor prop colors the connection lines, halo, and network glow — any CSS color (including var(--color-accent-500)). The dim background twinkle and the caption use var(--cb-fg-muted).
  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 revealed frame: all stars lit and grown, all edges drawn, network glow on.
  5. Hydration-safe. Background star positions are computed deterministically from each star's index, so server and client renders agree.

Variants / Examples

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

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the connection lines, halo, and network glow.
pausedbooleanfalseWhen true, render a single static revealed frame 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 revealed frame.
  • 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/HeroVibeCheck.tsx).
  • Inspiration: classical constellation diagrams — "the hidden pattern reveals itself".