Skip to content
Site volume
Colourway

3D kit

Block CSS

A CSS 3D block for cards and small places, with a hop on its host's hover or keyboard focus and no JavaScript.

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

Faces lit by the same house light as the GL stage; the letter is the baked glyph path.

Example#

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

The alphabet twins (30 §3.3): every shape glyph pushed into depth.

Look of this example
Live render of examples/block-css/twins.tsx

Usage#

Use a CSS block for a single block that hops when its card is hovered or focused: line cards, product cards, small places. It is CSS 3D with no JavaScript.

  • The hop plays on the host's hover or keyboard focus from Studio up; mark the host with .mk-cube-host.
  • Twins. Every shape glyph has a block twin (30 §3.3), so a card can carry its line's shape in depth.
  • No misregistration on CSS faces: separate borders cannot shift as one plate.

Layer and volume#

Art. The hop plays on the host's hover or focus from Studio up, never under reduced motion.

Anatomy#

The parts of examples/block-css/basic.tsx, numbered:
  1. TopThe lightest band..mk-block-top
  2. FrontWith the letter..mk-block-front
  3. SideThe shade band..mk-block-right

Volume#

Content#

  • The block is art; the card's own text says what it is.

Do and don't#

Do

Websites

Hops when its card is touched.

Don't

A block that hops every two seconds on its own.

Hops for nobody.

Motion should answer the visitor (D-H1). A block that fidgets on its own pulls the eye from the content.

Fidelities#

The CSS 3D fidelity; no misregistration (per-face borders cannot shift as one plate).

Performance#

0 JS; transform-only motion.

Gating#

None.

Accessibility#

  • Decorative (aria-hidden); the host carries the words.

Props#

PropTypeDefaultDescription
blockstring | BlockSpecnoneA block spec or a cast id; or give `kind`, `family` and `glyph` directly.
kindKindnone
familyFamilynone
glyphGlyphnone
sizestring | numbernone24 to 64 px for cards and small places (`--mk-s`).
classNamestringnone
styleCSSPropertiesnone

Generated from BlockCssProps in packages/overprint-three/src/css3d/block-css.tsx.

Tokens#

System tokens (15)

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.