Quick summary
DJTOKBET — Exploded View takes a single photograph — a collector holding the pair he queued for, shot on a phone in a Bangkok bedroom — and treats it like an engineering drawing. Scroll, and the picture comes apart into eight numbered parts that fan out on their own vectors, each leaving a thin outlined socket where it used to sit, so the assembled body stays visible as a ghost the whole way down. Nothing in the frame is generated or redrawn. Every slice is the original photograph, cut and moved — which is the point: the person and the collection are the same object, and taking one apart itemises the other.
Who this template is for
One photograph treated like an engineering drawing. It is for anything worth taking apart.
- Product and craft brands who want a teardown, materials story or provenance page rather than a spec table
- Archives and lookbooks where an object carries meaning beyond its components
- Studios needing a reference for scroll-scrubbed frame sequences with readable dwell behaviour
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production — interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
You get a single photograph that comes apart into eight numbered parts as you scroll, each leaving a ghost socket behind, then settles back into a body.
- A 150-frame scrubbed sequence that plays the disassembly forward and back under the visitor’s finger
- Eight numbered parts fanning out on their own vectors, each leaving a thin outlined socket where it sat
- Tech-pack style callouts so the diagram reads as an argument about the object rather than an inventory of it
Page sections overview
| Section | Purpose |
|---|---|
| 150-Frame Scroll Scrub | Scrub a frame sequence against scroll so disassembly runs both ways |
| Dwell-Remapped Scroll Curve | Slow the scrub near each chapter so copy stays readable |
| Socket Ghosting | Leave a thin outline where each part used to sit |
| Offline Frame Rendering | Render frames offline rather than filming the disassembly |
| Tech-Pack Callouts | Number and annotate each part like a specification drawing |
Design & branding system
The identity borrows from technical drawing without becoming a blueprint pastiche: warm paper ground, hairline callout rules, and numerals doing the labelling.
- A warm paper ground rather than blueprint blue, so the photograph stays the brightest thing on the page
- Hairline callout rules and outlined sockets at a single consistent stroke weight, quoting drafting conventions precisely
- Numerals and monospaced part labels carrying all annotation, with no decorative type anywhere in the diagram
Mobile & speed optimization
The build is desktop-first where the cinematic moments live, with a deliberate responsive pass so nothing breaks in a pocket.
- Layout reflows to a single column on small screens with type scales tuned by hand rather than left to chance
- Heavy media is deferred or swapped for stills on constrained connections so first paint stays fast
- Hover-dependent interactions carry touch-friendly equivalents, so no content is stranded on mobile
How this template helps you convert
The page earns attention before it asks for anything — the same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches it, the work has already made the argument
Other information about this template
A few notes on this build.
- The subject is a real photograph rather than a generated image, which is what gives the teardown its authority
- Subject, part names, palette and chapter copy are all rebuilt around your object; the scrub engine carries over
- Frames ship as WebP, which keeps a 150-frame sequence within a sensible download budget
- It works hardest on objects that carry meaning beyond their components — a purely functional part list will not sustain it
How it works
A 150-frame WebP sequence is scrubbed against scroll position, so the page plays the disassembly forward and back under your finger. A dwell curve slows the scrub near each chapter so the copy is readable, then releases between them, which is what stops a scroll site feeling mechanical. The frames themselves are rendered offline rather than filmed: the subject is lifted off its background with an on-device segmentation mask, sliced into eight parts, and each part is drawn at an eased offset for every frame with its socket outline left behind and its code set beside it. Desktop and mobile ship separate frame sets — 4.0 MB and 1.7 MB — and the critical frames load first so the canvas never flashes blank.
Where it fits
Anything worth taking apart — a product teardown, a materials story, a craft or provenance page, a spec sheet that deserves better than a table. It works hardest when the object carries meaning beyond its components, because the diagram reads as an argument about the thing rather than an inventory of it. The subject, the part names, the palette and the chapter copy all get rebuilt around your object; the scrub engine and the drawing language are what carry over.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
