Skip to content
Site volume
Colourway

3D kit

Plan plate

A site plan lying on the floor with one letter block standing on it.

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

A page object for planning and process sections: a printed sheet on the floor with plan lines, crop marks and a sheet number, and one letter block standing on it. Named PlanPlate because the reading kit's layout Plate owns that name.

Example#

Look of this example
Live render of examples/plan-plate/basic.tsx

Usage#

Use a plan plate for planning and strategy moments: a site plan lying on the floor with one letter block standing on it. It suits a services page's "how we plan" section.

  • The block prints its line at every volume: a letter always means its line.

Layer and volume#

Art in a section's art slot. The block prints its line at every volume (a letter always means its line).

Anatomy#

The parts of examples/plan-plate/basic.tsx, numbered:
  1. PlanThe sheet on the floor, with crop marks..mk-plan-sheet
  2. BlockOne letter block, print-shaded..mk-block-letter

Volume#

  • Quiet

    Identical; it does not move.

  • Studio

    Identical.

  • Press

    Identical.

  • Rave

    Identical.

Content#

  • The sheet's number is lettering; say what the plan is in the section's text.

Do and don't#

Do

The block matches the section's line.

Don't

A plan plate with a Growth block on a section about websites.

The wrong line's block.

The block on the plan says which line of work the plan is for (D-C2).

Fidelities#

CSS 3D in the house pose; the sheet is a plane on the floor, the block print-shaded.

Performance#

Zero JavaScript.

Gating#

None: it does not move.

Accessibility#

  • aria-hidden art; the sheet number is lettering.

Props#

PropTypeDefaultDescription
letterGlyphKThe letter block standing on the sheet (default `K`).
sheetstringnoneThe sheet's number label (art, default "Sheet 01").
sizenumbernone
classNamestringnone

Generated from PlanPlateProps in packages/overprint-three/src/css3d/plan-plate.tsx.

Tokens#

System tokens (14)

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