Interactive entry

Catalog, preview, parameters, and exports in one workspace.

This is the core product surface: locate motion on the left, inspect behavior in the middle, turn parameters into code and prompt on the right.

Entrances & exits Sequencing & timing Movement & transforms State transitions

ready

Active entry

Slide in

Slide in helps users understand how content appears or leaves the interface.

Element enters by sliding in from off-screen (left, right, top, or bottom)

Browse categories

Slide in

Duration420ms

Distance28px

Delay0ms

Curvesoft

.motion-card {
  animation-name: motion-slide-in;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-slide-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-slide-in-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-slide-in-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Slide in for a UI fragment: Slide in helps users understand how content appears or leaves the interface. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 0ms delay, use soft easing (cubic-bezier(0.23, 1, 0.32, 1)), and include a reduced-motion fallback.

intent: entrancefeel: softcontext: card

Usage

Use it when you need to help users understand how content appears or leaves the interface.
Good for low- or medium-frequency UI changes that should stay short, clear, and interruptible.
Copy the prompt or CSS and hand it to an agent for implementation.

Examples

Preview Slide in on a card, list item, or lightweight panel.
Tune duration, travel, delay, and curve until Slide in matches the surrounding interface.

Review notes

Prefer transform and opacity so motion stays off layout and paint work.
Keep UI motion under 300ms; frequent feedback should be shorter.
Avoid scale(0) and UI ease-in; use a physical starting point and a strong ease-out curve.

Reduced motion

Under reduced motion, Slide in removes travel, rotation, or looping and keeps a short fade or state comparison.

Related entries