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
Interactive Glass Typography – WebGL Refraction & Chromatic Dispersion Shader
Live demo: https://penev.tech/labs/glass
I created an interactive WebGL shader that turns ordinary text into dynamic, tactile glass — as if the letters are made of molten, imperfect, frosted material that bends and disperses light in real time.
The result is a hypnotic, premium effect — perfect for experimental web intros, luxury brand hero sections, creative portfolios, digital art pieces or interactive storytelling.
My role
Concept → full GLSL shader development → interactive controls & UI → real-time optimization (60 fps) → demo implementation.
Tech stack
WebGL, GLSL fragment shaders, JavaScript
I recommend Unicorn studio - there you can recreate this effect with just one click.
One-click tools are fine for visuals, but they don't give you the same programmatic hook into the DOM or the ability to optimize fragment throughput for mobile. I wrote this to explore how specific dispersion algorithms handle real-time text-mesh updates—stuff you can't tune when the shader logic is hidden in a UI.
The idea of molten frosted glass text that responds to mouse movement is such a satisfying interaction to imagine. The control panel on the left with all those refraction and dispersion sliders shows how much thought went into the physics of it. Going to check the live demo right now.
I like this even more than the usual effect one can achieve with Unicorn or similar tools. Feels smooth and polished. Awesome work!
Nice work, you are best!
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've come across a useful tool for creating awesome gradients.
It comes with 1,200+ WebGL shader gradient presets and 14 different gradient types, so you can start from a library, tweak endlessly, and create something truly unique every time.
If you’d like to try it, drop a comment and I'll leave you the link to test it out.
This looks powerful 🔥 I’m always looking for better gradient tools would love to test it.
• The goal was not to make it fancy.
It was to make the search useful. Students need quick means to find a conversation without distracting their learning.
• For this MVP, I focused on simplicity.
Clean interface, clear message hierarchy, and minimal friction to start a conversation. No unnecessary features yet, just the core interaction working properly.
• I paid attention to the small details.
Input behaviour, timestamps, empty states, and how responses appear. Chat is less about visuals and more about flow and timing.
• What worked?
The interaction feels direct and distraction-free.
• What’s next?
Exploring message states, smart prompts, and possibly structured replies once we validate usage.
It’s still early, but direction > perfection.
Chat design experiences, what do you prioritize first:
Speed, Clarity, or Engagement?
Love this approach 👌 Simplicity is so underrated in MVPs. What was the hardest part to simplify?
Illustra AI turns messy sketches into clean, export-ready illustrations. No design skills needed.
Upload a sketch and instantly get modern illustrations you can export as SVG, PNG, or EPS, or open directly in Figma & Illustrator.
Features:
• Sketch to AI illustration in seconds
• Clean, minimal, vector-ready output
• Trending designs for inspiration
• Super simple, designer-friendly UI
Pricing:
• Free Trial: 1 month, 20 designs
• Lifetime Access: $599, unlimited designs + future updates
Built for designers, founders, and creators who want speed without complexity.
Live Prototype: https://illustra-ai.bubbleapps.io/version-test/
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?