Skip to content
Site volume
Colourway

3D kit

Crate

A wood crate with a stencilled name and a line sticker: sealed with tape, or open with the wood block inside.

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

A page object for things that are not out yet (sealed, with tape over "Not yet available") or just shipped (open, the lid up at 28 degrees and the wood // block inside). The stencil is art, so put the product's name and status in the page's text too.

Example#

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

Usage#

Use a crate for products that are not out yet or just shipped: sealed with tape over "Not yet available", or open with the wood block inside. It is a page object in CSS 3D, beside a card or a section head.

  • Props set the stencilled name, the line sticker and sealed or open.
  • The status lives in text too: the stencil is lettering, never the only place the status appears.

Layer and volume#

Art beside a card or a section head. The wood prints the same at every volume; the line sticker follows the volume like every line ink.

Anatomy#

The parts of examples/crate/basic.tsx, numbered:
  1. CrateWood, print-shaded..mk-block-front
  2. StencilThe name, lettering..mk-obj-stencil
  3. Line stickerFollows the volume like every line ink..mk-obj-sticker
  4. TapeSealed: tape over the lid..mk-tape-strip

Volume#

  • Quiet

    The same crate; the sticker at Quiet.

  • Studio

    The same.

  • Press

    The same.

  • Rave

    The same.

Content#

  • Pair it with a literal status in the card: "In development", "Not yet available".

Do and don't#

Do

With the status in text.

Don't

A sealed crate as the only sign that a product is not available yet.

The stencil as the only status.

Lettering on a 3D object is art and hidden from assistive tech. The status word lives in the reading layer too.

Fidelities#

CSS 3D in the house pose, print-shaded like the blocks: the wood ramp's bands, its grain, the key line and a dotted contact shadow.

Performance#

Zero JavaScript; a handful of planes.

Gating#

None: it does not move.

Accessibility#

  • aria-hidden art. The name and "Not yet available" are lettering, never the only place the status appears.

Props#

PropTypeDefaultDescription
name requiredstringnoneThe stencilled name (art; say it in the page's text too).
state"open" | "sealed"none`open`: the lid up at 28°, the wood `//` block inside.
lineLinenoneThe line sticker on its side.
notestring"Not yet available"; artThe note under the name (default "Not yet available"; art).
sizenumber32Block size, px (default 32: the crate is 4 × 2 × 2.5 blocks).
classNamestringnone

Generated from CrateProps in packages/overprint-three/src/css3d/crate.tsx.

Tokens#

System tokens (7)

Its own properties (1)

  • --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