Motion Lexicon
Search/
中文
System
Motion component

Reveal

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

Preview

Live preview

Content is uncovered gradually, often by animating a clip-path or mask.

Preview
Reveal
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termreveal

Reveal

揭示
Authoritative definition

Content is uncovered gradually, often by animating a clip-path or mask.

Chinese translation

内容逐步显露，通常通过动画化裁切路径或遮罩实现。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the 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.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--reveal {
  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: 12px;
  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: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.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: 7px;
  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: 7px;
  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: 8px; }
.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; }
}
Review notes

Pre-delivery review

  • Ensure clipping never cuts off focus outlines.
  • Keep text readable throughout every animation frame.
Accessibility

Keep information accessible

Reduced motion

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

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms260msControls the time required for one motion cycle.
distance0px–120px20pxControls how far the element travels.
revealClip / Mask / BlurClipSelects reveal mode.
delay0ms–600ms0msControls the wait before motion begins.
easeSoft / Snap / Calm / LinearSoftControls how velocity changes over time.
Related entries
Fade in / Fade outSlide inScale in