ð“‚€ Hero Template Library

8 drop-in animated heroes. Pick one, customize copy, ship.
workspace/hero-templates/

Stop building heroes from scratch.

Each card below previews a complete animated hero. Click "Open" to view full-screen. Click "Copy path" to use it in a Claude Code prompt. See README.md for full usage.

01   Three.js Torus Knot — premium / luxury
Open ↗ Copy path
Best for: NG Management, real estate, finance, luxury services. Rotating gold torus knot, mouse parallax.
02   Particle Field — tech / SaaS
Open ↗ Copy path
Best for: HustleOS, SaaS, dev tools, anything tech-flavored. Interactive particle web following the mouse.
03   Mesh Gradient — soft / modern
Open ↗ Copy path
Best for: wellness, lifestyle, design studios, creator brands. Pure CSS — runs everywhere, no JS.
04   Vanta Waves — cinematic / professional
Open ↗ Copy path
Best for: consulting, finance, insurance, B2B services. Deep blue animated waves with mouse interaction.
05   CSS 3D Cards — bold / product
Open ↗ Copy path
Best for: product launches, feature showcases, app landings. Rotating 3D card stack, pure CSS.
06   SVG Blob Morph — friendly / approachable
Open ↗ Copy path
Best for: local services, family, retail, restaurants. Morphing gradient blob, very lightweight.
07   Spline Embed — high-end / WOW
Open ↗ Copy path
Best for: anything that needs to look like a million bucks. Real 3D scene via Spline iframe — swap the URL with any spline.design scene.
08   Parallax Layers — cosmic / hype
Open ↗ Copy path
Best for: launches, hype products, dramatic announcements. CSS 3D perspective with floating orb + animated gradient text.