Real-time fluid engine
RKIZA.
Not a video. Not a loop. A living surface of physics, solved on your GPU sixty times a second.
WebGL2 · live
The product
One canvas. Infinite motion.
Everything below is the live engine — no screenshots. Drag anywhere to push the dye around.
RKIZA.
192³ sim · 1024² dye · WebGL2 60 FPS
Solver
Navier–StokesStable-fluids, 26 pressure iterations / frame
Dye field
1024 × 1024Half-float, bloom + tone-mapped
Footprint
~48 KBSingle file, zero dependencies
Three words. One engine.
Everything that ever moved
across a screen
was a recording.
This is alive.
The loop · 8 stages every frame
It’s physics.
STAGE 01
Curl
Measure how fast the fluid spins at every point on the grid.
STAGE 02
Vorticity
Feed energy back into those swirls so they stay wispy and never flatten out.
STAGE 03
Divergence
Find where the fluid is wrongly compressing or pulling apart.
STAGE 04
Pressure
Solve twenty-six times for the field that cancels that compression.
STAGE 05
Project
Subtract pressure from velocity. Now it is truly incompressible — a real fluid.
STAGE 06
Advect
Carry the motion forward along itself, tracing each point back in time.
STAGE 07
Dye
Push the color through the flow, then let it gently fade.
STAGE 08
Render
Light it, bloom it, tone-map it, and paint it to your screen.
Built different
0
Frames per second
0
Single HTML file
0
Dependencies
∞
Frames, never repeating
Navier–Stokes · GPU solver · Vorticity confinement · Jacobi pressure · Semi-Lagrangian advection · Bloom · Half-float FBOs ·
Navier–Stokes · GPU solver · Vorticity confinement · Jacobi pressure · Semi-Lagrangian advection · Bloom · Half-float FBOs ·
Glass UI
Your interface, floating on the engine.
Frosted panels, crisp type, living motion underneath. Layer real product UI straight over RKIZA — menus, cards, pricing — and it stays perfectly legible while the fluid breathes behind it.
AA
Contrast-safe text
60
FPS behind glass
0
Extra requests
Direct the engine — with your scroll
Ink
Tight, vivid filaments over deep blue — the signature look.
VORTICITY18
SPLAT FORCE3800
BLOOM0.85
DYE FADE0.74
Drop it anywhere
Two tags
and it’s alive.
No framework. No build step. Paste the canvas and the script into any page — a hero, a card, a full background.
<!-- drop the engine into any page -->
<canvas id="ink"></canvas>
<script src="ink.js"></script>
<script>
RKIZA.mount("#ink", {
palette: "ink",
curl: 18,
bloom: 0.85
})
</script>your-site.com — RKIZA as a living background
Now touch it.
Move your cursor · drag to smear · click to burst
Interfaces shouldn’t just sit there.
They’re meant to breathe
— to react, to flow,
to feel genuinely alive.