SECTION 01
WHAT IT BECOMES
One site, three different jobs. What changes between them is your content and your branding — never the machine underneath.
INCLUDED
- Launch site — an interactive reveal with labelled features
- Portfolio site — a navigable artifact holding your work
- Campaign centrepiece — a branded set piece with staged motion
- Signature page — a brand moment no template can imitate
◆ 3 use cases · 6 annotation slots around the open shell
SECTION 02
HOW IT IS BUILT
A hand-authored Three.js scene: smoked-glass capsule, brass mechanism, ceramic shell, studio lighting, and camera choreography. Not a downloaded model dropped into a viewer.
INCLUDED
- Three.js r185 rendering runtime
- Physically based glass, brass, and ceramic materials
- Deterministic camera fitting and restoration
- Named scene parts instead of one opaque mesh
- Explicit resource cleanup
◆ 40 named scene components · Three.js r185
SECTION 03
HOW IT BEHAVES
It is built to be handled. The shell opens, the object turns under the cursor, the mechanism comes into view — and one gesture puts everything back where it started.
INCLUDED
- Click-to-open shell choreography
- Drag-to-orbit inspection
- Wheel and pinch zoom
- Annotations bound to real parts
- Double-click restores the framing
◆ 7 authored states · 4 direct gestures
SECTION 04
HOW IT DEPLOYS
Copy one file onto any static host. No bundler, no framework, no package to install — and at runtime it fetches nothing from anyone else's server, including ours.
INCLUDED
- Copy the HTML file into your public assets
- Mount it as a standalone route or responsive iframe
- Give the frame an accessible title
- Choose full-bleed or contained presentation
- Test the included WebGL fallback
◆ 182 KB gzipped · 0 runtime network requests
SECTION 05
MAKE IT YOURS
The object stays; the story around it becomes yours. Six annotation slots hang off the six petals of the shell — write them, or strip them out and ship the object bare.
INCLUDED
- Replace the wordmark and headline
- Write the six annotation labels
- Tune the brass, glass, and ceramic palette
- Adjust the camera framing for your container
- Keep the annotations or remove them entirely
◆ 6 annotation slots, each bound to a petal of the shell
SECTION 06
WHAT YOU RECEIVE
Object 01 as one portable HTML file — 688 KB on disk, 182 KB over the wire — carrying its scene, its interaction, its responsive behaviour, and its integration notes together.
INCLUDED
- One self-contained HTML file
- Complete Three.js scene and authored interaction
- Desktop and mobile presentation
- Reduced-motion and no-WebGL handling
- Integration notes for route and iframe use
◆ One-time payment · secure checkout by Stripe