• Prismatic Liquid Pro: Interactive 3D Fluid Gallery

Prismatic Liquid Pro: Interactive 3D Fluid Gallery

(Hover Interactions are best experienced on desktop with a mouse)

Prismatic Liquid Pro is the definitive "Pro" interaction engine for high-end photography and cinematography portfolios. It moves beyond the limitations of standard 2D sliders by treating your media as a physical, refractive substance.

At its core, the engine utilizes a complex Simplex Noise Solver that runs directly on the GPU. When a user interacts with a card, the image doesn't just scale—it undergoes Viscous Deformation. The pixels melt and swirl around the cursor, while a Prismatic Refraction pass splits the RGB channels to simulate light passing through heavy, architectural glass.

✨ Key Technical Highlights

  • Simplex Flow Dynamics: Every card is a live coordinate field. Using high-frequency noise functions, the component creates organic ripples that track the user's cursor in real-time.

  • Prismatic RGB Refraction: A premium optical effect that offsets the Red, Green, and Blue channels within the fluid flow. This creates a high-end "refractive" look that adds incredible color depth and "shimmer" to your media.

  • Velocity-Sensitive Elastic Warp: The cards physically bend and stretch based on their movement speed. Swipe fast, and the geometry elastically deforms; stop, and it snaps back into its curved 3D formation.

  • Adaptive SmartColor™ Typography: The component procedurally samples the pixel data of your images to extract the most prominent hue, automatically tinting the floating typography for a perfectly matched aesthetic.

  • 60FPS WebGL Pipeline: Optimized to handle complex fragment-shader noise and refraction without taxing the CPU, ensuring buttery-smooth performance even on mobile devices.

⚙️ Design & Physics Controls

  • Optic Lab: Fine-tune the "Fluidity" (melt intensity), "Noise Detail," and "RGB Refraction" strength.

  • Kinetic Physics: Control the "Elastic Warp" torque, "Momentum Friction," and "Idle Drift" to define how the carousel feels to the touch.

  • Stage Setup: Adjust the "Camera Depth," "FOV," and "Unit Dimensions" to fit your layout's specific proportions.

  • Typography: Full font-family support with dynamic "Spotlight Scaling" as cards reach the center focus.

Share It On :

explore more

Framer WebGL 3D Gallery

3D Carousel

Liquid Motion
WebGL

Ultimate Liquid Vortex: Cinematic 3D Media Engine

$

20

Buy Now

see demo

Framer WebGL 3D Gallery

Bento Grid

Framer 3D
Shader Morph

Bento-Morph 3D: Kinetic Grid Gallery

$

18

Buy Now

see demo

The ultimate toolkit for agencies that want to dominate the Framer space.

Icon

Unlock the secret to award-winning interactions.

The ultimate toolkit for agencies that dominate the Framer space.

The "Ape Mode"
The "Ape Mode"
All-Access Pass
All-Access Pass
$99
$99

Own everything we’ve ever built. Every gallery, every shader, and every future update.

40+ Components

40+ Components

Priority Support

Lifetime Updates

Lifetime Updates

The "Ape Mode"
All-Access Pass
$99

Own everything we’ve ever built. Every gallery, every shader, and every future update.

Icon

The ultimate toolkit for agencies that dominate the Framer space.

29 Components

Priority Support

Lifetime Updates

Quick Links

Galleries, 

Shaders, 

Freebies, 

Gumroad Store, 

Agency

Quick Links

Galleries, 

Shaders, 

Freebies

Gumroad Store, 

Agency

X, 

Reddit, 

Discord 

©2026