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
Karyn — Data-Driven Dialog System & Adaptive Music for a Story-Driven Action-Adventure
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
Between Us
Between Us is an emotionally immersive shared digital space designed to help people feel emotionally closer in a world where communication often feels fast, noisy, and emotionally disconnected.
Instead of building another traditional messaging or social platform, this project explores how atmosphere, cinematic storytelling, emotional presence, and immersive interaction design can create deeper and more meaningful digital connection between two people.
The experience introduces emotionally adaptive atmosphere systems:
Memory Mode
Presence Mode
Dream Mode
Healing Mode
Celebration Mode
Each mode transforms the emotional feeling of the experience through cinematic visuals, ambient environments, lighting systems, motion, music-inspired atmosphere, and emotionally driven UI design.
Users can share:
memories
emotional diaries
future letters
voice moments
ambient music
emotional presence
shared atmosphere
The goal was to explore how emotionally intelligent digital experiences could feel calmer, softer, and more human-centered.
Workflow
This project was built using an AI-native workflow across Figma’s ecosystem.
Figma Weave
Used for:
emotional worldbuilding
cinematic atmosphere generation
background image creation
visual storytelling assets
emotional mode exploration
Figma Make
Used for:
rapid mobile app prototyping
interface generation
atmosphere-driven UI systems
interaction exploration
visual iteration
Cursor + Figma MCP
After generating the initial experience in Figma Make, I exported the source code into Cursor and connected Figma MCP to continue refining and completing the product.
This workflow allowed design context, generated UI, and development to remain connected throughout the process.
Inside Cursor, I refined:
layouts
interactions
responsiveness
atmosphere transitions
visual polish
final experience details
Live Experience
Figma Community
Why I Built This
This project explores how AI-native creative tools can be used not only for productivity and speed, but also for emotional storytelling, cinematic UX, atmosphere-driven interaction, and more meaningful human-centered digital experiences.
This is such a creative use of Figma’s AI ecosystem. Really inspiring workflow and presentation 🔥
I explored a new product website concept for the Config Makeathon — AURASONIC X1, a premium wireless headphone experience.
The goal was to move away from a basic ecommerce layout and create something more cinematic, bold, and product-led.
I wanted the website to feel like a campaign, not just a product page.
The direction:
Style meets sound.
A dark red and black visual world with oversized typography, premium headphone imagery, dramatic lighting, wood-inspired structures, floating feature cards, animated sound waves, and section-by-section product storytelling.
The experience includes:
bold hero section with premium product visuals
sound experience section with animated wave graphics
material and design breakdown
76-hour battery performance section
noise control interaction
colorway selector
lifestyle campaign visuals
technical specs
reviews
final animated buy section
I focused on making every section feel visual and useful — not just text and cards.
The idea was to create a product website that feels expensive, immersive, and memorable, with animations that support the product story instead of just decorating the page.
Built in Figma Make as part of the Config Makeathon.
Still more I’d love to improve:
more product rotation states
stronger color switching interactions
deeper scroll animations
better sound-wave motion
more lifestyle visuals
checkout flow
But the core direction is clear:
A premium headphone launch website with bold visuals, cinematic motion, and product storytelling at the center.
link:https://www.figma.com/community/file/1646482011315918788/landing-page-design
#ConfigMakeathon @figma #FigmaMake #ProductDesign #UIDesign #WebDesign #EcommerceDesign #AIDesign
Dark red, black, cinematic motion — this feels like a real product launch, not just a concept. Really bold direction!
🧠 MindLoop
A vocabulary learning app that helps you remember new words through personalized audio loops.
📚 Create word cards
🗂️ Organize them into folders
🎧 Listen while walking, studying, doing chores, or before sleep
🌊 Add rain sounds, ocean waves, or relaxing background music
For this project, I created a short animated commercial to showcase the experience and workflow behind MindLoop.
🎙️ Voice generation: ElevenLabs
🎵 Music generation: Suno
🎬 Animation & workflow: ElevenLabs Flow
🎨 UI/UX Design & Prototype: Figma
🔗 Try MindLoop:
https://plot-stung-03436308.figma.site
🐦 Twitter/X Post:
https://x.com/Naghdaliyevaart/status/2064003914320502936?s=20
The passive listening angle is a genuinely smart UX bet. Did you test whether users preferred scheduled loops or just on-demand playback?
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.
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?