Blurred Product Behind Text — effect skill for backdrops

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

The product UI itself, heavily blurred and dimmed, becomes the backdrop for a title or quote.

What it does

Built on Backdrop by Kapish Dima (remocn), MIT. The write-up and recipes below are varg's.

A screenshot at 20–40 px blur and 50–60% brightness with a vignette; title sharp on top; the UI shape is still recognizable.

When: Transitions between demo and title so the film stays inside the product's colors.

Watch out: Do not blur so little that UI text is half-readable; it distracts more than either sharp or fully soft.

Timing: Blur in 0.4–0.6 s from the sharp shot (rack focus), hold, unblur into the next demo.

Also called: blur of UI, frosted product, UI as backdrop

In FFmpeg

-vf "gblur=sigma=24,eq=brightness=-0.25,vignette=PI/5"

In HyperFrames

npx hyperframes add vignette

tl.to("#ui",{filter:"blur(28px) brightness(0.55)",duration:0.5,ease:"power2.inOut"},t) then fade the title in.

In Remotion

// npx shadcn@latest add @remocn/backdrop
const b = interpolate(frame,[0,15],[0,28],{extrapolateRight:'clamp'});
<Img src={ui} style={{filter:`blur(${b}px) brightness(${1-b/60})`}}/>

In CapCut

Duplicate the UI clip; on the copy apply Effects → "Blur" (strong) + Adjust → Brightness −30; put the title on top.

Ready-made components

Where this comes from

Use when

Not for

Install

More backdrops skills

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.