NOVA

Run this with Claude Code to build your own NOVA variant — free. Want the exact, tested code shown in the demo? That’s the $79 download.

# NOVA — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). Run it with Claude Code
and build your own variant. Want the exact tested code — the tuned
shaders, the boundary-morph timing, the fixes — that's the paid
download at https://studio.smartduke.com*

## Before you start

- Node.js ≥ 20.9.
- No assets needed — everything is procedural.

## The prompt

> Build me a premium AI-platform landing page whose entire background
> is ONE continuous particle universe — Awwwards-level, for a fictional
> brand. 60fps with ~90k particles, no postprocessing.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + vanilla
> Three.js (no React Three Fiber) + GSAP ScrollTrigger + Lenis.
>
> **The engine:** one fixed canvas behind the DOM. A single
> THREE.Points cloud of ~90,000 particles morphs through six
> formations as you scroll: a dotted-latitude orb (red crown → blue
> base) → the orb cinching into an hourglass → a DNA double helix with
> rungs → a ridged mountain terrain → a black-hole accretion disk with
> a hollow core → a three-arm spiral galaxy. Generate each formation
> once as a Float32Array; put TWO position attributes on the geometry
> and blend in the vertex shader with a uMix uniform — morphing must
> cost one uniform, not a re-upload. Swap attribute pairs when the
> scroll crosses a segment.
>
> **The premium feel (do not skip):** give every particle a random
> morph delay in an attribute and smoothstep it against uMix so each
> transition SWEEPS through the cloud like a liquid instead of
> crossfading. Sizes: mostly dust with a few bright motes
> (0.3 + pow(random, 2.6) * 1.5), additive blending, depthWrite off,
> soft round sprites with a hot core. Color = mix(cool, warm) by a
> single position-based law (warm above/right, cool below/left) so
> every formation shares one palette.
>
> **Timing rule:** each chapter's copy must sit over its OWN formation.
> Run every morph across the chapter BOUNDARY — start it while the next
> section is still ~30vh below the viewport, settle it as the section
> tops, then HOLD the finished shape for the whole read. The hero holds
> the orb; the collapse happens only as you leave it.
>
> **Hero life:** the orb must not sit still. Three crossed sine waves
> travel across the shell along the surface normal, and the cursor
> presses a soft dent into the field (raycast mouse → sphere, gaussian
> falloff, displaced particles brighten briefly). Weight both effects
> per formation: full on the orb, zero from the helix on.
>
> **Camera:** one keyframe (position/lookAt/fov) per formation,
> eased between segments, with a breath of mouse parallax. Spin the
> cloud per formation — fast for the vortex, none for the terrain
> (apply spin in the shader weighted per formation so the terrain
> never rotates).
>
> **Chapters (sticky panels over the fixed canvas):** hero with badge +
> serif-italic gradient accent word + two pill CTAs; a stats chapter
> with three tilted glass cards (68%, 3.2×, 2,400+); a growth chapter
> with copy left over the ridge line; a single held statement centered
> in the black hole's void; an ecosystem chapter over the galaxy; a
> finale CTA + footer. Headlines reveal word-by-word out of a
> blur(14px). Faint far starfield fades in once the orb collapses.
>
> **Mobile + a11y:** 32k particles and capped DPR under 768px;
> prefers-reduced-motion renders one still frame of the orb and no
> animation loop.

## Gotchas we hit (the paid version has these fixed)

- Morphing inside each chapter means every section shows the PREVIOUS
  formation while its copy is on screen — the off-by-one is invisible
  in code and obvious on scroll. Boundary-morph timing is the fix.
- `bg-clip-text` on a parent `<em>` makes animated child word-spans
  render invisible — the gradient classes must be on each word span.
- Big point sizes + additive blending saturate into a white blob;
  premium is thousands of TINY dim points.
- A panel exit-fade triggered by chapter progress fires while the
  panel is still pinned — anchor it to the sticky release instead.