Background
AURA is a premium personal care brand that required a digital presence to match their aesthetic. The project involved taking their completed Figma UI and developing it structurally in Webflow. It required a heavy focus on responsive math (using rem units for precise scaling) and architecting scalable, easily manageable backend collections so the client could update their own content without breaking 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
