Skip to content
Pinky UI

loading

Shimmer Surface

A restrained material sheen for an active loading surface, with a static reduced-motion fallback.

  • loading
  • shimmer
  • performance

Live preview

Quick usage

usage
import { ShimmerSurface } from "@pinky-ui/systems";

<ShimmerSurface className="h-20 rounded-2xl" />

Install

Add @pinky-ui/systems 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/systems

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

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use a restrained material sheen to indicate an active wait on a surface that already has a real content boundary.

Use when

A skeleton needs a subtle time cue and the content is above the fold. Pair it with SkeletonMorph rather than presenting the sheen as a finished surface.

Avoid

Permanent GPU-heavy animation, high contrast, or shimmer offscreen.

Accessibility

Mark the sheen decorative and provide a textual busy status elsewhere. The surface edge and content geometry should remain understandable without it.

Keyboard and touch

Shimmer must not affect focus or touch hit testing.

Reduced motion and performance

Use a static fill under reduced motion and pause or omit it for offscreen content.

Composition and anti-patterns

Compose with SkeletonMorph; never use it as decoration after content has loaded.

Open this skill on its own page