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
DUNE Premium Mechanical Keyboard Concept Website
š” Why this project came to my mind
Custom mechanical keyboards are all about premium tactile feel and sound design. However, most keyboard landing pages are generic and fail to capture that sensory experience.
I wanted to build a high-fidelity, interactive prototype that makes usersĀ feelĀ the luxury, weight, and acoustic precision of the keyboard right from their screens.
š Research & Problem Solving
Visual Storytelling & Video Selection: I needed a cinematic video background that immediately set a premium tone. I researched and compared dozens of keyboard films, analyzing pacing, lighting, and sound, until I selected the perfect high-contrast, atmospheric loop of a keyboard in action.
AI-Assisted Design: Instead of using placeholder images, I utilized advanced AI image generation models to design the bespoke product renders (theĀ Dune LightĀ Burnt Orange casing, theĀ Space GreyĀ option, and theĀ Oasis Limited EditionĀ theme). This allowed me to iterate on industrial design concepts rapidly and build a cohesive visual identity.
Asset Optimization: Solved local asset loading and subdirectory pathing bugs for GitHub Pages by implementing dynamic base path prefixing, ensuring 100% asset uptime.
š» Technologies & Languages Used
Next.js (App Router)Ā &Ā React: For building modular, high-performance components.
TypeScript: Enforced type safety and codebase scalability.
Tailwind CSS: Implemented sleek glassmorphism, responsive bento grids, and tailored dark-mode layouts.
GSAPĀ &Ā Framer Motion: Created smooth scroll-triggered parallax backdrops, dynamic image crossfades, custom cursor actions, and cinematic entry animations.
š¼ Open for Work
I specialize in turning creative visual concepts into high-performance, pixel-perfect web experiences. If you have an exciting product, website, or concept you want to bring to life:
DM me here on Contra!
Available for: Freelance, Contract, or Full-Time Frontend Engineering / Web Design roles.
Perfectly engineered design.
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
My full design cycle for an AI startup š»āØ
One of my recent favorite projects was a full design cycle for Telephone AI ā
brand identity, website, industry pages, and the platform itself.
AI integrated into every step of the process.
Case study is still coming š
But working on that project reminded me of what I actually love most
about early-stage startups: being in on it early.
Researching a new market, figuring out who the real user is,
what they need, what they've never had before ā
and laying the right foundation from day one
instead of fixing it later.
Best practices from MVP. Not retrofitted after.
Here's what that process looks like for me now:
ā³ Claude Projects ā all the context in one place:
call transcripts, competitor research, personas,
feature priorities for MVP and what-can-wait
ā³ Claude Code ā structure, interactions,
clickable logic tested before Figma even opens.
Design system with tokens built from the start.
ā³ Figma MCP ā moved there for customization
and a proper clickable prototype the client can actually walk through
From idea to something real to click ā
without weeks of "give us time to think."
#ProductDesign #StartupDesign #AIWorkflow #UXDesign #Figma #ClaudeCode
Goated!
Undertone: an animated background generator that exports to Next.js and drops onto your website in seconds āØ
I built Undertone, a website background generator.
A background is the undertone of a website, the texture and feeling underneath it all.
I got tired of coding them and burning through AI credits without getting the result I wanted. They all end up looking the same, and tiny details like the speed and the pauses are hard to change.
So I built Undertone: pick a feeling, customize everything, draw your own, then export straight to Next.js and drop it into your site in seconds. It's just text, so it stays light and loads fast.
Built in Figma Make for #ConfigMakeathon āØ
Try it: https://undertone.figma.site
Also available on the Figma community: https://www.figma.com/community/file/1649138950603776862
Share on LinkedIn
Exporting as plain text for performance is the right call. Most animated background solutions are either canvas-heavy or webGL and they kill Lighthouse scores. The 'pick a feeling' framing is also a smarter entry point than asking users to pick an effect type.
Hey Contra community! š
Iām Anna, a UX/UI Designer specializing in digital products and E-commerce. My focus is on transforming complex business requirements into seamless, responsive experiences that drive growth, using advanced tools and AI to enhance precision and efficiency.
How I can help your business thrive:
š Web & Mobile Product Design ā Crafting intuitive, high-fidelity responsive interfaces, optimized for seamless cross-device browsing.
š Scalable Design Systems ā Building and maintaining comprehensive design systems from scratch using Figma variables, components, and auto-layout to ensure product consistency and fast MVP implementation.
šØĀ UX Optimization & Visual Storytelling ā Streamlining checkout journeys, improving information architecture, and setting clear CTAs to build user trust and boost conversions.Ā
Hi Anna, welcome aboard! š Love your approach to using AI and advanced tools to speed up the process. Let's keep in touch!š¤
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?