motion
Blur Reveal
A low-blur, low-travel in-view entrance.
- motion
Canonical quiet entrance for readable content.
Live preview
Quick usage
import { BlurReveal } from "@pinky-ui/effects";
<BlurReveal />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.
npm install @pinky-ui/effectspnpm add @pinky-ui/effectsyarn add @pinky-ui/effectsnpx pinky-ui add blur-revealPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- 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
BlurReveal brings content from a small blur, opacity and translate offset into focus. It is a quiet entrance for editorial sections, cards and supporting copy.
Use low blur (about 4–10px), short travel (12–24px) and one in-view trigger. Do not use it on every nested element or for content that must be visible before an observer runs. Pair it with a static layout and let the hierarchy come from timing, not large movement.
The shared observer pool avoids one observer per child. Reduced motion renders sharp content immediately; the final DOM remains readable and semantic. Avoid blur-heavy stacks because they are expensive to paint.