Depth

3D space and depth animations for layered interfaces.

Standards Reference

Quick Reference

Load from: tokens/depth.tokens.json

Z-Translation Values

Perspective Values

Layer Depth

Selection Guide

What depth effect?
│
├── Z-AXIS MOVEMENT → translateZ
│   ├── Hover lift → z.near (50px)
│   ├── Card pop → z.medium (100px)
│   └── Full emerge → z.far (200px)
│
├── PERSPECTIVE CONTAINER
│   ├── Subtle 3D → perspective.subtle (1000px)
│   ├── Medium → perspective.medium (600px)
│   └── Dramatic → perspective.dramatic (300px)
│
├── PARALLAX LAYERS
│   ├── Background → layer.background (slowest)
│   ├── Mid → layer.mid (base speed)
│   └── Foreground → layer.foreground (fastest)
│
└── DEPTH OF FIELD
    ├── Focus → blur(0)
    ├── Near blur → blur(2px)
    └── Far blur → blur(5px)

Patterns

Z-Axis Hover

CSS:

.depth-container {
  perspective: 600px; /* {motion.depth.perspective.medium} */
}

.depth-card {
  transition: transform 300ms ease-out;
  transform-style: preserve-3d;
}

.depth-card:hover {
  transform: translateZ(100px); /* {motion.depth.z.medium} */
}

Framer Motion:

<motion.div
  style={{ perspective: 600 }}
>
  <motion.div
    whileHover={{ z: 100 }} // {motion.depth.z.medium}
    transition={{ duration: 0.3 }}
    style={{ transformStyle: 'preserve-3d' }}
  />
</motion.div>

Parallax Layers

CSS + JavaScript:

const layers = document.querySelectorAll('.parallax-layer');

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;

  layers.forEach((layer) => {
    const depth = parseFloat(layer.dataset.depth); // -3 to 3
    const movement = scrollY * (depth * 0.1);
    layer.style.transform = `translateY(${movement}px)`;
  });
});

Framer Motion:

import { useScroll, useTransform, motion } from 'framer-motion';

const ParallaxLayer = ({ depth, children }) => {
  const { scrollYProgress } = useScroll();

  // depth: -3 (background) to 3 (foreground)
  const y = useTransform(
    scrollYProgress,
    [0, 1],
    [0, depth * 100]
  );

  return <motion.div style={{ y }}>{children}</motion.div>;
};

3D Card Flip

CSS:

.flip-container {
  perspective: 600px;
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 600ms ease-out;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
}

Depth of Field

CSS:

.dof-container {
  perspective: 600px;
}

.layer-back {
  transform: translateZ(-100px); /* {motion.depth.z.background} */
  filter: blur(5px); /* Out of focus */
}

.layer-focus {
  transform: translateZ(0);
  filter: blur(0); /* In focus */
}

.layer-front {
  transform: translateZ(50px); /* {motion.depth.z.near} */
  filter: blur(2px); /* Slight blur */
}

Reduced Motion

For prefers-reduced-motion: reduce:

Implementation:

@media (prefers-reduced-motion: reduce) {
  .depth-card:hover {
    transform: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }

  .parallax-layer {
    transform: none !important;
  }
}

Cross-References

• See 3d-transforms/ for full 3D rotations
• See blur/ for depth-of-field effects
• See camera/ for perspective movements
• See parallax/ in scrollytelling skill
• See compositing/ for layer blending

References

• No additional references needed for this skill