Skip to content
Site volume
Colourway

3D kit

Topple 404

The logo stack a visitor can knock over on the 404 page, and stack up again.

  • Beta
  • Expressive layer
  • Client leaf
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-three/css3d
On this page

The 404 page's toy. The MAKR logo stands as a stack until the visitor presses "Knock them over" (or moves the pointer onto it): the blocks fall into the topple arrangement like dominoes, each 420 ms on the fold curve, 120 ms apart, with a knock per block when sound is on. "Stack them up" builds it again. The page's own words say what went wrong; the toy only softens it.

Example#

Look of this example
Live render of examples/topple404/basic.tsx

Usage#

Use Topple 404 on the 404 page: the logo stack a visitor can knock over with a key, and stack up again. The page's heading still says plainly that the page was not found.

  • The key is a real button whose label changes from "Knock it over" to "Stack them up".
  • The fall is a CSS transition; Rave adds an OOF! burst; sound follows the visitor's toggle.
  • Share card. The topple arrangement has SVG and GPU stills for the 404's card.

Layer and volume#

Art beside the page's message. Studio and Press topple; Rave adds an "OOF!" burst. At Quiet and under reduced motion the blocks jump straight to the fallen pose.

Anatomy#

The parts of examples/topple404/basic.tsx, numbered:
  1. StackThe logo blocks, each printed from its solid..mk-topple-scene
  2. KeyA literal, real button..mk-topple-key

Volume#

  • Quiet

    Jumps straight to the fallen pose.

  • Studio

    Topples.

  • Press

    Topples.

  • Rave

    Topples with an OOF! burst.

Content#

  • The heading is literal: "Page not found". The joke goes beside it.
  • The key's label says what it does.

Do and don't#

Do

A toy beside a clear message.

Don't

A 404 page with only the toppled blocks and the word "OOPS!", and no way home.

A joke instead of the message.

On a 404, people need to know what happened and where to go next. The toy is a bonus, not the answer.

Fidelities#

CSS 3D (each block printed from its solid, so the faces a fall turns toward you print in the right band). The topple arrangement also exists as an SVG still and a GPU still for the 404's share card.

Performance#

One client leaf (the key, a few hundred bytes); the fall is a CSS transition on the blocks' transforms.

Gating#

None beyond reduced motion and Quiet, which skip the fall. Sound follows the visitor's sound toggle (off by default).

Accessibility#

  • The key is a real button with a literal label that changes to "Stack them up" once the blocks are down.
  • The stack is aria-hidden art; say "Page not found" in the page's heading.
KeysWhat happens
EnterorSpaceKnocks the stack over, or stacks it up again

Props#

PropTypeDefaultDescription
labelstring"Knock them over"; literal, D-I2The key's label (default "Knock them over"; literal, D-I2).
resetLabelstring"Stack them up"Once knocked (default "Stack them up").
sizenumber40Block size, px (default 40).
classNamestringnone
styleCSSPropertiesnone

Generated from Topple404Props in packages/overprint-three/src/css3d/topple-404.tsx.

Tokens#

System tokens (17)

Its own properties (2)

  • --mk-3d-print
  • --mk-s

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorgenerators, threeThree: the alphabet twins at every fidelity (model, SVG, CSS 3D, GL geometry, physics shapes; Rave's MORE BLOCKS rains them), the row, topple, twins, stack-1/2/3, line-k/r/a/m and wood arrangements with their text alternatives, the page objects Crate, PlanPlate, Slot, SampleCase and Baseplate, BlockLoader, Topple404, BuildOnScroll, the house camera and an id-colour parity mode in poster frames, the wood grain in GL, specks and Shake, the phone's tap-to-play light rung with "Done", and InkFieldMaterial (the field backdrop in the stage's own canvas). Read the whole entry