3D / WebGL

Cappen Fluid Simulation

by Vanguardia · motionprompts.dev

Cappen-style GPU fluid simulation built with Three.js: moving the pointer injects ink and velocity splats into double-buffered HalfFloat render targets, and a Navier-Stokes shader solver (advection, curl/vorticity confinement, divergence, 40 pressure iterations) makes the ink swirl and dissipate. The full-screen canvas sits over a white typographic hero with mix-blend-mode: difference, so the flowing ink inverts the giant text beneath it.

Type: Web motion
Framework: Three.js
Trigger: pointer
Duration: 0.25–1.8s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 3/5
Pinned: no
Reduced motion: not handled
Libraries: three

pointer-driven GPU Navier-Stokes ink splats, difference-blended

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev20,433 chars

# Fluid Simulation Hero (Cappen-style ink over inverted type)

## Goal
Build a full-screen landing hero with a giant white typographic headline and a **GPU flui…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.