Scroll-scrubbed cinematic hero
Sixty-four WebP frames driven by a hand-built canvas scrubber: the VertiFlex glass rises into the sky as you scroll. Scrub-driven with GSAP, with a mobile variant and a reduced-motion poster.
Case study · Websites · B2B launch site
Lumiere Systems. A premium glazing brand, live in six weeks.
A bilingual launch site for a new distributor of Albert Genau architectural glazing, built to win over a European manufacturer and premium buyers at the same time. With zero fake proof anywhere: the craft is the credibility.
- Role
- Brand site · design → code → ship
- Timeline
- Six weeks, brief to live
Outcomes at a glance
Six weeks
First commit to live, bilingual site
EN + RU
One build, custom i18n, both scripts
64 frames
Scroll-scrubbed cinematic hero, built from scratch
8 systems
The Albert Genau line-up, honestly described
The product
A wall of glass that opens to the sky. A site that had to sell it.
Lumiere Systems measures, engineers and installs Albert Genau glazing (bioclimatic pergolas, glass verandas, the VertiFlex guillotine window) for premium spaces across Russia. The site speaks to two audiences at once: the European manufacturer Lumiere is courting, and the buyers it converts. Warm stone, deep brass, borders over shadows, film grain, a cinematic scroll: quiet luxury, engineered.
Product in action
What it actually looks like. Three moments from the live site.
Screenshots from lumiere-systems.com itself, rendered in the brand's own Ink & Brass system (warm stone, deep brass, cinematic charcoal) and embedded here so this reads as a real case study, not an abstraction.
Moment 1 · Hero
A cinematic wall of glass
Sixty-four scroll-scrubbed frames of the VertiFlex rising into the sky: the signature system, shown instead of described.
Moment 2 · The range
Eight ways, border-led
Brass numerals, hairline rules, one system per editorial row. The Ink & Brass grammar at its clearest: editorial, not catalog.
Moment 3 · The ask
One fixed number
After a site measure, one itemised proposal: the number doesn't move later. A trust promise we recognize; transparent pricing is our wedge too.
The problem
A brand-new company with zero proof assets. And two audiences to convince.
Lumiere launched with no case studies, no testimonials, no team stats: none of the trust signals a normal B2B site leans on. The site had to earn credibility for a company that didn't exist last quarter, in a category where competitor sites still look like 2012 catalogs.
And it had to convince two very different readers with the same pages: Albert Genau, the European manufacturer Lumiere is courting for distributor terms, and the premium homeowners, restaurateurs and developers who buy the glass. So we set a hard rule: no invented numbers, no fake social proof, anywhere. The presentation itself is the credibility.
No projects, no testimonials, no years-in-business: every usual trust signal was off the table.
Two audiences, one site: a manufacturer evaluating a distributor, and buyers evaluating a contractor.
Bilingual from day one: EN for the manufacturer, RU for the market, one design carrying both scripts.
What we shipped
Six capabilities, one cinematic launch site.
Nothing here is a mock: every section below is live on lumiere-systems.com, in two languages.
The Ink & Brass system
Warm stone, deep brass as the single accent, borders over shadows, film grain, letter-spaced eyebrows. A design system built for quiet luxury, documented and enforced at the token level.
Bilingual by architecture
EN and RU as first-class locales: custom i18n with no library, one type system for both scripts, and masked line reveals that survive Cyrillic descenders.
WebGL light shafts
A hand-written GLSL shader draws low sun through glass panes over the closing band. DPR-capped, visibility-gated, with a graceful CSS fallback when WebGL isn't there.
Eight systems, honestly told
Eight Albert Genau product systems, each described strictly for what it does. Only the true winter garden gets called one; the manufacturer's real numbers carry the pedigree.
A lead pipeline, not a mailto
Server-action enquiry form with photo and PDF upload, wired to Resend for lead delivery, with a safe no-key fallback for previews. Every enquiry ends in one fixed, itemised proposal.
How we shipped it
Quiet luxury, AI-native speed.
Lumiere ran on the standard IB Digital delivery model: principal engineer driving, Claude Code translating intent to diffs, every section reviewed against the brand brief. Next.js 16 and React 19 on the latest stable, Tailwind 4 with CSS-first tokens so Ink & Brass lives in one place, GSAP + Lenis for the scroll choreography and Three.js for the light.
Six weeks passed between the first commit and a live, bilingual, motion-heavy site. The polish isn't decoration: for a company with no track record, presentation quality is the sales argument.
01
Pair-programmed with Claude Code
The same AI-native workflow we bring to every engagement: tight loops on copy, layout and motion, humans owning every architectural call.
02
A motion budget with brakes
SplitText reveals, Lenis smooth scroll, a frame-sequence hero and a WebGL band, all gated behind prefers-reduced-motion and performance tiers so the cinematics never cost the visit.
03
Honesty as a design constraint
No invented counts, no stock testimonials, no urgency theater. The manufacturer's facts carry the numbers; the build quality carries the trust.
The outcome
Live in six weeks. Credibility you can scroll.
A company that didn't exist last quarter now presents like the most serious glazing integrator in its market — and not one claim on the page is invented. That was the brief, delivered.
Let’s talk
30 minutes. Bring one problem.
No slide deck, no discovery call fee, no ‘request a quote’ games. We’ll tell you whether it’s a fit in the first call — and point you somewhere useful if it isn’t.