Flux

Field notes

Sixty thousand ember particles flow from a sphere into a spiral galaxy, then spell your brand, and scatter from the pointer. One custom shader on a single Points cloud: no models, no textures, no simulation pass.

• 3D
• Particles
• WebGL shader
• Pointer interaction
• Dark theme

Flux is a launch hero for an AI or infrastructure product that wants to feel alive. Sixty thousand ember-colored particles hold a sphere, ripple into a three-armed spiral galaxy, and then settle into the brand's wordmark before returning to the sphere, all on a seamless 10-second loop. Move the pointer through the cloud and the particles scatter away from it, glowing hotter, then drift back into place.

Every shape is generated in code: a Fibonacci sphere, a logarithmic spiral, and a wordmark sampled from canvas text in the page's own display font. All three live on one Points geometry as vertex attributes, and a single vertex shader blends between them with a per-particle stagger, so there is no model, texture, or GPU simulation to set up. Anyone who prefers reduced motion gets the sphere, holding still.

How it's built

• Morphing without a simulation: each shape fills the same 60,000 slots, and all three are stored on one Points geometry as vertex attributes. The vertex shader works out which two shapes are active from the loop phase and blends them, so the CPU never touches a particle after load.
• A ripple instead of a jump: every particle starts its trip at a slightly different moment (its seed × 15% of a stage), and a swirl that is zero at both ends of the trip bends the path mid-flight, so shapes still land exactly.
• The wordmark is real type: the word is drawn on an offscreen canvas in the page's display font (after document.fonts.load), and particles are dropped on the lit pixels. Change WORD and the particles spell the new word.
• The pointer repel costs almost nothing: the pointer ray is cast onto the z = 0 plane once per frame, moved into the cloud's local space, and passed as a uniform. The shader pushes nearby particles out and toward the camera, and they glow hotter while displaced.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

flux-particles/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ FluxScene.tsx
   │  └─ HeroOverlay.tsx
   ├─ lib/
   │  ├─ loop.ts
   │  └─ shapes.ts
   └─ shaders/
      └─ fluxShader.ts

Recut it

• Rename the product and rewrite the pitchsrc/components/HeroOverlay.tsx → HeroOverlay
• Spell a different word in particles, or change its fontsrc/components/FluxScene.tsx → WORD
• Reshape the sphere or galaxy, or change the particle countsrc/lib/shapes.ts → buildShapes()
• Tune hold time, travel time, and the mid-flight swirlsrc/shaders/fluxShader.ts → vertexShader
• Swap the ember palettesrc/shaders/fluxShader.ts → fragmentShader
• Place the cloud left, right, or centeredsrc/components/FluxScene.tsx → useLayout()