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
• Kinetic manifesto
• ASCII & retro looks
• Game trailer
• Gameplay highlight & HUD

More filters & grades

• Chromatic Radial Split — npx hyperframes add chromatic-radial-split
• Glitch — npx hyperframes add glitch
• Grade Split Reveal — npx hyperframes add grade-split-reveal
• Hologram — npx hyperframes add hologram
• Motion Blur — npx hyperframes add motion-blur
• Hologram — npx shadcn@latest add @remocn/hologram