Quick summary
Lost in Space is what a dead link should land on: a toy box instead of an apology. 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, and confetti bursts. Then 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, or 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 in one file: drag constraints, flick detection, and chamfered bodies tuned to settle legibly
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production. You get 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, and 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 flat no-physics layout when the library fails, respect for reduced motion, and phones that 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 and throw | Everything your cursor touches is a toy. |
| The launch home | Throw it hard enough and you ride it out of here. |
Design and branding system
The design brief was a toy box on a drafting table: the studio’s blueprint world, made warm enough to play in.
- One hue family throughout: saffron #EB5E28 stretched into a four-stop sunset gradient, white drafting lines, and paper-white digits. No second color appears until the confetti
- Inter only, from the 900-weight digits to the 500-weight apology line. It’s the same face the rest of ogtraplord.com runs on
- The rocket art is the studio’s own mascot with crash damage (a crumpled nose and a cracked porthole), so the page reads as a story
Mobile and speed optimization
Phones get the same toy box, reseated so the joke never breaks.
- The digits are seated directly on the baseline instead of falling in. Three chunky glyphs can’t 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 OGtraplord homepage runs on the same logic.
- The strongest visual moment loads first, so visitors like what they see before they read a word
- Every section answers one question and hands off to the next, which keeps the scroll moving toward the call to action
- The ask arrives only after the proof: by the time visitors reach 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 itself
- 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. Without it, the ascending rocket would 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 size has changed
How it works
Lost in Space is one PHP file (a static HTML page with a 404 status line) plus Matter.js for the physics. The digits are real text, set in Inter Black at up to 440px and gradient-clipped. They’re 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, exactly as the template renders.
