Skip to content
Site volume
Colourway

3D kit

Block scene

An arrangement as CSS 3D blocks at the house camera, with an optional one-time drop into its pose.

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

A CSS scene of an arrangement, for places where the still should be live markup.

Example#

Look of this example
Live render of examples/block-scene/basic.tsx

Usage#

Use a block scene for an arrangement in CSS 3D at the house camera: a section's art slot, a product moment. It can drop into its pose once as it appears.

  • Arrangements are the model's poses; the scene is CSS, so it needs @maxgrits/overprint-three/css and no JavaScript.
  • The drop plays once from Studio up.
  • For play (grabbing, throwing), use the BlocksStage.

Layer and volume#

Art. The drop plays once from Studio up; none at Quiet or under reduced motion.

Anatomy#

The parts of examples/block-scene/basic.tsx, numbered:
  1. SceneThe house camera..mk-block-scene
  2. BlockOne block in the pose, print-shaded..mk-block-front
  3. ShadowContact shadows on the floor..mk-scene-shadow

Volume#

  • Quiet

    Posed, no drop.

  • Studio

    Drops into its pose once.

  • Press

    The same.

  • Rave

    The same.

Content#

  • The scene is art; describe the arrangement in the section's text if it matters.

Do and don't#

Do

In an art slot.

Don't

A block scene placed behind a section's heading.

Behind the words.

Blocks never land on the headline (D-G4). The scene lives in the section's art slot, beside the plate.

Fidelities#

The CSS 3D fidelity of an arrangement.

Performance#

0 JS; the drop animates translate only.

Gating#

None.

Accessibility#

  • Decorative (aria-hidden).

Props#

PropTypeDefaultDescription
arrangement requiredArrangementNamenone
dropbooleannoneDrop into the pose once (none at Quiet and under reduced motion).
sizestring | numbernoneBlock size (`--mk-s`).
classNamestringnone

Generated from BlockSceneProps in packages/overprint-three/src/css3d/block-scene.tsx.

Tokens#

System tokens (16)

Its own properties (4)

  • --mk-3d-dots
  • --mk-3d-line
  • --mk-3d-print
  • --mk-s

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

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorthreeThe block model, physics and the SVG and CSS fidelities (P1-T9 to P1-T12): the cast, the logo, mark and pile-a arrangements, the rain and tidy kit constants, the cannon-es PhysicsWorld with the hard settle cap and keep-out columns, letters baked from Anybody, BlockCss, BlockScene with its drop, the card hop, BlockSvg, BlockStill, blockSvgString with resolved hex, BlockMark and faviconSvg.