The particle hero, for any brand: a one-shot build prompt
Generalized from the Govafy.com homepage hero on 2026-07-18. Give this to a fresh agent to build the same living particle hero for ANY company.

How to use this template
Replace every [BRACKETED] token below with your brand's values. Nothing else needs editing.
Keep every number exactly as written. The physics constants, timings, and rules are the product of a full day of tuning and debugging; they are brand-independent.
You need one asset: your logo or icon as a transparent PNG, at least 1000px wide, with real color in the artwork (the particles inherit their colors from its pixels).
Best results on a dark page. If your brand lives on a light background, tell the agent to invert the glow logic (dark particles, additive blending off) and expect to tune contrast by eye.
The tokens:

[DOMAIN] - your website, e.g. acme.com
[LOGO_FILE] - path to the transparent logo PNG in the project
[CANVAS] - your dark base color family, e.g. "#0F172A deepening to near-black"
[ACCENT] - your primary accent color, e.g. "#90D5FF"
[CTA_COLOR] - the one high-contrast action color, used only on the main button, e.g. "#F88379"
[SIGNATURE_DETAIL] - the one small feature of your mark that gets special treatment, e.g. "the fox's ear stays orange", "the bolt stays yellow". Pick the detail people recognize.
[EYEBROW] - the small all-caps line above the headline, e.g. "THE OPERATING LAYER FOR X · GUIDED BY Y"
[HEADLINE] - a short punchy headline broken over up to three lines, with the final phrase in [ACCENT]
[SUBLINE] - one or two sentences of plain-language explanation
[CTA_LABEL] - the button text, e.g. "Start free workspace"
[GHOST_LINK] - the secondary link text, e.g. "Watch the 90-sec demo"
[PROOF_LINE] - a mono proof strip of 2-4 short claims separated by middle dots, true claims only
[HEADING_FONT] and [MONO_FONT] - your heading/body font and your mono font
Copy everything below the line.

Build the hero section for [DOMAIN]. Read this whole brief before writing code, then build it exactly as specified. Verify each acceptance test yourself in a real browser before telling me it is done.

The concept
The hero is a living scene, not a layout. Our logo is rebuilt out of roughly 9,000 glowing particles that form on arrival, breathe, and react physically to the visitor's cursor. The headline text is part of the same physical world: letters scatter when you swipe through them and drift back. The visitor should immediately want to play with it. Nothing on the page may look like a generic SaaS template: no centered hero, no pill buttons, no icon card grids.

