Skip to content
Pinky UI

scroll

Parallax Section

Restrained section-level scroll depth.

  • scroll

Quick usage

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

<ParallaxSection />

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

ParallaxSection gives a background, content plane or foreground a small scroll-linked depth offset. It is useful for a hero or a feature section with clearly separated layers.

Use one or two layers and a distance around 16–40px. Do not parallax dense text, fixed controls or every section on a page. The effect should be felt as depth, not make the reader compensate for a moving target.

Reduced motion leaves all layers static; mobile should use the same reading order without requiring a scroll gesture. Keep the layers compositor-friendly and avoid large blur/filter combinations.

Open this skill on its own page