Background
AURA is a premium personal care brand I designed and built end to end. It's a self-initiated project, created to prove out a build workflow I now use on live sites.
I designed the landing page in Figma, then built it in Webflow using an AI-assisted pipeline that connects the two directly. It takes out the slowest part of the job, the manual rebuild, without giving up control of the result. Every section still gets checked against the original design before it ships.
The result is a page that holds its layout on any screen size, interactions that stay smooth, and a content setup the owner can manage themselves. Text, images, stories, and FAQs are all editable without touching the design.
The challenge
Complex Overlap Interactions:
The "Stories" section featured horizontally stacked, overlapping cards that expanded on hover, which natively causes rapid-fire glitching and Z-index collisions in browser layout engines.
Dynamic Data Integration
Structuring and injecting dynamic CMS data for the 'Aura Stories' and FAQ sections without compromising the precise spacing and layout of the original static design.
Responsive Restructuring
Translating hard-coded desktop heights into fluid, responsive structures that wouldn't collapse or overlap during mobile browser scroll-restoration.
The solution
Invisible Trigger Grids
Engineered an absolute-positioned, invisible grid overlay to handle hover interactions. This separated the moving visual elements from the static mouse triggers, completely eliminating the overlapping hover glitch.
Programmatic CMS Mapping
Built custom CMS schemas for the database, allowing the front-end layout to dynamically pull in blog posts and FAQs seamlessly.
Structural Failsafes
Implemented structural CSS locks (like overflow-anchor: none and strictly calculated min-height values) to ensure the site’s animations and layouts remained bulletproof across all device breakpoints and browser refresh states.
“AURA's digital presence now perfectly reflects the elegance of their brand, with a fluid, responsive Webflow build that strictly honors the original Figma vision.”
— Client,
Key outcomes
Pixel-perfect Site
Delivered a fully responsive, pixel-perfect Webflow site.
Scalable CMS
Integrated scalable CMS collections for effortless content management.
Glitch free interactions
Built robust, glitch-free hover and page-load animations using native IX2 and GSAP.
Technology stack
- Figma
- Webflow
- Webflow CMS
- GSAP
