Personal
A cinematic 3D lightsaber configurator that turns every build into a shareable link.
KYBER is a cinematic web experience that lets anyone design their own lightsaber and share it. It opens on a film-style shot of the Death Star seen from an abandoned hangar, then moves into an "atelier" where you choose a hilt, a finish, and a crystal, watch the saber turn in real time, and finally ignite the blade in a full-screen moment with its own sound. I designed and built the whole thing solo, from the 3D work and the visual design to the deployment.
Everything you see is generated in the browser. The saber is not a downloaded 3D model but geometry built in code, lit by a studio environment that ships inside the app, and the ignition sound is synthesized on the fly rather than played from an audio file. There are no accounts and no database anywhere in the product: your entire build is encoded into the web address, so sending someone the link is enough for them to open your exact saber. You can also name a build and download it as a poster-style image card captured from the live 3D view.
The experience is designed to work for everyone. It is fully keyboard-operable, respects the system setting for reduced motion, and reshapes itself on phones with large touch targets and a dedicated mode for spinning the saber with a finger. The site is prerendered to static files and served from a hardened container behind Nginx, which keeps it fast and inexpensive to run. It is an unofficial fan project, not affiliated with Lucasfilm or Disney.
Solo developer and designer
Problem
Making a lightsaber look like a premium physical object in a browser without shipping heavyweight 3D model, texture, or HDRI assets.
Solution
Built the hilt from modular procedural geometry with physically based materials, and generated the studio environment locally from Lightformer area lights plus contact shadows, so the entire look compiles into the bundle.
Problem
Letting users share an exact build without a backend, accounts, or storage.
Solution
Made the URL the single source of truth: configuration is serialized to versioned query parameters and validated on read against option catalogs, with unknown values falling back to defaults and names control-stripped and length-bounded.
Problem
On touch devices, OrbitControls captured every gesture, so users could not scroll past the 3D preview.
Solution
Disabled orbit controls by default on mobile and set the canvas to pan-y so swipes scroll the page, then added an explicit Explore toggle that hands control to the saber and a Done action that returns to normal scrolling.
Problem
Exporting a build card required reading pixels back from a WebGL canvas, which is normally cleared after each frame.
Solution
Enabled preserveDrawingBuffer on the renderer, then scaled the live canvas into a 1080x1350 2D canvas composition with typeset build details and exported it via toBlob and an object URL.
Problem
The mobile save dialog rendered half off the left edge of the screen despite bottom-sheet styles that reset transform.
Solution
Traced it to Tailwind CSS 4 centering the dialog with the CSS translate property rather than transform, so the reset never applied; reset translate as well and anchored the sheet with explicit left and right edges plus safe-area padding.
Problem
Delivering saber audio without shipping sound files or violating browser autoplay policies.
Solution
Synthesized ignition and extinction as filtered oscillator frequency sweeps and the hum as layered detuned oscillators, creating the AudioContext only on explicit user interaction and suspending it on visibility change.
Problem
Keeping a heavy WebGL scene from blocking first paint or breaking on unsupported hardware.
Solution
Prerendered the routes to static HTML, lazy-loaded the 3D module behind Suspense and an error boundary with an explicit WebGL failure message, preloaded it on idle, hover, and focus, and capped the device pixel ratio lower on mobile.
The shipped product contains no runtime AI: there are no model calls, API keys, or inference at request time. AI was used in the build process instead. The cinematic Death Star hangar background was produced with a generative image tool from a detailed art-direction prompt preserved in docs/artwork.md, then converted to WebP for delivery. The application code was also largely AI-assisted, written with an AI coding agent under human direction and review.
Providers
OpenAI
Deployed and publicly available at kyber.montgomerylabs.tech, served as a prerendered static site from a containerized Nginx runtime that requires no database, environment variables, or persistent storage. Automated tests confirm all 1,215 configuration combinations survive a share-link round trip.
Previous project
BeBlended
BeBlended
View case studyNext project
Mirrosa Halo
Silver Mirror
View case studyLet’s talk about what you’re building and how Montgomery Labs can help ship it.
Start a project