Skip to content
Site volume
Colourway

3D kit

Sample case

Four stacked plates in the line inks and an open fifth slot; it fans when its card is hovered or focused.

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

A page object for a body of work: plates 01 to 04 stacked in the four line inks, and a dashed "05 Open" slot on top for the next project. Put it inside a card link with the mk-cube-host class and the plates fan out on hover or keyboard focus.

Example#

Look of this example
Live render of examples/sample-case/basic.tsx

Usage#

Use a sample case inside a card for a set of options or tiers: four stacked plates in the line inks and an open fifth slot. It fans out when its card is hovered or focused.

  • The fan follows keyboard focus as well as the pointer, so keyboard users see it too.
  • The card's own link names it; the case is art.

Layer and volume#

Art inside a card. The fan runs at Studio, Press and Rave (300 ms on the out curve, 40 ms apart, a little longer at Press and Rave); never at Quiet.

Anatomy#

The parts of examples/sample-case/basic.tsx, numbered:
  1. CaseThe stack of plates..mk-case
  2. Open slotThe fifth, empty plate..mk-case-open
  3. LabelLettering on the case..mk-case-label

Volume#

Content#

  • The card around it says what the plates are: tiers, samples, options.

Do and don't#

Do

Our work

Inside its card.

Don't

A sample case outside any card, fanning when nothing in particular is hovered.

A fan with no subject.

The fan answers the card being chosen. Without a card, the motion has nothing to answer.

Fidelities#

CSS 3D in the house pose, print-shaded in the line inks.

Performance#

Zero JavaScript; transform-only motion.

Gating#

Reduced motion and Quiet keep the stack still.

Accessibility#

  • aria-hidden art: the card's own link text names it.
  • The fan follows keyboard focus as well as the pointer.

Props#

PropTypeDefaultDescription
labelsreadonly [string, string, string, string]01The plates' labels, bottom up (art; default 01 to 04).
openstringnoneThe open slot's label (art, default "05 Open").
sizenumbernone
classNamestringnone

Generated from SampleCaseProps in packages/overprint-three/src/css3d/sample-case.tsx.

Tokens#

System tokens (15)

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