# Progressive Blur — primitive for filters & grades (react)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

A strip of content slides sideways and melts into soft stacked blur at both edges

- **Install:** `npx motion-primitives@latest add progressive-blur`
- **Registry:** motion-primitives · **Framework:** react · **License:** MIT
- **Docs and preview:** https://motion-primitives.com/docs/progressive-blur
- **Source:** https://github.com/ibelick/motion-primitives/blob/main/components/core/progressive-blur.tsx
- **Example:** https://skills.varg.ai/previews/lib-motion-primitives-progressive-blur.mp4?v=12711 (Captured from the library’s own demo page (Motion Primitives))
- **Time:** Static. No motion of its own. Animate position, scale or color from the frame if the shot needs movement.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Soften the edges of a marquee, image or caption block with Motion Primitives' Progressive Blur (https://motion-primitives.com/docs/progressive-blur, MIT): place an absolutely positioned ProgressiveBlur over the edge that should fade. Install with `npx motion-primitives@latest add progressive-blur`. It is a stack of backdrop-filter layers with gradient masks and has no clock of its own, so it renders the same on every frame in Remotion or HyperFrames; make sure the renderer supports backdrop-filter (headless Chrome does). Set direction (top, right, bottom, left), blurLayers and blurIntensity.

## Used in

- [Music video](https://skills.varg.ai/video/music-video.md)
- [Kinetic manifesto](https://skills.varg.ai/video/manifesto.md)
- [ASCII & retro looks](https://skills.varg.ai/video/ascii-retro.md)
- [Game trailer](https://skills.varg.ai/video/game-trailer.md)
- [Gameplay highlight & HUD](https://skills.varg.ai/video/game-overlay.md)

## More filters & grades

- [Chromatic Radial Split](https://skills.varg.ai/component/hf.chromatic-radial-split.md) — `npx hyperframes add chromatic-radial-split`
- [Glitch](https://skills.varg.ai/component/hf.glitch.md) — `npx hyperframes add glitch`
- [Grade Split Reveal](https://skills.varg.ai/component/hf.grade-split-reveal.md) — `npx hyperframes add grade-split-reveal`
- [Hologram](https://skills.varg.ai/component/hf.hologram.md) — `npx hyperframes add hologram`
- [Motion Blur](https://skills.varg.ai/component/hf.motion-blur.md) — `npx hyperframes add motion-blur`
- [Hologram](https://skills.varg.ai/component/remocn.hologram.md) — `npx shadcn@latest add @remocn/hologram`