Demo - Interrior lighting design website

StatementStatement

Lumière is a web project built around a single idea: that a website can be an environment, not a document. It is a portfolio of design and development work — a space where light, motion, and code come together to create something closer to an experience than a page.Lumière is a web project built around a single idea: that a website can be an environment, not a document. It is a portfolio of design and development work — a space where light, motion, and code come together to create something closer to an experience than a page.

The site opens in darkness. A photorealistic 3D model of lights hangs suspended in three-dimensional space, rendered in real time using WebGL and React Three Fiber. As you scroll, they ignite — slowly flooding the screen with warm light until the entire background turns white. This is not an effect for the sake of effect. The moment of arrival matters as much as everything that follows.The site opens in darkness. A photorealistic 3D model of lights hangs suspended in three-dimensional space, rendered in real time using WebGL and React Three Fiber. As you scroll, they ignite — slowly flooding the screen with warm light until the entire background turns white. This is not an effect for the sake of effect. The moment of arrival matters as much as everything that follows.

CraftCraft

Every layer of Lumière was designed with deliberate intent. The 3D scene is fully interactive and performance-optimised — running at 60 frames per second without compromising load time, achieved through dynamic imports, lazy loading, and precise asset management. GSAP ScrollTrigger drives the scroll-based choreography, synchronising animations across sections with frame-accurate precision. Text breaks into individual characters and animates in cascading waves. Images emerge from darkness as the cursor moves. A native canvas element traces a luminous path in real time — drawn using Bézier curves and radial gradients — as visitors explore the Works section.Every layer of Lumière was designed with deliberate intent. The 3D scene is fully interactive and performance-optimised — running at 60 frames per second without compromising load time, achieved through dynamic imports, lazy loading, and precise asset management. GSAP ScrollTrigger drives the scroll-based choreography, synchronising animations across sections with frame-accurate precision. Text breaks into individual characters and animates in cascading waves. Images emerge from darkness as the cursor moves. A native canvas element traces a luminous path in real time — drawn using Bézier curves and radial gradients — as visitors explore the Works section.

The LightStudy section creates the illusion of a moving spotlight: a circular mask follows the cursor, revealing a bright version of the interior hidden beneath the dark surface. The navigation reads the background it floats over and adapts its colour accordingly — white on dark, dark on light — a detail most visitors will never consciously notice, but would immediately feel if it were missing.The LightStudy section creates the illusion of a moving spotlight: a circular mask follows the cursor, revealing a bright version of the interior hidden beneath the dark surface. The navigation reads the background it floats over and adapts its colour accordingly — white on dark, dark on light — a detail most visitors will never consciously notice, but would immediately feel if it were missing.

Typography is set in Cormorant Garamond italic. The contrast between its delicate letterforms and the cinematic darkness of the background is not accidental.Typography is set in Cormorant Garamond italic. The contrast between its delicate letterforms and the cinematic darkness of the background is not accidental.

Lumière is a technically advanced, Awwwards-level project. It balances extremely rich visual effects — 3D rendering, Canvas drawing, masking, complex DOM manipulation — with uncompromising optimisation: dynamic imports, listener cleanup, and rAF suspension outside the viewport. The result is an experience that feels fluid, almost cinematic.Lumière is a technically advanced, Awwwards-level project. It balances extremely rich visual effects — 3D rendering, Canvas drawing, masking, complex DOM manipulation — with uncompromising optimisation: dynamic imports, listener cleanup, and rAF suspension outside the viewport. The result is an experience that feels fluid, almost cinematic.

ApproachApproach

This is the standard I apply to every project I take on. Whether the brief is a portfolio, a landing page, or a digital business card — the process is the same: understand the person, define the feeling, build with precision. No templates. No shortcuts. No details left to chance.This is the standard I apply to every project I take on. Whether the brief is a portfolio, a landing page, or a digital business card — the process is the same: understand the person, define the feeling, build with precision. No templates. No shortcuts. No details left to chance.

If you need a website that does more than exist — one that earns attention, communicates character, and leaves an impression — write to me. A rough idea is enough to start.If you need a website that does more than exist — one that earns attention, communicates character, and leaves an impression — write to me. A rough idea is enough to start.