Skip to content
Site volume
Colourway

3D kit

Baseplate

A slab with four by three sockets, one of them empty and keyed with a dashed line.

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

A page object for an invitation ("your project here"): a primed slab with twelve printed sockets, one of them empty and outlined with a dashed key line.

Example#

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

Usage#

Use a baseplate for building and progress moments: a slab with four by three sockets, one of them empty and keyed with a dashed line. It suits a "what we are building next" section.

Layer and volume#

Art in a section's art slot; the same at every volume.

Anatomy#

The parts of examples/baseplate/basic.tsx, numbered:
  1. SlabPrint-shaded, in the house pose..mk-base
  2. SocketPrinted on the slab's top..mk-base-socket

Volume#

  • Quiet

    Identical; it does not move.

  • Studio

    Identical.

  • Press

    Identical.

  • Rave

    Identical.

Content#

  • The empty socket invites the next thing; say what that is in the section's text.

Do and don't#

Do

An object in an art slot.

Don't

A baseplate stretched as a background behind a paragraph.

A texture behind text.

Page objects are art beside the words. Stretched behind text, the sockets become a pattern under every line.

Fidelities#

CSS 3D in the house pose; the sockets are printed on the slab's top.

Performance#

Zero JavaScript.

Gating#

None: it does not move.

Accessibility#

  • aria-hidden art.

Props#

PropTypeDefaultDescription
emptynumber6The empty socket (0 to 11, row by row from the back left; default 6).
sizenumbernone
classNamestringnone

Generated from BaseplateProps in packages/overprint-three/src/css3d/baseplate.tsx.

Tokens#

System tokens (6)

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