Handbook
Chapter preview content.
Category
Surface primitives from the Spatial hub.
Specs: docs/design/spatial/effects/.
Flip card
Front
Governed intent surface.
Back
Evidence and next action.
Expected behavior
ks-card--flip
Click Flip: inner rotates ~180deg on Y.
CSS-only tilt
Zone tilt
Tab zones or click radios.
Expected behavior
ks-tilt--css
Selecting a zone applies rotateX/Y to inner card.
Holographic card
Premium
Pointer-driven iridescent glare.
Expected behavior
ks-card--holo
Pointer moves update --ks-rx/--ks-ry and glare position.
Zigzag 3D divider
Expected behavior
ks-divider--zigzag-3d
Paper-cut section edge; pure CSS conic-gradient + mask.
Inner-frame parallax
Media
Expected behavior
ks-media--frame-parallax
Inner layer scales and translateZ on hover.
Isometric tile
ISO
Bento lift
Expected behavior
ks-tile--iso
rotateX(60deg) rotateZ(-45deg) elevated tile.
Flip stack
Task A
Done
Task B
Review
Task C
Ship
Expected behavior
ks-card--flip-stack
Staggered flip list (Grow Up pattern).
Holo illumination
Lit
Pseudo-light layers.
Expected behavior
ks-card--holo--illumination
Layered illumination on holo card.
Isometric keypad
Expected behavior
ks-tile--iso-keypad
Elevated keycap grid.
Isometric cube grid
Expected behavior
ks-iso-cube-grid
Compressed Z-axis cube field.
JS pointer tilt
Pointer tilt
ks-pointer-depth.js
Expected behavior
ks-tilt--js
Mouse-driven rotateX/Y via pointer engine.
Book page flip
Expected behavior
ks-book--flip
rotateY page spread on hover.
Fold accordion
Governance
Hash + oracle per primitive.
Motion
Reduced-motion fallbacks required.
Expected behavior
ks-accordion--fold
3D fold panels on expand.
Card fan
Alpha
Beta
Gamma
Delta
Expected behavior
ks-card--fan
Rotated fan of choice cards.
Card deck
Expected behavior
ks-deck--stack
Stacked deck with hover peel.
Vinyl sleeve
Expected behavior
ks-vinyl
Sleeve slide reveals cover.
Fisheye depth nav
Expected behavior
ks-nav--fisheye
Parallax depth nav strip.