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
Most ecommerce interfaces fail because they feel static.
This interactive espresso shot selector was designed to create instant visual feedback that keeps users engaged while customizing their order.
Built with Next.js, React.js, TypeScript, HTML & CSS, the component dynamically updates the mug fullness, roast profile labels, bean visuals, and pagination indicators based on user interaction.
—————————
I specialize in UI development, landing pages, dashboards & pixel-perfect frontend.
If you need a frontend developer partner to bring your next project to life → Then let’s hop on a call 🎧.
#buildinpublic #css #web #saas #html #reactjs #nextjs #webdev #frontend #coding #programming #websites #website #landingpage #landingpages #dashboard #dashboards #producthunt #ui #uicomponents #webcomponents #ux #indiehackers #animations #microinteractions #webdevelopment #frontend #frontenddevelopment #founders #startups #ceo #entrepreneur #project
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
What clients can prepare to help speed up a website project?
Sometimes a business needs a new website sooner than a typical project timeline allows.
While every project still requires strategy, design, and development, there are a few things clients can prepare that often help move the process forward faster:
• content drafts or key messaging
• photos, brand assets, and visual materials
• examples of websites they like (and don't like)
• information about their target audience
• service descriptions and offers
• testimonials, reviews, or case studies
• business goals and conversion priorities
The more information available at the start, the less time is spent waiting for decisions, gathering materials, and revising content later.
The smoother the preparation, the smoother the project!
That's nice!
Two templates in with Cobi Studio. The third is already on the way. 👀
A premium Framer template for creative studios, branding agencies, and film teams who want a site that sells the work, not just shows it.
Eleven editorial pages, full CMS, and a design system you can rebrand in minutes. Plus a full step-by-step walkthrough video, so you can launch even if you’ve never touched Framer.
Running a studio? Tell me what your current site is missing. 👇
This is so smooth and effortlessly clean
PixelWave is a browser-based audio visualizer that turns
any MP3 or WAV into real-time pixel animations. It includes
4 visualization modes, 4 color themes, a curated tape
library, and a beat-sync game where the audio waveform
becomes playable terrain. Built with vanilla HTML/CSS/JS
and the Web Audio API. No server, no uploads — everything
runs locally in the browser.
How I Used Stitch
I brought my concept into Stitch using
"Start from existing design." Stitch streamed the
generation of all screens directly to the canvas
as separate editable frames. I used in-place AI edits
to refine screens where the canvas reset mid-generation.
Those screens defined the visual direction and component
structure of the full build, deployed to Netlify.
The "Start from existing design" feature was the most
useful part — importing my HTML file and getting 5
separate editable frames immediately saved a lot of time.
The main friction I encountered was with undo/redo:
when I tried to undo a change on one frame, it reverted
all frames back to an earlier state, not just the
specific edit. This made iterating carefully on
individual screens less predictable.
Overall Stitch significantly sped up going from
concept to structured screens.
Live Demo
https://pixelwave-demo.netlify.app/
The beat sync game idea is pretty creative. Not many entries are exploring audio as the core experience. Also agree on the undo issue, ran into a few similar moments while iterating.
Here's what I built for the challenge:
https://on.contra.com/pnfJBQ
on.contra.com
Introducing Voya: Revolutionize Your Travel Planning Experience
Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
Challenges
View all
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.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?