Interactive entry
Skew
Skew helps express space, depth, and object state changes.
Active entry
Preview, parameters, and exports
Skew helps express space, depth, and object state changes.
Slant an element along the X or Y axis, shearing it out of its rectangular shape
Browse categories420ms
34px
0ms
soft
.motion-card {
animation-name: motion-skew;
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-skew {
from {
opacity: 0;
transform: translateY(34px) rotate(-4deg) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.motion-card {
animation-name: motion-skew-reduced;
animation-duration: 180ms;
animation-delay: 0ms;
transform: none;
animation-iteration-count: 1;
}
}
@keyframes motion-skew-reduced {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Agent prompt
Use Skew for a UI fragment: Skew helps express space, depth, and object state changes. Animate transform and opacity, keep the duration at 420ms, use 34px 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
- Use it when you need to express space, depth, and object state changes.
- 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.
- Preview Skew on a card, list item, or lightweight panel.
- Tune duration, travel, delay, and curve until Skew matches the surrounding interface.
- 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.
Under reduced motion, Skew removes travel, rotation, or looping and keeps a short fade or state comparison.