What we decided, and why.
Bento grid as editorial hierarchy
Instead of a standard product listing, we used a bento grid where cell size signals importance — the hero product occupies 2 columns while secondary items fit in single cells. Users understand the product hierarchy visually before reading a word. This also made the layout scan-optimised for spec comparison.
Reserve-not-purchase CTA
A 'Reserve' micro-interaction instead of 'Buy Now' reduced purchase anxiety and increased click-through by framing the action as low-commitment. The button state evolves — idle → hover glow → pressed micro-bounce → 'Reserved' confirmation — all timed at 60fps with GSAP.
ScrollTrigger for spec storytelling
Each hardware spec fades in sequentially as the user scrolls through the product section. This turns a spec table into a narrative — you read the story of the machine in the order we intend, rather than pattern-scanning a grid. Implemented with GSAP ScrollTrigger.batch() for precise per-element control.
Core Deliverables
AetherBook Pro (Laptop)
14-core silicon tuned for silent creative work. Features a Nebula graphite finish and 18-hour battery. ($2,499)
Helios Soundstage (Audio)
Spatial drivers with adaptive noise sculpting. Solar matte finish, featuring 40 mm custom drivers. (From $999)
Chroma Horizon 1 (Mobile)
Super-compact flagship mobile device with next-generation optics and advanced hardware. ($1,299)
Measured results.
Visuals
Brand Values & Pillars
Uncompromising Aesthetics
We believe technology should be as beautiful as it is powerful. Every material and finish is meticulously engineered to create a sense of harmony.
Relentless Innovation
Pushing the boundaries of what is possible with silicon and software, we aim to create seamless experiences that feel completely magical.
Sustainable Future
Built to last, designed to be recycled. We take full responsibility for our products from manufacture to renewal.