The Programmer's Proposal — turning code into a love story
An interactive storytelling experience that reimagines a marriage proposal through the lens of a software developer — blending code, animation, conversational UI, and playful humor into an emotional digital journey that turns a simple moment into something unforgettable.
The brief, at a glance
- Client
- Personal Concept Project
- Industry
- Interactive Experience · Creative Web
- Timeline
- 6 weeks
- Year
- 2025
Scope of Work
Concept, creative direction, product design, UI/UX, interaction design, motion, and AI-assisted creative workflow for a single interactive storytelling experience — from narrative mapping to production-ready build.
Services Provided
Project Goals
- Design a unique interactive experience that feels unlike a traditional landing page.
- Turn an emotional story into a memorable, share-worthy digital product.
- Create smooth, intentional interactions that reinforce the narrative.
- Use animation as a storytelling device rather than decoration.
- Build an experience that feels playful, emotional, and technically polished.
The problem we set out to solve
Emotion, not just aesthetics
Most web experiences present information. This project had to communicate emotion. The challenge was to balance humor with genuine feeling, keep the user engaged from the first frame to the last, and choreograph smooth transitions between story sections — all while keeping animations lightweight, performant, and intentional. Every interaction had to earn its place in the narrative.
- Balance playful developer humor with sincere emotional storytelling.
- Maintain user engagement and pacing from beginning to end.
- Create smooth, cinematic transitions between story sections.
- Keep animations lightweight and performant across devices.
- Make every interaction feel intentional — never decorative for its own sake.
Design thinking, creative direction, UX
Narrative UX
The experience was designed as a journey, not a page. The complete emotional arc was mapped first — then every section, transition, and interaction was built to serve that arc, never the other way around.
Interaction Design
Micro-interactions and carefully timed animations reinforce the story at every step. Conversational UI, developer references, and cinematic transitions make the user a participant rather than a spectator.
AI-assisted Ideation
AI acted as a creative collaborator during ideation, copy exploration, and concept development. Design direction, UX decisions, and final execution were then refined manually — human creativity led, AI accelerated.
“Strong digital experiences are built around emotion, not only aesthetics. Animation should always reinforce the narrative — never exist for its own sake.”
From research to production
Research
Studied interactive storytelling websites and narrative-driven UX patterns to understand how the best experiences guide emotion, pacing, and attention across a scroll.
Emotional Mapping
Mapped the complete emotional journey — from the opening frame through the proposal moment to the resolution — defining the beat every section had to hit.
Prototyping
Prototyped interactions and transitions early to test whether the motion felt intentional and whether the humor landed without undercutting the emotion.
High-Fidelity Design
Designed the full interface: a minimal dark system with developer-inspired aesthetics, modern typography, soft gradients, and glassmorphism where it earned its place.
Animation & Motion
Refined animations, timing, and pacing — ensuring every transition supported the story and every micro-interaction created a memorable, intentional moment.
Responsive & Polish
Optimised responsive behavior, performance, and user flow so the emotional journey holds up on every device without losing its rhythm.
Tools & Technologies
What we shipped
Main Features
A story-driven UI that turns a scroll into an emotional journey.
Cinematic transitions that connect story sections without breaking immersion.
Interactive moments that make the user a participant in the narrative.
Playful developer references woven into the storytelling fabric.
Modern visual hierarchy with smooth scrolling and carefully timed animations.
A responsive, immersive user flow that holds up across every device.
Design Highlights
Every interaction supports the narrative rather than distracting from it.
Developer culture and emotion coexist without one undermining the other.
Animation is choreographed to the story beat — never decorative for its own sake.
A memorable, share-worthy experience that lingers long after the last scroll.
The work, in frames
The impact
Lighthouse Score
Hero Load
Animation
Story Beats
Achievements
An interactive experience that proves web design can communicate emotion, not just present information.
Storytelling and interaction design combine to create a moment users are likely to remember and share.
Every micro-interaction and transition was choreographed to the narrative beat.
A responsive, performant build keeps the emotional journey smooth on every device.
AI accelerated ideation, but thoughtful human design decisions defined the final experience.
