Card Expands Into Detail — effect skill for UI walkthroughs

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.

A small card grows into a full detail panel in one continuous shape change.

What it does

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

A list item's corners stretch to fill the frame while its content cross-fades to the detail layout; no cut, no fade to black.

When: Move from overview to detail inside the product without losing the viewer.

Watch out: Do not fade between two unrelated screenshots and call it a morph; the edges must travel.

Timing: 0.5–0.7 s, power3.inOut (or spring damping ~20).

Also called: shared element, modal morph, card resize

In HyperFrames

npx hyperframes add card-resize

Or modal-morph: both layouts are measured once and the timeline interpolates the box.

In Remotion

const p = spring({frame, fps, config:{damping:20}});
const box = {x:interpolate(p,[0,1],[a.x,b.x]), y:interpolate(p,[0,1],[a.y,b.y]), w:interpolate(p,[0,1],[a.w,b.w]), h:interpolate(p,[0,1],[a.h,b.h])};

In CapCut

Keyframe the card overlay's Scale and Position to the full-frame size, then cross-fade to the detail screenshot over the last 4 frames.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/aa1bfe85ce1e/take-card-expands-to-detail.mp4 — The Card Resize component used as its header comment describes, with demo copy (credit: Rendered by varg · HyperFrames Card Resize, https://hyperframes.heygen.com/catalog/components/card-resize)

More UI walkthroughs 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.