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
I built NEON SPRAWL — a fully animated cyberpunk gaming landing page — using Wonder (@wonder).
The concept: "GTA 6 meets Cyberpunk 2077" for a fictional game. Void-black base, vivid neon accents (magenta, cyan, neon green), monospace HUD typograph
y, and heavy animation throughout — everything glitches, pulses, sweeps, and scans.
What's on the page:
• Hero with glitch-stack title, scanline overlay, HUD corner brackets, boot-log terminal, and a police-scanner ticker
• Transparent nav with pulsing logo, blinking cursor, and live ticker
• Trailer transmission section with chamfered video frame and REC indicator
• Three operator cards with online/engaged status, animated stat meters, and signature abilities
• Heist planning HUD with tactical map, entry/vault/extraction routes, NCPD patrol zones, and radar rings
• District showcase with cyan grid overlay and pulsing sonar pins
• Live stats band with telemetry bars
• Feature list with launch countdown and edition cards with scarcity indicators
• Footer with terminal newsletter sync and servers-online status bar
The whole thing was built using Wonder's chat agent — one artboard, every section animated. What you design is what you ship.
Walkthrough video: https://youtu.be/oaeLcQrvn_A
Wonder file: https://app.wonder.so/jay-p/files/019f37b6-93d2-7ef8-be26-a0930655f5ab
#WonderChallenge #Wonder #GameDesign #Cyberpunk #WebDesign @wonder
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
One thing I've wanted for years is a personal bookshelf app that makes it easy to digitize my physical book collection.
For the Contra × Wonder Challenge, I finally decided to design it.
The idea is simple. Add books by scanning the barcode, taking a photo of the cover, or entering the ISBN manually. Once added, every book lives in a clean digital library where I can organize what I'm reading, what I've finished, and what I want to read next.
What surprised me most was Wonder itself. I expected it to speed up the process, but I didn't expect it to understand the direction I had in mind so accurately. It helped me iterate much faster while still giving me the precision to shape the experience the way I wanted.
This challenge gave me the perfect excuse to finally design a product that's been sitting in my head for a long time. Hopefully, it's also the first step toward turning it into a real app.
Public link: https://app.wonder.so/rudy-p-agnel/files/019f2f48-08b9-7ce4-b9d8-b01e1629a62d
This is a great design, I also need this app. Very beautiful.
For this challenge, I designed the actual emails you receive. I built two complete brand emails in Wonder:
- Kiaropi Hotel: A luxury booking confirmation for a fictional hotel in Paros, Greece.
- Uncle Fuego: A limited-drop hot sauce launch.
Everything was made with Wonder features: layouts and copy through Wonder Chat, most photos and stickers AI-generated, and a live shader behind the footer wordmark. Same tool, same process, two totally different worlds.
Building with Wonder 🚀
I've had the idea for HirePilot sitting in my idea bank for quite some time. When I saw the Wonder Challenge, I thought it was the perfect opportunity to finally bring it to life.
With only 3–5 hours, learning a completely new tool while balancing my day job, I knew I wouldn't be able to build everything I had envisioned. My goal shifted from creating a perfect product to exploring how Wonder could fit into my design workflow.
Instead of treating Wonder as just another UI generation tool, I used it as a collaborative design partner—iterating on product ideas, refining layouts, experimenting with shaders for motion and depth, and exploring MCP to make the experience feel more connected. While I wasn't able to fully complete the interactive experience I had planned, it gave me a glimpse of what's possible when design and AI work together.
About HirePilot
HirePilot is an AI career co-pilot that helps candidates prepare for the exact interview they're about to take. By combining a resume, job description, target company, role, and experience level, it creates personalized interview preparation with resume optimization, company-specific mock interviews, actionable feedback, and career insights—all in one place.
This isn't the final version I imagined, but it's a meaningful first step. I'm looking forward to taking HirePilot further, making it fully interactive, and pushing Wonder even more in the next iteration.
#BuildWithWonder #Wonder #AI #DesignChallenge
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?