Lusion Fluid Particle Simulation
What it does
A full-screen p5.js particle physics simulation where hundreds of small shapes (triangles, squares, circles) fall under gravity and pile up with fluid-like collision resolution using a spatial grid. Pressing and dragging the mouse pushes and swirls nearby particles. It is not GSAP-driven — the physics integrate every frame inside p5's draw loop.
How it's built
| Category | interactive |
|---|---|
| Tech | vanilla JS |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Fluid Particle Simulation Hero (falling shapes that pile up like a liquid)
## Goal
Build a full-screen contact/CTA hero on a saturated electric-blue background, with a centered white
headline floating over it, and — painted across the whole viewport behind the text — a **p5.js
particle physics simulation**: ~250 small white shapes (triangles, squares, circles) that spawn in a
loose grid near the top, **fall under gravity, collide, and pile up at the bottom with soft,
fluid-like collision resolution** (a spatial-grid neighbor solver that pushes overlapping particles
apart and blends their velocities so the heap behaves like a settling liquid rather than rigid
bodies). **Pressing and dragging the mouse shoves and swirls nearby particles**, injecting velocity
and spin along the drag. The star of this piece is the per-frame particle solver, not any DOM
animation — there is **no GSAP** here.
## Tech
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.