Hi everyone, sharing the site for our web studio in Lahore, Pakistan:
The home page is one R3F canvas you scroll through like a film, rather than a set of pages. A few things under the hood:
- The gold dust is simulated on the GPU with
GPUComputationRenderer, with a simulation texture of up to 1216×1216 on capable GPUs. Lower tiers scale it down. - The cursor is wind, not a repulsion force. A Stable Fluids solver runs on the GPU on a 128×128 grid, and the particles sample it bilinearly. Momentum you inject keeps travelling and curling after the pointer stops.
- The chrome type uses troika-three-text, with a reflector pass and postprocessing.
- Smooth scroll comes from Lenis.
- Shader programs are compiled ahead of the first scroll, so the first movement doesn’t hitch on program linking.
Stack: three r182 · @react-three/fiber 9 · drei 10 · @react-three/postprocessing 3 · Lenis
Shipping: a strict Content-Security-Policy with integrity hashes on every script. The studio, service and case-study pages are plain HTML documents, so the site stays readable without the canvas.
Happy to answer questions about coupling the dust to the fluid field. Feedback very welcome.
