Lumen & Ombra is invented. There is no Milanese eyewear house by that name, no workshop, no edition of eighty-eight, no $8,800 frame. It has never sold anything to anyone, because there is nothing to sell and nobody to sell it to. We made the brand up so we would have a hard enough problem to build against — and then we built the site that brand would need. The company is fiction. The website is not. It is deployed, it is the same build described below, and the link at the end of this page opens it. Everything here is a statement about that artifact. There are no results to report, and we will not invent any.
The brief we set ourselves
Write the brief a luxury house would write if it had already accepted the hard part: the customer will never touch the object before deciding.
One page. Six chaptered acts, in sequence, like a film. The product has to be shown from every angle, taken apart, and put back together in front of the visitor — not photographed in a grid and captioned. The price appears once, unhedged, with no "enquire for pricing." And the whole thing has to hold on a phone, because the person who finds an $8,800 frame at 11pm is holding one.
That last constraint is the one that kills most sites like this. Ambition of this kind usually arrives as a page so heavy that nobody on mobile data ever gets to see the ambition.
The problem with selling something expensive online
A cheap purchase is decided in seconds. Nobody researches a phone case. A considered purchase works differently: the buyer circles it. They want to see the hinge. They want to know what it is made of, who made it, how many exist. They are not looking for persuasion — they are looking for evidence that the thing is what it claims to be.
A showroom does that work with proximity. You pick the object up, you turn it over, someone answers your questions in the order you think of them. Online, there is no room and no one in it. The page has to run that entire sequence alone, in the right order, without a single interruption that reads as a sales pitch.
Most sites for expensive things do the opposite. They open with a slideshow, put the specification in a collapsed accordion, hide the price, and ask for an email before showing anything. Every one of those decisions removes evidence from the moment the buyer is looking for it.
So the site is built as one continuous inspection. Scroll, and the frame rotates in the dark. Scroll further, and it moves to macro range — the engraved tips, the seven-barrel hinge, the coating on the lens, each one captioned as it passes. Further, and the object comes apart into its components with the material named beside each one — acetate, grade-5 titanium, twenty-one parts — then reassembles. The edition and the price arrive last, once the object has already argued for itself.
How it's built
The three moving acts are not video. Each is a WebP frame sequence of 145 stills — 435 frames, 11.24 MiB in total — decoded to bitmaps and drawn onto its own canvas element, whose frame index is bound to where you are on the page. Move down and the object turns; move back up and it turns the other way. There is no playhead and no clock — nothing runs on a schedule of its own. The scrollbar is the transport.
Motion is driven by GSAP ScrollTrigger with Lenis handling smooth scroll. The whole page is 520 lines of JavaScript across three modules — main.js at 323 lines, sequence.js at 131, reveal.js at 66 — over a 515-line stylesheet. The sequence renderer is the interesting one. It fetches frames in widening strides, sixteen at a time, then eight, four, two, one, so the act is scrubbable long before it is fully loaded and sharpens as the rest arrives. Ask for a frame that has not landed yet and it draws the nearest one it has instead of a black hole. The preloader gates on the first sequence and the fonts only; the other two stream in behind it.
Around the sequences sits a small typographic system: a per-character reveal that assembles the wordmark letter by letter, a per-line reveal that pushes each line of copy up from behind a mask, a chapter indicator that swaps as you cross into each act, a hairline progress rail down the edge of the viewport, and a pointer built from two parts — a dot that keeps up with the mouse and a ring that arrives a beat late behind it. The single button on the page tilts toward the pointer as it comes near, then springs back when it leaves.
It builds with Vite and ships four runtime dependencies: GSAP, Lenis, and two variable font families that are bundled into the build rather than fetched. Every byte the page requests comes from the brand's own origin. Nobody watching the visitor, nobody counting them.
Weight was the fight, and the fight was won before anything went out. The build output came to 35.74 MiB, and most of what made it heavy had no business travelling. The generation-source mp4s — 20.61 MiB the browser never requests, kept around because they were what the frames were rendered from — were pruned. The 3.50 MiB PNG poster was re-encoded as a JPEG at 1920 wide and came out at 74 KiB. What actually deploys is 11.69 MiB across 451 files, and 11.24 MiB of that is the frame sequences themselves, untouched. Nothing visible was given up to get there. The excess was build residue, and residue is not a design decision.
Three consecutive Lighthouse 13.4.1 runs under mobile emulation, made on 7 August 2026 against lumenombra.metyto.com — the live address, the one linked at the end of this page — put the median at 100 for accessibility, 100 for best practices, 100 for SEO, 48 for performance, First Contentful Paint at 1.6 s, total blocking time at 10 ms, cumulative layout shift at 0.707, and Largest Contentful Paint at 33.6 s. That last figure is the whole of the 48: the preloader holds the reveal until all 145 frames of the first orbit have loaded, which trades a late first paint for an entrance that arrives whole. It is an art-direction choice — not a defect, and not a good score in disguise — and a client who needed the number would get the gate cut back to the first few frames, the orbit sharpening as it streams the way the other two acts already do, with the entrance gone.
Restraint as an engineering decision
The site does less than it could, deliberately.
There is no navigation, because there is nowhere else to go. There is no product grid, because there is one product. The price is a number on a line by itself. The waitlist form validates the address and then does nothing with it — it sends no data anywhere, which is the honest behaviour for a brand that does not exist.
The motion has an off switch that is not a switch. If the browser reports a preference for reduced motion, the scroll-driven timelines never build. Each canvas renders one still frame, every piece of copy is placed visible rather than animated in, and the page becomes a plain vertical document. The argument survives the animation being removed, which is a useful test of whether the argument was ever in the animation.
Restraint here is not minimalism as a look. It is the reason a site with three canvas film sequences fits in 520 lines of JavaScript and four dependencies. Every effect that did not carry evidence about the object was cut.
What this means for your business
Nobody reading this sells $8,800 eyewear. The mechanics still transfer, because they belong to a category of purchase rather than to a product.
Custom cabinetry. Dental implants. Wedding photography. Architectural services. Anything the buyer thinks about for weeks, compares against two or three alternatives, and decides on before they ever call you. In every one of those, the website does the selling first and the human closes second — and the site is usually the weakest part of the process.
Show the work, do not list it. A gallery of finished kitchens is a claim. A sequence that walks through the joinery, the hardware, the drawer runner, and names each one is evidence. The buyer arrives already looking for it.
Put the number on the page. Hiding pricing behind a contact form filters out serious buyers along with the tire-kickers, and it tells the ones who stay that the price is something you would rather discuss than defend.
Ambition and weight are separate problems. The gap between a 35.74 MiB build output and an 11.69 MiB deployment here was not less site — it was declining to ship things the browser never asks for. Whatever you build, someone should be measuring what actually leaves the server, not what the build folder happens to contain.
See it, then talk to us
It is running at lumenombra.metyto.com. Scroll slowly through the third act, then scroll back up and watch the frame come apart in reverse. Open it on a phone. Switch reduced motion on in your system settings and reload, to see what is left when the page is not allowed to animate.
Then come back to your own product. If people take weeks to decide on it, your site is already doing the first half of that job every day, well or badly. Book a free discovery call and describe what a buyer has to be certain of before they will pick up the phone — we will tell you whether your site is proving it today.