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
Wonder Shader Lab - This is my submission for Wonder Challenge.
I made this project because I really love shader effects in Wonder and I was struggling to find and use this feature at first.
Shaders are powerful but somewhat hidden, so I created Wonder Shader Lab, a curated gallery that shows a list of cool shader effects you can use in website design.
I counted 95 main categories of shader effects, with each category having 2 to 6 or 8 different variations. The page includes live examples and simple instructions on how to apply shaders as background and text effects.
Built entirely in Wonder to help other creators quickly discover and use these amazing features.
Wonder File Link: https://app.wonder.so/zeng/files/019f34ef-5599-7c55-9858-ec5d63972f18
I include steps on how to add Shader to background, text and SVG here:https://x.com/zeng_wt/status/2074309904668463312?s=20
Made with Wonder by Zeng.💜
elegant design approach
Very helpful resource. Well done!
Nice
95 categories is a serious amount of cataloging, that alone is a useful reference even without the Wonder file. Do you plan on keeping the gallery updated as new shader types get added, or is this more of a snapshot?
This is an incredible resource! You have made complex shaders so accessible for everyone. Amazing work!
Outstanding 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
══════════════ ✦ ATLAS ✦ ══════════════
The Living Memory of Humanity
═══════════════════════════════════════
Atlas is an immersive experience that transforms the way we explore history. Instead of reading about the past, users travel through it.
Starting from a living globe, Atlas lets you select any location and begin a Memory Flight—a cinematic journey where the world rewinds around you. Cities transform across centuries, civilizations emerge, cultures evolve, and every place reveals the stories that shaped it.
Built with Wonder, I used its design capabilities to rapidly prototype the product, create a scalable design system, explore multiple historical experiences, and develop a complete storyboard that guided the final interactive experience. From the global navigation to each Memory Flight, Wonder made it possible to iterate quickly while maintaining a polished, cohesive vision.
Atlas is built around one simple belief:
Every place remembers. Every memory tells a story.
Live Demo: Click here to test the Live Demo Link
Wonder Design File: Click here to see Wonder Design source
Interactive shader in the Hero responding to cursor movement.
Made with Wonder, done in Webflow.
At this point I may wanna participate in the Wonder Challenge 🤔
yo such a cool visual effect! 💯
Hi 😉
I wanted to create something more memorable for my friend's birthday. I believe the best gifts are the ones you make yourself, so instead of buying a card, I designed an interactive birthday experience in Wonder.🙌
The experience begins with opening an envelope and continues through draggable Polaroid memories, interactive vinyl records, heartfelt birthday wishes, and a birthday cake where the user can blow out the candle to complete the celebration.
Built using Wonder Chat, shader generation, and Wonder MCP to take the project from concept to a fully interactive React experience while preserving the original design.
🚀 Wonder file: https://app.wonder.so/ruslana-prymak/files/019f2e58-9a87-7317-8bc1-2312f228dd9c
😍 Live demo: https://birthday-site-green-psi.vercel.app
😊 Social Link: https://x.com/ruslana_prymak/status/2074218583765442740?s=20
This is amazing
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
fifaworldcup2026
The World Cup is here and the whole world's watching. How are you designing for the world stage?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?