Blur Through — effect skill for transitions

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 how-to page 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 how-to page.

A blurs out of focus, the shots swap at peak blur, and B pulls back into focus.

What it does

Built on Blur Transitions by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

Soft defocus (or a directional smear) hides the swap; like a lens racking between two scenes.

When: Calm, premium and lifestyle pieces; when two shots have very different colours.

Watch out: Very short blurs read as a focus mistake; give the peak a few frames.

Timing: 0.5–1.0 s (CapCut Blur 0.47 s); calm 20–30 px blur, high energy 3–6 px

Also called: Blur, Horizontal Blur, Vertical Blur, Blurred Highlight, focus pull, defocus transition

In FFmpeg

Crossfade with a symmetrical Gaussian blur peak (A 5 s, T 0.6 s):

ffmpeg -i a.mp4 -i b.mp4 -filter_complex \
"[0:v]fps=30,settb=AVTB,format=yuv420p[a];[1:v]fps=30,settb=AVTB,format=yuv420p[b];\
 [a][b]xfade=transition=fade:duration=0.6:offset=4.4,gblur=sigma=20:enable='between(t,4.5,4.9)'[v]" -map "[v]" out.mp4

xfade=transition=hblur is a built-in horizontal-blur crossfade.

In HyperFrames

CSS blur crossfade:

tl.to("#s1", { filter: "blur(10px)", scale: 1.03, opacity: 0, duration: 0.6, ease: "power2.inOut" }, T);
tl.fromTo("#s2", { filter: "blur(10px)", scale: 0.97, opacity: 0 }, { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.6, ease: "power2.inOut" }, T);

Block: transitions-blur; rack focus: rack-focus.

In Remotion

import {TransitionSeries, linearTiming, springTiming} from '@remotion/transitions';
import {linearBlur} from '@remotion/transitions/linear-blur';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}><ShotA /></TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={linearBlur({intensity: 0.1})} timing={linearTiming({durationInFrames: 20})} />
  <TransitionSeries.Sequence durationInFrames={90}><ShotB /></TransitionSeries.Sequence>
</TransitionSeries>

Total = 90 + 90 - 20 frames: the transition overlaps the two shots. Shader presentations are built on Remotion's HTML-in-canvas: renders work out of the box (--gl=angle, or --gl=swangle without a GPU); the Studio preview needs Chrome with chrome://flags/#canvas-draw-element enabled. CSS-only alternative: custom presentation with filter: blur(${p*20}px); blurSlide({}) adds motion.

In CapCut

Transitions tab → Blur → Blur, Horizontal Blur, Vertical Blur, Vertical Blur II, Blurred Highlight. Desktop: drag the tile onto the cut between two clips and set Duration in the right panel ("Apply to all" reuses it on every cut). Mobile: tap the small white square between clips, pick the transition, drag the duration slider, tap ✓. Tab labels and placement change between versions and regions.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/b83900ef91bc/take-blur-transition.mp4 — hblur between two shots, with the timeline strip of the edit. Footage: Spring (2019), Andy Goralczyk / Blender Foundation (Blender Studio) | studio.blender.org, CC BY 4.0; Big Buck Bunny (2008), (c) copyright 2008, Blender Foundation | www.bigbuckbunny.org, CC BY 3.0. (credit: Rendered by varg · Spring (2019) + Big Buck Bunny (2008))

More transitions 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.