Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In

13-second example rendered by this skill from examples/tallyhouse-overview · 1280×720

Example settingswhat each example above was built from

examples/tallyhouse-overviewbrief.json
Brand
Tallyhouse
Format
wide
Colors
ground #0e0f12 · ink #f2efe8 · accent #5b8cff
examples/northlight-listingbrief.json
Brand
Northlight
Format
square
Colors
ground #efeae2 · ink #1d1b18 · accent #b5532c

What you get

  • An MP4 of 9.4 to 16.9 seconds at 1920×1080 or 1080×1080 with its own beat-synced music
  • An original soundtrack with sound effects on every cut, synthesised on your machine in six styles, with nothing to license
  • A textured blade of light that sweeps each pair from a downbeat and eases back to a split you choose
  • Before and after labels inside the frame, uncovered and covered by the line itself, no fades
  • A brand card laid in by the same wipe, landing on the track's final hit
  • Six placeholder pairs: a room, a house at twilight and a lake as rendered photographs, and a dashboard, a spreadsheet and a chart drawn in code
  • A brief checker and a render script that checks the music's loudness, peaks and timing
  • Open-source licenses for every part it builds on

Good fit

  • You shipped a redesign and want a short clip that shows the old and new screens against each other.
  • You edit photos, stage rooms or clean up data, and want each result shown over the original.
  • You need the same comparison film in 16:9 for your site and square for social feeds.

Not for

  • Video clips or footage as the before or after, since it compares still pictures
  • Vertical 9:16 video
  • More than 4 pairs
  • An interactive slider on a web page
  • Vocals or a licensed song, since the music is synthesised

About this skill

A before and after comparison film with its own original music, for redesigns, photo edits, room makeovers and data cleanups. You give it 2 to 4 pairs of pictures and a one-line caption for each. A soundtrack generated on your machine sets the cut: each pair wipes in on a downbeat, and on the next one a grainy blade of light sweeps across and eases back, so both sides rest in view. Before and After labels ride inside the frame on their own sides, so the line uncovers one and covers the other, and a serif caption names each change. The same line lays a brand card over the end on the track's final hit. It renders 16:9 at 1920×1080 or square at 1080×1080, and has placeholder pairs of its own: rendered photographs of a room, a house and a lake, and three screens drawn in code.

Example request

Make a before and after video of our dashboard redesign and our import cleanup, square for Instagram, ending on our brand card with the URL.

Similar Skills

View all
New
video
Cursor WalkthroughClaude CodeCodexCursor+3 more agents
New
video
Logo StingClaude CodeCodexCursor+3 more agents

Details

Output
MP4 · 9.4–16.9 s · 1080p or 1080×1080
Needs
Node.js 22+, FFmpeg on the PATH, and Chrome (HyperFrames downloads its own headless Chrome on first render). Network access to Google Fonts and jsDelivr.
Series
Product Updates · 4 skills
Updated
Nov 2, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

HyperFramesGSAPFFmpegbeatgen
Good forProduct launchSocial mediaBrand

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Do I need my own pictures?

No. Any pair can be a placeholder: a rendered room, house or lake, or a dashboard, spreadsheet or chart drawn in code. Both sides line up exactly and pick up your accent colour, which suits drafts and pitches. Swap in real pictures before you publish.

How should I export the before and after?

At the same size and from the same view, so the two sides line up under the line. PNG, JPEG, WebP and SVG all work. The checker warns when a pair's shapes differ, or when a picture is smaller than the frame and would look soft.

How long is the video, and can I change the music?

Each pair takes two bars of the music, so with the default tech-minimal preset at 128 bpm 2 pairs run 8.9 seconds, 3 pairs 12.7 and 4 pairs 16.4 (the brand card's final hit rings out for about 1.4 s). Pick another of the six presets, a seed, or turn the music off.

Which agents is Before After Reveal written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesBuilt on heygen-com/hyperframes

What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package, including its music generator; it renders with HyperFrames (Apache-2.0) and animates with GSAP (Standard License), and uses the Instrument Serif, Inter Tight and JetBrains Mono fonts (SIL Open Font License 1.1).

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.