Layout and brand (locked, do not improvise)
Full-viewport dark hero on the [CANVAS] palette. Film grain at 2-3%, sparse starfield, subtle darker atmosphere pockets. A soft dark radial "nest" sits behind the logo so bright particles have contrast.
Left column: mono eyebrow "[EYEBROW]", then the headline "[HEADLINE]" on up to three lines, with the final phrase in [ACCENT]. Sub-line: "[SUBLINE]". One [CTA_COLOR] button "[CTA_LABEL]" (6px radius, dark text) plus a ghost link "[GHOST_LINK]". Mono proof line: "[PROOF_LINE]".
Right of center: the particle logo, occupying about 60% of the width, built from the real logo file ([LOGO_FILE]). Sample its pixels so every particle inherits the color of the pixel it came from; brighten and glow-tint the dominant body color toward [ACCENT], but [SIGNATURE_DETAIL] keeps its exact original color and appears nowhere else on the page. Never recolor the signature detail.
Typography: [HEADING_FONT] for headings and body, [MONO_FONT] for eyebrows and proof. No other fonts.
The particle logo
On load, the logo assembles in about 2.4 seconds: particles stream in from a spiral, the most recognizable region resolves first, [SIGNATURE_DETAIL] lands last. Play once per visit.
At rest it breathes: slow sine drift, slightly stronger toward the outer edges of the mark, plus tiny per-particle shimmer.
Physics on interaction (this is the heart of it): every particle has velocity, drag, a spring pulling it to its home position, and a per-particle mass between 0.7 and 1.3. Cursor SPEED is the force. A slow hover parts the particles gently. A fast swipe blasts them across the entire hero, thrown with the swipe direction (about 65% radial push, 35% along the gesture). Holding the mouse button roughly doubles the force. Energized particles glow brighter and slightly larger.
The return is deliberately asymmetric: outbound flight is unrestricted, but any particle moving back toward home is speed-capped to a slow-motion glide, with a soft brake on final approach so everything settles exactly into place with no wobble. A full blast should take roughly 8 to 10 seconds to fully reassemble. Tuned constants that feel right: impulse = (0.012 + speed * 0.62) x falloff x mass, drag 0.945, spring 0.0032 x mass, return cap 0.020 x mass, displacement clamp 3.2 world units, interaction radius 0.28 + speed * 1.9.
The text physics
The headline splits into individual CHARACTERS; the eyebrow, sub-line, and proof line split into WORDS. All of them run the exact same physics model in screen pixels: impulse = (0.5 + speed * 0.34) x falloff x mass, drag 0.94, spring 0.0045, return cap 1.7px x mass, travel clamp 460px, plus a slight lean rotation while flying (clamp 24 degrees).
The buttons and links are NEVER split and NEVER move. They must stay perfectly clickable at all times.
Measure each glyph's home position only after fonts are loaded AND the entrance animation has finished, and subtract live displacement when re-measuring on resize. Work in hero-local coordinates so scrolling never skews the field.
The cursor
Hide the native cursor on fine pointers. The custom cursor is a thin ring that eases behind a solid dot; the ring grows near links and buttons. Build the ring and dot as DOM elements moved with transforms, NOT drawn on a canvas. This is non-negotiable: canvas-drawn cursors desync from the real pointer on Retina screens and after zoom changes.
An [ACCENT]-colored comet trail follows the cursor on the hero only, drawn on its own full-viewport canvas with additive glow, decaying in about 600ms.
Motion and scroll
Headline entrance: SplitText lines rise from an overflow mask with staggered words; secondary elements fade up after. CRITICAL: release the line masks (overflow visible) the moment the entrance finishes, otherwise the masks will clip the letter physics later.
Optional atmosphere arc: the page background is a fixed gradient that scrubs from the darkest [CANVAS] tone toward a slightly warmer horizon across the full page scroll (GSAP ScrollTrigger), with stars fading accordingly. Skip if the brand has no appetite for it; keep the hero static-dark instead.
Lenis smooth scrolling sitewide.
Technology (use exactly this)
Next.js App Router + TypeScript + Tailwind v4, deployed on Vercel (an equivalent existing React setup is acceptable; keep everything else identical). Three.js Points with a custom ShaderMaterial: formation, breathing, and glow live in the vertex shader; the physics displacement is simulated on the CPU each frame (9k particles is trivial) and uploaded as a dynamic buffer attribute. GSAP 3 with ScrollTrigger and SplitText for entrances and scroll. All pointer listeners live on window, never on inner elements.

Hard-won implementation rules (each one was a real bug)
A canvas is a replaced element: "fixed inset-0" alone does NOT stretch it. Always set explicit h-full w-full CSS on overlay canvases AND size their bitmaps from the element's own clientWidth x devicePixelRatio, never from window.innerWidth (scrollbar skew).
Make canvas sizing self-correcting: re-apply on ResizeObserver, window resize, visualViewport resize, devicePixelRatio media-query changes, and a heartbeat check about twice a second. Zoom, monitor moves, and scrollbars all silently invalidate one-time setup.
Test at devicePixelRatio 2, not just headless defaults. Retina is where alignment bugs live.
The text column container must be pointer-events-none with pointer-events-auto restored on the inner content, or it silently swallows mouse events aimed at the logo underneath.
The logo's canvas must cover the ENTIRE hero (offset the logo inside the scene to position it), or scattered particles vanish at an invisible edge.
Put user-select none on the hero so drags never trigger text selection.
Fallbacks are first-class: prefers-reduced-motion gets a fully static composed hero (no sim, no custom cursor, everything readable). Touch devices keep the native cursor and static text; the logo still responds to touch-drag. If WebGL fails, show the static logo image.
Performance: clamp devicePixelRatio at 2, sample the logo at 3px steps (4px on mobile), keep the whole thing at 60fps on a mid-range laptop.
Acceptance tests (run these before calling it done)
Move a synthetic pointer to exact coordinates: the cursor dot's transform must equal those coordinates exactly.
Swipe fast through the logo: particles must visibly cross the hero midline into the text side, then fully reassemble within about 10 seconds.
Swipe through the headline: letters must leave their own line boxes (no clipping) and return to pixel-exact positions.
Both buttons must remain stationary and clickable during any scatter.
Zero console errors, and everything above verified at devicePixelRatio 2.