Cinematic Liquid Hero
A full-screen hero section with WebGL liquid simulation as the background. Mouse interaction creates ripples and distortions in a fluid field, overlaid with bold editorial typography.
Preview
Live interactive preview.
Installation
Add this component to your project using the CLI:
npx -y vui-registry-cli-v1@latest add cinematic-liquid-heroSource Code
Component Pass
Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.
1-Year
component updates
Lifetime
Bestone-time access
- ✓Access to all premium components
- ✓Production-ready source code
- ✓Commercial license for one developer
shaders.ts
Component Pass
Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.
1-Year
component updates
Lifetime
Bestone-time access
- ✓Access to all premium components
- ✓Production-ready source code
- ✓Commercial license for one developer
use-liquid-hero-scene.ts
Component Pass
Access high-fidelity, production-grade components with a premium license. Meticulously crafted for performance, a11y, and polish.
1-Year
component updates
Lifetime
Bestone-time access
- ✓Access to all premium components
- ✓Production-ready source code
- ✓Commercial license for one developer
Dependencies
three: ^0.185.0gsap: ^3.14.0
Props
Component property reference.
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | '' | Hero heading text. |
| subtitle | string | '' | Hero subtitle text. |
| fluidColor | string | '#6366f1' | Base color of the fluid simulation. |
| className | string | '' | Additional CSS classes. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.