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
WebGPU-Based Liquid Typography Component (Framer)
Built a GPU-driven liquid distortion component using WebGPU (WGSL) inside Framer.
Instead of relying on traditional WebGL effects, I engineered a per-pixel distortion pipeline with:
• Decay + blur trail system
• Flow-based UV displacement
• GPU-accelerated offscreen rasterization
• DOM-to-texture synchronization layer
The main engineering challenge was keeping DOM typography and GPU texture snapshots aligned during font loading and layout shifts.
The result is a reusable, high-performance component that runs inside a low-code environment while maintaining architectural control over rendering behavior.
Available for:
• Advanced Framer builds
• GPU-based interaction systems
• Custom shader-driven UI effects
Nice Design
wonderful design!
Amazing
A per-pixel WebGPU distortion overlay that keeps DOM elements fully selectable is seriously impressive engineering! Most liquid text effects break interactivity but you've maintained architectural control over the rendering pipeline. This is the future of expressive web UI — incredible work!
Great work!
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
nicee work
Love it!
What about preloaders? Are they killing conversion nowadays or opposite? Small concepting in Framer.
Depends on the brand I guess. For something this premium, a short preloader actually builds anticipation. But anything over 2s and we're losing people fast!
Trending
Notion
Notion isn’t just where you work, it’s starting to work for you. What agents are you building?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
brandguidelines
Brand guidelines are becoming living systems, not static documents. What are you building for your clients?
aivideo
AI video tools are moving at warp speed. Which ones are you experimenting with?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?