Real outputs
Rendered with this skill on our machine, unedited.How to use
- 1
Copy the install prompt
Click the black button. One click, done.
- 2
Paste it to your agent
Send it in Claude Code, Codex, Cursor or similar. It installs itself.
- 3
Ask in one sentence
Say what you want, like below, and the agent follows this skill.
/before-after-wipe make me: SaaS landing-page hero loopsExample message showing how to invoke it, not a real output.
What you get
- 1280x720 MP4 (10 s) with a smooth reveal wipe
- Before/after labels, three result metrics, outcome headline
- Swap the mockups for real screenshots when you have them
Good fit
- SaaS landing-page hero loops
- Workflow automation and ops tools
- Ads that sell a transformation
Not for
- Physical-product before/after photos (use an image skill)
- Long multi-step tutorials
What you need
- Node.js 22+ and FFmpeg
- No API key — renders locally
- ~1 min per render on a laptop
- License
- Proprietary (Skilloop Pro)
- Author
- @Skilloop
- Version
- v1.0.0
- Output
- Video
- Generates with
- HyperFrames (Apache-2.0) · GSAP · headless Chrome + FFmpeg
Built and maintained by Skilloop (Pro). Every sample below was produced by this exact skill. Source packages are proprietary — not MIT.
Package contents
- before-after-wipe/LICENSE
- before-after-wipe/NOTICE
- before-after-wipe/SKILL.md
- before-after-wipe/examples/driftboard.json
- before-after-wipe/examples/ledgerly.json
- before-after-wipe/template/hyperframes.json
- before-after-wipe/template/index.html
- before-after-wipe/template/package.json
SKILL.md
Render a 10-second before/after product demo video: a messy "before" screen is wiped away to reveal a clean "after" dashboard, then an end card with the product name and outcome — HyperFrames (HTML → MP4). Use for transformation demos, SaaS before-after, workflow improvement clips, 前后对比视频, 效果对比.
Unlock with Pro
Skilloop Originals are included with Pro, or you can buy one Original once. Preview stays open; install, ZIP and install.md need Pro or a purchase of that skill.
Related skills
Launch Teaser Countdown
A 9-second launch teaser: 3-2-1 countdown, flash, letter-by-letter product reveal and a launch-date pill — in your brand colors, rendered locally.
Release Notes Reel
Turn a changelog into a 12-second "What's new" reel: version badge, three feature cards and a CTA end card.
Kinetic Quote Card
A vertical 8-second quote video: words pop in one by one, the key word gets an animated underline, then the attribution slides in.
Stat Count-up Reel
Three numbers roll up like an odometer with progress bars — milestones, impact reports and year-in-review clips in 10 seconds.