Quick summary
Lost in Space is what a dead link should land on: instead of an apology, a toy box. The studio’s chubby mascot rocket has crash-landed onto a saffron drafting sheet and knocked the giant 404 over with it — and all four pieces are live physics bodies. Drag a digit and it swings on the cursor; drop it and it topples and settles on the dashed baseline. Throw the rocket hard enough skyward and its engine lights, it climbs off the top of the sheet, confetti bursts — and the page flies you home to the front page. The joke has a payoff: the crashed rocket finally completes its launch, with you aboard.
Who this template is for
This build is for anyone whose 404 page is currently an apology — a brand with a mascot, a studio that wants its personality to survive even its dead links, a developer who wants a worked example of 2D physics in a real page.
- Brands and studios who treat every surface as brand — the error page is the one place visitors arrive annoyed, and this one sends them away smiling
- Sites with a mascot or a product object: the crash-landed-rocket story adapts to any character that can plausibly knock the digits over
- Developers who want a compact, readable Matter.js reference — drag constraints, flick detection, chamfered bodies tuned to settle legibly, all in one file
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
One PHP file and one mascot image — drop them in and every dead URL becomes the game.
- The full playable wreckage: three giant physics digits, the hero rocket, a dashed drafting baseline, drag-and-throw on mouse and touch, double-tap to re-drop
- The launch payoff — a hard throw lights the engine, the rocket climbs off the sheet, confetti bursts, and a one-shot redirect flies the visitor to the homepage
- Every fallback already handled: a no-physics flat layout when the library fails, reduced-motion respected, and phones seat the digits so the 404 always reads
Page sections overview
| Section | Purpose |
|---|---|
| The Blueprint Sheet | A saffron drafting sheet, not an error screen. |
| The Wreckage | The 404 is real text, and it fell over. |
| The Hero Rocket | The mascot towers over the digits it knocked down. |
| Drag & Throw | Everything your cursor touches is a toy. |
| The Launch Home | Throw it hard enough and you ride it out of here. |
Design & branding system
The design brief was a toy box on a drafting table — the studio’s blueprint world, but warm enough to play in.
- One hue family end to end: saffron #EB5E28 stretched into a four-stop sunset gradient, white drafting lines, and paper-white digits — no second color until the confetti
- Inter only, from the 900-weight digits to the 500-weight apology line — the same face the rest of ogtraplord.com runs on
- The rocket art is the studio’s actual mascot with crash damage — crumpled nose, cracked porthole — so the page reads as story, not decoration
Mobile & speed optimization
Phones get the same toy box, reseated so the joke never breaks.
- Digits seat directly on the baseline instead of falling in — three chunky glyphs cannot drop down a 390px sheet without scrambling, so only the rocket tumbles
- Lanes respace on small screens and the digit floor is 150px, so 4-0-4 stays in order and legible on any phone
- Touch dragging works like the mouse, a double-tap re-drops the scene, and reduced-motion visitors get the settled layout with no tumble
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 before you build on this one.
- This is the real 404 page of ogtraplord.com — the live preview above is the production error page, not a demo copy
- One file plus Matter.js and one mascot image; the PHP is a single 404-status header, so any static host works with a one-line tweak
- The redirect is a one-shot guarded flag — the ascending rocket would otherwise re-trigger ignition every frame and each repeated redirect assignment cancels the navigation on a real network
- The physics never traps a piece: anything flung far off-sheet respawns from above, and a resize rebuilds the scene only when the viewport really changed
How it works
One PHP file (a static HTML page with a 404 status line) plus Matter.js for the physics. The digits are real text — Inter Black at up to 440px, gradient-clipped — measured after fonts load and wrapped in chamfered physics bodies tuned so the settled wreckage always still reads “404”. Throws are judged by the mouse’s own upward velocity rather than the body’s (a drag spring absorbs the flick), the launch is a one-shot redirect guarded against re-triggering, and phones seat the digits in place so a 390px sheet never scrambles the number. Double-tap re-drops everything.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
