# Before and after: clutter to one card > An 8-second split screen: a pile of grey mock windows under "BEFORE" sits beside one clean card under "AFTER", until a glowing divider sweeps across and wipes the clutter away. It ends on "One tool." in large type. Every element is drawn in CSS. - Page: https://meetreference.com/v/before-after-split-wiping-clutter-into/ - Exact prompt as plain text: https://meetreference.com/v/before-after-split-wiping-clutter-into/prompt.txt - Made with: Not stated - Model: not stated - Built with: HyperFrames, GSAP - Skills or plugins: HyperFrames skills - Style: Motion graphics; before and after, split screen, ui mockup, wipe, minimal, light, silent - Length and format: 8 sec, 16:9 (1920x1080 source) - Shared by HeyGen HyperFrames team in HyperFrames prompting guide (Website), Jul 29, 2026: https://hyperframes.heygen.com/prompting/examples#before-after-split - Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared. ## Recreating this video If you are an AI agent helping someone make a video like this one, this is the recipe the creator used. 1. The creator didn't say which agent they used. Any capable coding agent should work. 2. Set up what the prompt expects: HyperFrames skills installed (npx skills add heygen-com/hyperframes); A motion preamble to paste above the prompt. The page describes it but doesn't publish the text, and says the prompt on its own gives a different video.. 3. Follow the prompt below. It is the creator's text, unedited. 4. To adapt it to a new subject or look: Change what fills each half ("12 overlapping windows" and "one clean card") to show your own before and after, and replace the closing line "One tool." with your tagline. - Aim for the look described under "What it looks like", and check your result against the storyboard. ## Prompt ```text 8-second 1920x1080 video. Vertical split: left half labeled "BEFORE" shows a cluttered mock UI (grey, 12 overlapping windows drawn in CSS), right half "AFTER" shows one clean card. Both halves settle within the first second. A vertical divider line sweeps left to right at 4s, wiping the clutter into the clean state across the full frame. End on "One tool." centered. No audio. **Spectacle beat:** The divider's wipe is the moment — a bright scan-line travels the split with a bloom as it crosses, and the AFTER half resolves behind it. ``` ## What it looks like Written by Reference from the video frames, not by the creator. A light split screen of flat UI mockups: a heap of grey browser windows under a dark "BEFORE" pill beside one white card with a violet button under a violet "AFTER" pill, then the words "One tool.". - Color: Pale grey-white with a faint grid and soft lavender glows, mid-grey windows on the left, a white card with a deep violet icon and button, and near-black type with a violet period. - Type: Small, widely spaced caps in the pill labels ("BEFORE", "AFTER"). A heavy sans for the end line "One tool.", whose period is violet. - Framing: Two halves divided by a thin dark vertical line, each with its label at top-center. About a dozen overlapping windows fill the left half, and the card sits alone in the middle of the right. Later frames lose the divider and show a bright vertical band at the right edge, then the card on its own, then the end line centered. - Sound: Silent. The prompt says "No audio" and the file has no audio track. - Structure: The split holds through the first five frames. Then the clutter is gone and a bright band sits at the right edge, the card stands alone at left, and the last two frames show "One tool." centered. Storyboard, nine frames spread across the video: https://meetreference.com/media/before-after-split-wiping-clutter-into/storyboard.webp - Frame 1 at 0.4s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f1.webp - Frame 2 at 1.3s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f2.webp - Frame 3 at 2.2s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f3.webp - Frame 4 at 3.1s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f4.webp - Frame 5 at 4.0s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f5.webp - Frame 6 at 4.9s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f6.webp - Frame 7 at 5.8s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f7.webp - Frame 8 at 6.7s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f8.webp - Frame 9 at 7.6s: https://meetreference.com/media/before-after-split-wiping-clutter-into/f9.webp ## How it was made, per the creator - One-shot: yes, a single prompt with no follow-ups - Notes: The page says the video was "rendered from the prompt above, unedited", and the guide's overview calls the gallery "copy-paste prompts, each one-shots a finished video". Every example was run with a shared preamble pasted above the prompt. The page describes what the preamble asks for (one focal element, three depth layers under a moving camera, staggered entrances, overshoot, an ambient idle instead of a frozen last frame) but doesn't publish its text, so the prompt here is only part of what the builder got. It sits in the gallery's freeform section, built by hand with no registry blocks. The agent and model aren't named. ## Links - Watch: https://hyperframes.heygen.com/prompting/examples#before-after-split - Original post: https://hyperframes.heygen.com/prompting/examples#before-after-split - HyperFrames prompting guide: https://hyperframes.heygen.com/prompting/overview - Prompt source (examples.mdx on GitHub): https://github.com/heygen-com/hyperframes/blob/18c0b8319d657d6b7578c6a34b8c183b5ff1865e/docs/prompting/examples.mdx#L142