Skip to content
Pinky UI

scroll

Scroll Reveal

A shared-observer viewport entrance.

  • scroll

Quick usage

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

<ScrollReveal />

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

ScrollReveal enters content once it reaches the viewport using a small opacity/translate/scale change. It is the default scroll effect for sections that benefit from a gentle rhythm.

Use it for section-level blocks and small groups, with a shared observer and a once-only trigger. Do not hide the first screen’s essential content, reveal every nested node, or make reading depend on scrolling to an exact threshold.

Reduced motion renders content directly. The observer pool limits overhead and the DOM order stays normal. Check that no focusable item becomes unreachable while it waits for observation.

Open this skill on its own page