Skip to content
Pinky UI

motion

Spring Reveal

A generic spring entrance preset for Blur Reveal's in-view reading pattern.

  • motion
Variation of

Use when the spring settle is the point; Blur Reveal is the canonical quiet entrance. Open Blur Reveal

Live preview

A small physical settle

Quick usage

usage
import { SpringReveal } from "@pinky-ui/effects";

<SpringReveal />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

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.

Open this skill on its own page