Hey everyone! 👋

A few days ago, I launched Interactive Fluid on the Marketplace, and I wanted to share a look under the hood.

Most fluid text effects on the web rely on heavy external libraries, video loops, or slow canvas redraws. I wanted to build something that feels snappy, reactive, and completely native to Framer’s workflow.

What it does:

True GPU Fluid Physics: Runs real-time velocity advection, vorticity curl, and pressure projection directly on the GPU.

Shared Displacement: The typography and the background dot matrix share the exact same displacement field, so your text organically distorts with the fluid wake.

Custom Typography UI: Plug in any font directly with Framer’s extended font controls, tweak line height, block width, and letter spacing.

Performance-First: Written in Vanilla Three.js with zero external CDNs, Drei, or R3F. It automatically sleeps when off-screen or during static rendering so your site stays lightweight.

It works great for dark-mode hero headers, tech/Web3 landing pages, or playful portfolio statements.

Here's the link of the component: https://framer.link/vGDlLMa

Would love to hear your feedback, see what you create with it, or answer any technical questions about the shader setup!

Hey everyone! 👋

A few days ago, I launched Interactive Fluid on the Marketplace, and I wanted to share a look under the hood.

Most fluid text effects on the web rely on heavy external libraries, video loops, or slow canvas redraws. I wanted to build something that feels snappy, reactive, and completely native to Framer’s workflow.

What it does:

True GPU Fluid Physics: Runs real-time velocity advection, vorticity curl, and pressure projection directly on the GPU.

Shared Displacement: The typography and the background dot matrix share the exact same displacement field, so your text organically distorts with the fluid wake.

Custom Typography UI: Plug in any font directly with Framer’s extended font controls, tweak line height, block width, and letter spacing.

Performance-First: Written in Vanilla Three.js with zero external CDNs, Drei, or R3F. It automatically sleeps when off-screen or during static rendering so your site stays lightweight.

It works great for dark-mode hero headers, tech/Web3 landing pages, or playful portfolio statements.

Here's the link of the component: https://framer.link/vGDlLMa

Would love to hear your feedback, see what you create with it, or answer any technical questions about the shader setup!