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
Built this hero section with a WebGL shader running underneath editorial typography. Here's the breakdown.
The background isn't an image. It's PlasmaWave — a live shader from ReactBits, rendering in real-time using OGL (WebGL).
What I tuned:
→ Warm gold/plum color pair instead of the default purple-cyan
→ Vignette + grain layered on top — kills the "AI-generated" look, adds film texture
→ Serif typography instead of the usual sans-heavy SaaS look
→ Editorial nav/footer — minimal, magazine-style, not "startup landing page"
Built with Lovable + ReactBits. The shader itself runs on the GPU — two animated plasma bands blending into each other, customizable speed, bend, rotation, all live.
Most people use shader backgrounds and leave them looking like a tech demo. The grain + serif type + warm palette is what makes this feel like a fashion editorial instead of a SaaS pricing page.
Curious what people think 👇
Does a moving shader background actually help a hero section, or is it just noise that distracts from the headline?
#WebGL #ReactBits #Lovable #ShaderArt #UIDesign #FrontendDevelopment #EditorialDesign #BuildInPublic #Contra #CreativeCode
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
Always down for a fresh UI experiment! 🎨✨
Just finished up this new concept: FAME.X — a platform designed for investing in digital talent and creators.
For the visual direction, I wanted something bold, energetic, and slightly futuristic. To pull that off, I went heavy on high-contrast, grainy gradients mixed with massive, striking typography and sleek glassmorphism cards. It gives the whole platform that trendy, high-value feel. 🔥
I’m an absolute sucker for testing out new design tools, and when they are built by awesome people, it’s an ultimate ccccombo. 💥
To get these incredibly juicy gradients, I used a brand-new tool created by Leo. I’ve been playing around with it, and it’s honestly just pure joy to use. Plus, it’s completely free.
If you want to level up your gradient game, you absolutely have to try it out: https://www.gradientool.com/
I like it!
Sayless | Smart Home & AI Website Design 💻
These are the three pillars I got to work with on the Sayless project, and honestly, it's one of my favorite intersections in design right now.
Designing for the smart home and automation space is a unique challenge. You're translating invisible technology into something people can feel, understand, and trust. The product is complex. The communication has to be simple.
For Sayless, I led the project from research to launch, competitor analysis, user flow mapping, wireframes, and final design. The goal was clear: a website that doesn't just look good, but actually works as a business tool.
This is the kind of project that reminds me why I love what I do. 🖤
#SmartHome #WebDesign #AIAutomation #UXDesign #BusinessAutomation #ProductDesign
Such an amazing result, love how it turned out! 🔥
Can't decide on the nav direction for the new template I'm working on. What do you think??
20 voted
74%
7 voted
26%
27 votes
Closed
Blurred looks more clean
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.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
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?