Completed project
Kai AI
Developed the marketing site for KAI, an AI-powered renovation workflow platform.
Project Scope:
Framer Development
Responsive Design
Animation Flow
CMS Integration
Tools:
Framer
Year:
2025
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 7 9" xmlns="http://www.w3.org/2000/svg"><g d="M 7 9 L 0 9 L 0 0 L 7 0 Z M 2.813 3.768 C 2.312 3.169 1.788 2.303 1.242 1.167 L 2.193 1.167 C 3.31 2.487 4.499 3.464 5.757 4.098 L 5.757 4.573 C 4.499 5.207 3.31 6.184 2.193 7.504 L 1.242 7.504 C 1.788 6.369 2.312 5.502 2.813 4.903 Z" fill="transparent" height="9px" id="itWK_lza3" width="7px"><path d="M 7 9 L 0 9 L 0 0 L 7 0 Z" fill="transparent" height="9px" id="BKWQFdJ3U" width="7px"/><path d="M 1.571 2.601 C 1.069 2.002 0.546 1.135 0 0 L 0.95 0 C 2.068 1.32 3.256 2.297 4.515 2.931 L 4.515 3.406 C 3.256 4.04 2.068 5.016 0.95 6.337 L 0 6.337 C 0.546 5.201 1.069 4.334 1.571 3.736 Z" fill="rgb(254, 251, 247)" height="6.33664px" id="jWM_PyynS" transform="translate(1.242 1.167)" width="4.51485px"/></g></svg>)
Project Scope
Scope:
Tools:
Timeline:
Collaboration:
Project Goals
The goal was to bring KAI’s visual identity to life through a clean, intuitive web experience. We focused on making the platform feel modern and intelligent, while keeping the content scalable, maintainable, and visually engaging.
✦ Translate static Figma designs into a live Framer experience
✦ Build an interactive “How KAI Works” section using scroll-based horizontal transitions
✦ Implement modular, responsive layout components across the site
✦ Connect CMS for step-by-step guides and team members
✦ Ensure accessibility, performance, and design consistency
Challenges
One of the key challenges was making a relatively minimal design feel dynamic and full without adding clutter. Animations, structure, and micro-interactions had to add depth and polish without distracting from the core messaging.
Solution
Using Framer’s scroll animation and component system, I developed a smooth horizontal scroll section to explain KAI’s process visually. Each step was built as a reusable card with full-width visuals, CMS-controlled content, and responsive behavior. I also refined layout spacing and mobile breakpoints to ensure a fluid user experience across devices.
Design Strategy
The design direction leaned into soft elegance: light tones, large images, and simple type. To elevate the minimal structure, I used subtle scroll-based transitions, pinned sections, and consistent rhythm throughout the site. The entire build was structured in a way that lets the KAI team reuse and update content with minimal effort.
Live Link / Status
Status:
Live preview:
Let’s Build Something Great
Have a project in mind or just want to chat? Book a call or drop me a message. I’m always open to new ideas, collaborations, or helping you level up your product.
or