⟡ ENTER THE EXHIBITION — LIVE DEMO ⟡
A digital design museum for an original 3D design & manufacturing studio — not a store.
Every object is designed from zero in parametric CAD and grown layer by layer in-studio (Lucknow, IN).
Four collection "rooms" that each transform the entire site — palette, typography, motion language, storytelling voice — plus a product gallery, a parametric configurator, and an instant-quote engine. Walk them live:
| Room | Live page | World |
|---|---|---|
| Entrance | index.html | Dark museum hall — dust motes, spotlights, a vessel on a pedestal |
| 01 · Kanso | collection-minimalist.html | Japanese paper-white silence, two-second fades, vast whitespace |
| 02 · Hearth | collection-cozy.html | Candlelight flicker, floating embers, winter evenings |
| 03 · Volta | collection-cyberpunk.html | Neon glitch typography, scanlines, mouse-reactive particle grid |
| 04 · Terra | collection-organic.html | Morphing growth forms, generative-design story, earth tones |
| Object | product.html | Drag-to-rotate 3D turntable, manufacturing timeline, full specs |
| Atelier | configurator.html | Sliders rewrite live 3D geometry → price, weight & print-time respond |
| Custom | quote.html | Drop an STL → real in-browser mesh analysis → instant quote |
Every page carries a floating MOCKUPS switcher (bottom-right) for jumping between rooms.
- 3D without a 3D library. The product viewer and configurator render a parametric lathe surface — depth-sorted quads, painter's algorithm, fake key light — on a plain 2D canvas in ~80 lines. No three.js, no WebGL, no dependencies.
- Real mesh analysis, client-side. The quote engine parses binary and ASCII STL, integrates signed tetrahedron volumes (validated: a 20 mm cube reads exactly 8.00 cm³), and reports bounding box + triangle count. Your file never leaves the browser at quote time.
- Honest pricing model. Quotes derive from filament mass + machine-hours + handling with a failure buffer and margin — a real manufacturing cost function, not a magic number.
- Atmosphere as architecture. Each room ships its own motion system: slow-fade observers (Kanso), ember particle canvas (Hearth), reactive particle grid + CSS glitch clipping (Volta), morphing border-radius growth forms (Terra).
- Zero build step. Eight self-contained HTML files. Google Fonts is the only external dependency.
git clone git@github.com:TheProtagonist07/forma-studio.git
cd forma-studio
python3 -m http.server 8423 --directory mockups
# → http://localhost:8423These mockups are the design-system spec for the production build:
- Next.js + PostgreSQL + Razorpay storefront with SSR and schema.org product markup
- Parametric order pipeline — customer parameters → scripted CAD model → STL → print queue, automated end-to-end with n8n on self-hosted infrastructure
- Real photography (Sony A5100 studio pipeline) replacing the illustrative vector art
- Per-unit timelapse "birth certificates" shipped with every printed object
Global identity: near-black #0b0907 · warm amber #d9a468 · Fraunces (display serif) · Space Grotesk (UI) · JetBrains Mono (engineering labels). Full notes in mockups/README.md.
© FORMA studio · Designed & built by TheProtagonist07 · All product geometry, designs and content are original work — please don't reuse without permission.