Skip to content
Pinky UI

Spring Reveal

`SpringReveal` is the spring-settle preset in the reveal family. Use `BlurReveal` as the quieter canonical entrance when the physical settle is not the point; use `SpringReveal` for content that should arrive with a small physical settle: up, down, left, right or scale.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

A small physical settle

Purpose

SpringReveal is the spring-settle preset in the reveal family. Use BlurReveal as the quieter canonical entrance when the physical settle is not the point; use SpringReveal for content that should arrive with a small physical settle: up, down, left, right or scale.

Use it for a section heading, feature card or compact group. Keep travel around 16–32px and use the shared soft or responsive preset. Do not spring every line of a long article or use it to hide content that has not loaded.

The effect is enhancement only: children remain present and usable with reduced motion, which disables the entrance. Focus order, semantics and reading order are unchanged.

Source: packages/skills/motion/spring-reveal.md