3D Tilted Dashboard Reveal — 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.

The dashboard rises from a steep 3D tilt to flat, like a screen lifting toward the viewer.

What it does

Built on 3D UI Reveal by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

Screenshot on a plane tilted ~25–40° back, with a soft shadow and glow; it rotates to 0° while scaling up and the shadow tightens.

When: The hero reveal of a web app or dashboard, right after the title.

Watch out: Do not tilt past ~45°; the UI text compresses and the shot reads as a gimmick.

Timing: 1.0–1.4 s, expo.out; start rotateX 30°, scale 0.85, y +80 px.

Also called: perspective reveal, UI tilt, dashboard hero

In HyperFrames

npx hyperframes add ui-3d-reveal

tl.from("#ui",{rotationX:32,scale:0.85,y:80,transformPerspective:1600,transformOrigin:"50% 100%",duration:1.2,ease:"expo.out"},0.3);

In Remotion

const p = spring({frame, fps, config:{damping:200}});
<div style={{perspective:1600}}><Img src={ui} style={{transform:`rotateX(${interpolate(p,[0,1],[32,0])}deg) scale(${interpolate(p,[0,1],[0.85,1])})`, transformOrigin:'50% 100%'}}/></div>

In CapCut

Overlay the screenshot; Effects → search "3D"/"perspective" or Animation In "Rotate in 3D"; add a shadow in Basic.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4 — Preview of the 3D UI Reveal component that builds this take (credit: 3D UI Reveal · hyperframes, https://hyperframes.heygen.com/catalog/blocks/ui-3d-reveal)

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.