craftbits*

Hero Lora

A large illustrative hero SVG that animates the core LoRA motif — a frozen weight matrix W with a hatched overlay, two tiny adapters A and B that slide in and multiply, and a ghost ΔW bloom with a rank badge cycling through r=4, r=16, r=64. 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-lora.json

Usage

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

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full ~8.5s cycle: W fades in, the frozen badge snaps on, adapter A slides in, B slides in, a multiplication symbol and dotted connections appear, a ghost ΔW blooms, the params caption pops, then the rank badge cycles r=4, r=16, r=64 while the adapters subtly resize, before everything fades and the loop restarts. Every timer is cleaned up on unmount and when reduced-motion changes.
  2. Motion values, not re-renders. Adapter positions, sizes, opacities, and the ghost overlay 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.smooth for entrances, SPRINGS.bouncy for adapter slides, SPRINGS.snap for the frozen badge, SPRINGS.slow for adapter size changes.
  3. Theme-driven color. Base W block, hatching, grid, frozen badge, "W" label, and caption use currentColor, so the host tints the whole illustration with any text-cb-* utility. The accentColor prop colors the adapters, ghost ΔW, ΔW label, params caption, and rank badge — any CSS color (including var(--color-accent-500)).
  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 end state: adapters parked at their targets, ΔW visible, rank badge at r=4.

Variants / Examples

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

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the adapters, ghost ΔW, ΔW label, params caption, and rank badge.
pausedbooleanfalseWhen true, render a single 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.
  • 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/HeroLora.tsx).
  • Inspiration: the LoRA paper (Hu et al., 2021) — "don't fine-tune everything".