The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Custom liquid interaction built in Framer.
Turning a static hero into a responsive visual surface through cursor-driven distortion.
That cursor-driven distortion turns a static hero into a real visual surface, and the green editorial art direction gives the interaction a strong anchor. Nice use of motion to reinforce “beyond expected,” not just decorate it.
Thank you, exactly what I was aiming for. The idea was to make the interaction feel like part of the visual language, not just decoration.
Thank you! Really glad you liked it
this is fabulous, so realistic!
Thank you so much, Nicolette!
Wow love it man
Thanks!
This is fire
Appreciate it! 🔥
That distortion effect is so satisfying to watch, way past what most hero sections attempt. I see WebGL in the tags, was that the main lift here, or is Framer's native tooling doing more of the heavy work than I'd have guessed?
Thanks! The actual distortion is WebGL-driven, so that’s the main lift. Framer handles the layout, responsive behavior, and integration, while the liquid surface itself is custom code reacting to cursor movement.
Liquid interactions done right! The hero section feel is so dynamic and sleek, Yurii 🔥
Thanks! The goal was to make the hero feel alive without overdoing it. 🔥
Nice work🔥
The liquid treatment makes the hero feel alive without losing the message hierarchy. I especially like how the cursor-driven motion supports the image instead of competing with it.
Cool motion! 👍
This interactivty adds extra layers of innovation! 🚀
Glad the interaction came through that way, I wanted it to feel like another layer of the experience, not just decoration. 🚀
Yes. it perfectly worked! 👍
Love it🔥
Really nice, congrats Yurii
Great!
okay that is soooo cool
How do you adapt the cursor-driven effect for touch screens?
I use the finger position as the same input the cursor uses on desktop, so the effect still reacts naturally to touch and drag on mobile.
Makes sense—thanks for explaining the touch input.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Recently, I created two designs for my client. One is in dark mode, and the other is in light mode. I love both of them. Which one do you like more?
5 voted
56%
4 voted
44%
9 votes
Closed
fresh light
Luxury Car Dealership Website Design
A premium website concept for a luxury car dealership focused on immersive visuals, seamless navigation, and a high-end user experience. Designed in Figma with a responsive layout and modern UI principles
The dark theme suits the luxury car vibe perfectly!
I can’t stop obsessing over details
Some might call these designs boring.
Fair enough.
They’re not gimmicky.
...and I’m not adding things just to make the page look busier.
I care more about whether people understand your offer and have a reason to choose you.
After 7+ years in design
We’ve systemised how we
write
design
build
websites for conversion.
More enquiries.
Not just a better-looking website.
Is your website getting traffic, but not enough enquiries?
5 voted
45%
6 voted
55%
11 votes
Closed
