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!
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
Fantastic work, do you plan the final animation to be morphing every few seconds or are you just testing which variant works better?
I am all in for variant 6.
Just wrapped up the Framer build for Midian Solutionz.
Case study coming soon ⏳️
Cool motion @Blessing Adewale
New case study for Steerco AI - Designed 16+ unique conversion-focused pages.
Loving some orange accent! :)
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
aivideo
AI video tools are moving at warp speed. What tools are you using?
whennotai
As AI accelerates, creative judgment matters more. What part of your work stays human?
