I just started a new project: **4IM/Flux **! 🚀
A real-time GPU fluid playground.
A React + TypeScript port of Pavel Dobryakov's WebGL-Fluid-Simulation (MIT), extended with a particle layer, a preset system, image sources and capture. This is the standalone project repo: one route, one canvas, everything exposed. No backend, no database, no API routes; everything prerenders static and hydrates.
Two things I found while mapping it that are worth knowing:
The dependency split is cleaner than you'd expect. Of the 21 specimens, 7 are React-only (GlareHover, GlassSurface, LogoLoop, Magnet, Noise, SpotlightCard, StarBorder), 8 use Motion, 4 use GSAP, and only two pull a 3D library. That's why 4IM/Flux could be split into its own repo needing just Next and React — it was never entangled with three.js or gsap.
The real architecture story is the frame budget. Six canvas surfaces can be live at once on the home page, so the interesting design work isn't the component tree, it's the policing: offscreen parking, a zero-cost grain overlay, DPR clamps, and the adaptive quality guard. The doc records the measurements behind each decision rather than just asserting them.
