reveal

Reveal

Reveal content with clipping and slight travel for headings, media, and sections.

Preview

A moving clipping boundary or mask exposes content progressively.

Reveal

Implement Reveal: Reveal content with clipping and slight travel for headings, media, and sections. Use Duration 260ms, Distance 20px, Reveal mode clip, Delay 0ms, Easing soft. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--reveal. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.

markup.html

<div class="motion-demo motion-demo--reveal" data-motion="reveal" aria-label="Reveal demo">
  <article class="motion-surface">
    <strong>Reveal</strong>
    <span class="motion-line"></span>
    <span class="motion-line"></span>
  </article>
</div>

motion.css

.motion-demo.motion-demo--reveal {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  isolation: isolate;
}

.motion-demo.motion-demo--reveal *, .motion-demo.motion-demo--reveal *::before, .motion-demo.motion-demo--reveal *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--reveal .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  box-shadow: none;
}

.motion-demo.motion-demo--reveal .motion-surface strong { font-weight: 500; }

.motion-demo.motion-demo--reveal .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--reveal .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--reveal .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.motion-demo.motion-demo--reveal .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--reveal .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--reveal .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--reveal .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--reveal button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--reveal .motion-replay-button,
.motion-demo.motion-demo--reveal .motion-undo-button,
.motion-demo.motion-demo--reveal .motion-dismiss-button,
.motion-demo.motion-demo--reveal .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  cursor: pointer;
}

.motion-demo.motion-demo--reveal .motion-replay-button:focus-visible,
.motion-demo.motion-demo--reveal .motion-undo-button:focus-visible,
.motion-demo.motion-demo--reveal .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--reveal .motion-pause-button:focus-visible,
.motion-demo.motion-demo--reveal [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--reveal [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--reveal .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--reveal .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--reveal .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--reveal .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; }
.motion-demo.motion-demo--reveal .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--reveal .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--reveal .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--reveal .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--reveal svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--reveal .motion-surface { animation: motion-reveal 260ms cubic-bezier(0.23, 1, 0.32, 1) 0ms both; }
@keyframes motion-reveal { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; filter: blur(0); clip-path: inset(0); transform: none; } }

@keyframes motion-reveal-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--reveal {
  animation: motion-reveal-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--reveal *,
.force-reduced-motion .motion-demo.motion-demo--reveal *::before,
.force-reduced-motion .motion-demo.motion-demo--reveal *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--reveal .motion-button,
.force-reduced-motion .motion-demo.motion-demo--reveal [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--reveal [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--reveal [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--reveal .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--reveal .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--reveal .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--reveal {
    animation: motion-reveal-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--reveal *, .motion-demo.motion-demo--reveal *::before, .motion-demo.motion-demo--reveal *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--reveal .motion-button,
  .motion-demo.motion-demo--reveal [data-reorder-item],
  .motion-demo.motion-demo--reveal [data-swipe-target],
  .motion-demo.motion-demo--reveal [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--reveal .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--reveal .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--reveal .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}

Learn more

Before implementation

Purpose: Uncover headings, media, or sections along a clear boundary to support reading order.
Frequency: Reserve for low-frequency emphasis; avoid repeating it across lists or persistent body text.
Trigger: Trigger on initial view, section changes, or media readiness, with direction following content structure.
Enter / exit: Expand the clipped area on enter; reverse it on exit only when information is genuinely removed.
Interruptibility: Preserve the current clipping boundary on interruption and continue toward the new target.
Gesture and keyboard: No drag is required; use Before / after slider for a gesture-controlled reveal boundary.
Reduced-motion strategy: Show the complete content immediately with at most a short fade, avoiding delayed readability.

Accessibility

Reduced motion

Show the complete content immediately with at most a short fade, avoiding delayed readability.

Parameter reference

Parameter	Range / options	Default	Purpose
`duration`	80ms–1200ms	260ms	Controls the time required for one motion cycle.
`distance`	0px–120px	20px	Controls how far the element travels.
`reveal`	Clip / Mask / Blur	Clip	Selects reveal mode.
`delay`	0ms–600ms	0ms	Controls the wait before motion begins.
`ease`	Soft / Snap / Calm / Linear	Soft	Controls how velocity changes over time.