Start a project

Concept project

Louver

A real-time configurator for a premium range of blinds. A living room rendered live in the browser, where every blind, hour, season and view changes the light, with a live price.

Try Louver live (opens in a new tab)

Live in your browser, not a video. Opens in a new tab and sets its quality to your device.

The Louver brand, its collections and its prices are made up; we created them to show the work. Nothing is sold, and “Request a quote” sends nothing.

Product
Window blinds
Live demo
louver.przemyslawrakowski.workers.dev (opens in a new tab)
Louver’s whole screen on a winter afternoon. The Light & room panel on the left holds the light presets and the slat tilt and height. The panel on the right lists the Real wood Venetian’s style, collection, colour, slat width, window size and hardware, with a $946 estimate.
Louver · The configurator, light on the left, blind and price on the right

The challenge

A photo can’t show what a blind does to a room

People buy a blind for the light it lets in. They want to know how a sheer softens the morning, how slats stripe the floor in the afternoon, and whether the room is private at night.

Product photos show one finish, at one hour, in one room. A premium range has hundreds of combinations. Louver answers those questions in the shopper’s browser.

The approach

Light first, then everything else

We started with the light, not the controls. The sun’s path comes from the hour, the season and the way the window faces, and it moves across the floor as the shopper drags the time.

Every blind is built in 3D from catalog data: slats, vanes, pleats and fabric. Each material has its own way with light, so a sheer glows with the sun behind it and a blackout fabric darkens the room.

The catalog is data, kept apart from the scene. A new brand’s products, materials, colours and prices are a data change, which is what makes the configurator white-label.

The controls stay quiet so the room can lead: two panels on a laptop, one sheet on a phone, and four camera views chosen for what they show. The room, the window, the sofa and the floor.

What you can do in it

Five blind types, eleven collections

Venetian in aluminium, real wood and faux wood. Vertical in PVC, fabric and sheer. Roller, pleated and day and night shades. Each one is built from catalog data, not from a fixed model.

Louver · Venetian, sheer vertical, clay roller, pleated, day and night, 1:45 pm, winter
Louver · Real wood Venetian, south window, winter, 10:30 am to 2:36 pm

A sun that keeps time

Drag the time from sunrise to night. Choose the season, the window’s direction and a clear or grey sky. Slats cast sharp stripes near the window and softer ones further into the room.

Louver · Dusk to night, lamps on, blackout roller down, city view, summer

Lamps and privacy at night

Switch on the pendant and the floor lamp. After dark they lead the room, and closing the blind shows how private it becomes.

The guided tour’s card over the floor: “9:15 pm · Summer”, the step title “Dusk falls, the lamps glow”, step 5 of 8 with its progress marks, a back arrow, a Next button and Exit tour.
Louver · Guided tour, step 5 of 8

A guided tour

Eight short chapters tell the story: a winter sun that reaches further, grey days, long summer evenings, privacy after dark. Each chapter sets the camera, the light and the blind. When the tour ends, the room goes back to how you left it.

The price column of Louver’s summary. Window 1, 180 × 160 cm, costs $716 and window 2, 120 × 160 cm, costs $507, for an estimate of $1,223.
Louver · The summary’s price, two windows, each with its own size

A live price for up to three windows

The price moves with every choice: type, material, colour, options and size. Enter each window in centimetres or inches, and the estimate covers up to three. The pricing model is ready for a brand’s own width-by-height price grids.

Three views, each with its own light

A garden, a city across a river or a skyline from the 35th floor, all built in 3D. Each one tints the light that reaches the room, and at dusk the city’s windows light up one by one.

One question at a time

“Start configuring” asks one question at a time, with the camera and the light set to show the answer. The summary groups every choice with its price.

Made for phones too

Louver picks a quality level for each device and steps down if it starts to struggle. On a phone the two panels become one sheet you drag up and down, a tablet gets its own layout, and every control is sized for a finger.

Three moods

  • Louver’s living room on a spring morning. A day and night blind covers the east window, and the low sun comes through its sheer bands as soft, slanting stripes across the sofa, the wall and the rug.
    Louver · Day and night blind, 8 am, east window, spring
  • The living room on a winter afternoon. A white wooden Venetian blind is lowered with its slats open, and the low sun throws sharp stripes across the sofa, the wall above it and the rug.
    Louver · Real wood Venetian, 1:45 pm, south window, winter
  • The living room at night with the pendant and the floor lamp on. A stone blackout roller covers the whole window, so the city outside is hidden and the room is private.
    Louver · Blackout roller, lamps on, 10 pm, city view

How it’s built

React Three Fiber and three.js
The room, the sun and every blind, drawn with WebGL 2.
React and TypeScript
Panels, tour, guided choice and price, typed from end to end.
zustand
Shared state for the blind, the light and the camera. The scene eases towards every change.
Tailwind CSS and shadcn/ui
Controls built on Radix primitives, restyled for the brand and usable by keyboard.
Motion
Spring animation for the panels, the swatches and the price.
Vite
A static build. No server needed.

What this means for your product

Louver is about blinds, but its parts are general: a model of daylight, materials that react to it, a catalog that is data, a live price and a summary built to hand over to a cart.

Swap the blinds for sofas, lamps or kitchen fronts: the daylight, the catalog and the live price carry over, and we model your products to match. Tell us what you make, and we will show you what it would take.

Try Louver live

Live in your browser, not a video. Opens in a new tab and sets its quality to your device.

Try Louver live (opens in a new tab)

Want one for your range?

Tell us what you make and where you sell it. We’ll reply within a few working days.

Tell us about your product