craftbits*

Hero Classical ML

A large illustrative SVG cover artwork — 20 data points scatter across a soft canvas, fade in with a tiny stagger, then three diamond-shaped centroids pop into place and dashed decision boundaries breathe in. A single entrance, no looping, no project-specific chrome.

Customize
Hero
400px
accent

Installation

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

Usage

import { HeroClassicalML } from "@craft-bits/core";
 
<HeroClassicalML size={400} />

Understanding the component

  1. Single inline SVG, intrinsic 400×280 viewBox. Every coordinate is authored against the 400×280 frame; the size prop scales the rendered width and the height tracks the 10:7 aspect ratio automatically.
  2. Three cluster colors derive from one accent. accentColor paints cluster A (and its centroid). Clusters B and C lock to var(--cb-warning) and var(--cb-success) so the trio stays perceptually distinct across themes — change one variable, the artwork follows.
  3. Single-pass entrance. Dots fade in with a 0.04s stagger, then centroid diamonds pop in with SPRINGS.bouncy, then the two dashed boundary lines path-length-draw with SPRINGS.slow. After ~1s everything is at rest.
  4. No lesson chrome. The original carried a 9-second k-means loop, an iteration counter, and an italic caption. The library version strips all three — the artwork stands on its own.

Variants / Examples

// Tinted to the page's primary accent.
<HeroClassicalML size={520} accentColor="var(--cb-info)" />
 
// Compact thumbnail.
<HeroClassicalML size={240} />
 
// Hard-coded brand color.
<HeroClassicalML size={400} accentColor="#7c3aed" />

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height = size times 7 divided by 10.
accentColorstringvar(--cb-accent)CSS color for the primary cluster and its centroid.
classNamestring—Extra classes merged onto the root <svg>.

Accessibility

  • Marked aria-hidden="true" and role="img" so screen readers skip the artwork by default. Pair with adjacent text (e.g. a section heading) for context.
  • All cluster colors derive from theme tokens so contrast tracks the user's theme. Pass an explicit accentColor only when the surrounding surface forces it.
  • The entrance uses motion's spring presets; users with prefers-reduced-motion: reduce see the final composed scene without overshoot.

Credits

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