Adaptive glow
Automatic warmth and brightness for focus, reading, and rest.
Smart desk lighting
Lumina Smart Lamp
A premium desk lamp concept built for deep work, quiet evenings, and cinematic product storytelling.
Explore editorial spaces
Gesture control
A low-profile touch surface keeps adjustments fast and subtle.
Calm presence
Minimal geometry, soft diffusion, and a weighted aluminum base.
Scroll Through the Product
Every frame reveals a smarter light.
01
Natural State
Designed as a minimalist structural centerpiece on the desk, even when inactive.
02
Focus Light
On scroll, transitions to a crisp, focused daylight spectrum to maximize concentration.
03
Cozy Warm Ambient
Finally settles into a warm, soft evening glow ideal for reading and quiet relaxation.
Workspace Transformation
A Better Workspace Begins with Better Light
Drag the slider horizontally to compare the workspace with natural room light vs illuminated by the Lumina Smart Lamp.
Lumina Warm Light
Light Inactive
Designed for the desk
Quiet controls, precise light, premium finish.
Color temperature
Warm ambient glow to crisp daylight for task-heavy work.
Peak brightness
Diffused output keeps the workspace bright without harsh glare.
Integrated power
A rear charging port keeps phones and desk tools within reach.
Scene presets
Focus, read, relax, and night scenes mapped to one surface.
What I Delivered
A portfolio-ready interaction study.
- Cinematic product landing page.
- GSAP ScrollTrigger canvas sequence.
- Lenis smooth scroll integration.
- Draggable Before/After comparison slider.
- Fictional sample package structures.
- Responsive mobile layouts.
- HTML for landing page structure.
- CSS for premium visual design.
- JavaScript for UI interactions.
- Cormorant Garamond & Inter font pairings.
- High-end product mockup details.
- Conversion-focused CTA sections.
FAQ
Project details
Is this a real consumer product?
No. This is a fictional product website designed to demonstrate premium visual layout capabilities, advanced GSAP scrolling mechanics, and interaction design workflows.
Does this need React or a backend?
No. The project is completely self-contained, using plain HTML, CSS, JavaScript, GSAP, and Lenis Scroll to achieve a lightweight, fast-loading experience.
How does the scroll animation work?
It uses GSAP ScrollTrigger to track scroll progress inside a pinned viewport, crossfading and zooming through high-resolution mockups on an HTML5 canvas for maximum performance.
Lumina concept