LUMIO

Overview

LUMIO is a concept build for a fictional flagship smartphone, the Lumio Ultra. Phone launch pages tend to be long spec lists with a render on top. This one is built around the way scroll-driven product sites are made now: the product is revealed in stages, with images that expand, zoom and float at different depths as the visitor moves down the page.

Challenge

The effect people associate with premium phone pages — a phone spinning as you scroll — needs filmed or rendered footage of a single device, which wasn't available. The challenge was to get the same sense of staged discovery from real photographs alone: one thing per screen, and a reason to keep scrolling.

Approach

A single pinned timeline in five scenes: a small rounded photo window that grows to full bleed, a circular iris that opens onto the camera array with counters ticking up, a screen scene with detail chips drifting at different speeds, three finishes rising at three different speeds, and an orange power scene with large count-ups. Below the story sit an in-hand gallery, a plain spec list and a shop with storage tiers that change the price.

Design

A warm cream base, near-black ink and one saturated signal-orange accent, with a tall editorial serif for headlines and a clean sans for everything else. Deliberately light and uncluttered — no dark mode with neon, no purple gradients.

Development

Next.js 16, React 19 and TypeScript. GSAP ScrollTrigger scrubs one master timeline (clip-path reveals, scale, parallax and number tweens) with Lenis providing smooth scroll. Counters are tweened inside the timeline so they run backwards cleanly when the visitor scrolls up. The shop prices each finish by storage tier, and the bag persists in localStorage.

Responsive Experience

Counters move to the top of the screen on phones so they never collide with the headline, the finish panels stay three-across, and the progress strip shrinks to fit. Each scene was checked at phone width, and the shop and checkout totals were verified.

Final Result

Live at lumio-inky-tau.vercel.app as a portfolio piece on scroll-driven product storytelling. LUMIO is fictional, the specs and prices are made up, the photographs are real devices from Unsplash contributors, and no orders are taken.

Key Features

• Window-to-full-screen image expansion on scroll
• Iris (circular clip-path) reveal into the camera scene with count-up stats
• Floating detail chips and three finishes rising at different speeds
• Spec list, in-hand gallery and a shop with storage-based pricing
• Working bag and demo checkout