--- title: "Explainers prompts for AI video, with examples" description: "9 viral prompts with results and 0 prompt skills for explainers: explainer videos, website-to-video, data stories and math animations." url: https://varg.ai/how-to/prompts/explainers updated: 2026-10-30 --- # Explainers prompts for AI video > **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q="` 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. From a terminal: `curl -fsSL https://varg.ai/install | sh` installs the vargai CLI (https://varg.ai/how-to/cli.md): `vargai search` and `vargai install ` with no key, every varg model after `vargai login`. 9 viral prompts with results and 0 prompt skills for explainers: explainer videos, website-to-video, data stories and math animations. ## Viral explainers prompts with results (9) Full prompts, verbatim from their authors, each with the model it ran on and the post's own result, best first (likes plus three times saves). Credit the author when you reuse one. Examples to remake, with varg's remake prompts, are on [Explainers](https://varg.ai/how-to/browse/skills/explainers.md). ### Essay to a 3-minute motion-graphics video essay - **Model:** Opus 5.5 condenses Paul Graham's essay into a scripted motion-graphics video essay of about 195 s, built as code; prompt shared in a reply when followers asked · video · video essay / animated explainer (16:9, about 3 min) - **Run:** Not a video model: a coding agent writes the video in HTML/GSAP with HyperFrames (or Remotion) and renders it locally. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@deedydas, 2026-09-27](https://x.com/deedydas/status/2104151743907160546) — 257,770 views, 4,465 likes, 5,605 bookmarks - **Who:** Deedy Das (@deedydas, ~260k followers): partner at Menlo Ventures (investor in Anthropic, OpenRouter, Modal), previously Glean and Google Search - **Result:** https://video.twimg.com/amplify_video/2104151706158374912/vid/avc1/1920x1080/GJrwHTE-SScZZIFI.mp4 - **Inputs:** the source essay or article, named in the prompt - **Why it spread:** 5,605 bookmarks / 258k views / 4.5k likes: a famous essay compressed into under 200 seconds of motion graphics from one sentence ```text Create a video essay from Paul Graham's essay How to do great work with punchy motion graphics, modern styling and high professionalism ``` ### Kurzgesagt-style 30 s explainer, drawn entirely in code - **Model:** Opus 5.5 in Claude Code draws a 2D canvas plus WebGL planets, voices the script with ElevenLabs eleven_v4 (or local kokoro-onnx), syncs every event to word timestamps, adds downloaded SFX and renders with Playwright · made on Claude Code · video · animated science explainer (Kurzgesagt style, narrated) - **Run:** Not a video model: a coding agent writes the video in HTML/GSAP with HyperFrames (or Remotion) and renders it locally. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@finnardley, 2026-10-25](https://x.com/finnardley/status/2114305886420086817) — 249,535 views, 3,073 likes, 5,219 bookmarks - **Who:** Finn (@finnardley, ~2k followers): builds AI systems that make content - **Result:** https://video.twimg.com/amplify_video/2114305237498388481/vid/avc1/1920x1080/KR_EeHJkJnV5xRwa.mp4 - **Inputs:** a 'what if' topic (default: What if the Sun vanished?), the length (default 30 s), whether you have an ElevenLabs key - **Sections:** · : palette, Sun, Earth shader, mascot, type, finish, banned list · : 30 s beat sheet tied to narration words, plus a story shape for any topic · : render, camera, voice, darkness front, two clocks, sound · · : narration with the beat each word triggers, then build - **Why it spread:** 5,219 bookmarks / 250k views / 3.1k likes: a format that takes a studio 1,200 hours per video, rebuilt as a free paste-in prompt ```text Ask me for: one topic as a "what if" question (default: "What if the Sun vanished?"), the length (default 30 seconds), and whether I have an ElevenLabs key (if not, use a free local voice). A Kurzgesagt-style animated explainer at 1920x1080, 30fps, drawn entirely in code: one 2D canvas plus one WebGL canvas for planets. Space: a vertical gradient #081d2c to #102348, five huge parallax nebula blobs (teal rgb 24,150,160 at 20%, blue 40,95,195 at 16%, coral 220,95,110 at 10%, indigo 60,70,175 at 15%), three star layers at parallax depths .12/.35/.6 that twinkle, 40% of the near stars drawn as 4-point sparkles. The Sun: radius 300px, half off the left edge. A radial gradient #fff7dc to #ffc857 to #ff8f4a with an offset highlight, additive halo rings at 1.23/1.48/1.76/2.1x the radius, 18 faint rotating ray wedges, 28 drifting glowing granules on its surface. Earth: an orthographic sphere in a fragment shader, 4x supersampled, from a 2048x1024 map painted from longitude/latitude polygons: land #5fc47a, forest #48ad6b, desert #f5c75f, rainforest #3a9d62, ice #f1f8ff, ocean gradient #4dc7eb to #1a66b8, white capsule clouds. Tilt .26 rad, spin .55 degrees per second. Day/night uses smoothstep(-.12, .24, N·L) with the light direction recomputed from Sun to Earth every frame. Navy night side with ~380 warm city lights, a coral band on the terminator, a cyan rim, ocean specular, an atmosphere halo that is stronger on the lit side. A small astronaut mascot (~180px) built from rounded rectangles: suit #f3f7fb, orange #ff8f4a boots, a visor gradient #1f5a73 to #0a1c2c with glowing cyan eyes that look at whatever matters, a blinking antenna light, an idle bob, squash and stretch on every pose. Type: Fredoka 600/700 only. Captions in caps with 3-6px letter spacing in teal #8fd8e6, gold #ffd98a or white, sitting in rounded pills of rgb(6,20,40) at 62%. Every line of text rises 1.3x its own height through a clip on an ease-out-quint. Finish: a vignette to rgba(4,4,20,.45) and a 6% film grain re-randomized 24 times per second. Banned: outlines, flares or loops on the Sun's edge, static infographic strips, full stops in on-screen text, text that fades in whole, AI images or AI video, Kurzgesagt's own characters, bird or music. 30 seconds, every line of narration gets a camera move or a transformation, nothing ever holds still. Tight on the Sun at 2.25x (0s) → on the word "vanished" it swells 6% for 0.22s, collapses in 0.33s, then a white flash and a shockwave ring (1s) → pull back to 1x revealing Earth still lit and the astronaut staring at the empty spot (1.6-3s) → on "eight" an 8:20 countdown slams in from 1.7x to 1x and starts ticking, a "LAST LIGHT" label rides the edge of the growing dark disc (3.2s) → dive to 2.3x on Earth with light streaks flowing in (5.6s) → on "you" a YOU pin drops (7s) → on "left" a photon lands on the pin with "THIS LIGHT LEFT THE SUN / 8 MIN 20 SEC AGO" (7.5s) → on "play" the pin morphs into a play button, "YOU PRESSED PLAY / 15 SEC AGO" (8.8s) → one pull-back from 2.4x to a 0.3x orbit view, "LAST LIGHT" and "GRAVITY" riding the ring (9.6-12.5s) → on "nothing" a dotted circle at the empty centre (13.4s) → on "hits" the darkness sweeps Earth in 0.7s, city lights pop on, the countdown turns gold at 0:00 (15.8s) → on "black" the background fades almost to black (17.4s) → Jupiter appears, "STILL SHINING FOR 1 HOUR+" (17.9s) → zoom out, a dashed tangent line, "30 KM/S" as Earth flies straight off (20.8s) → a thermometer counts 15 to -70°C while frost grows from the poles (22.8s) → a 0.8s rewind on a separate story clock (24.3s) → sunglasses drop onto the astronaut (25.2s) → a photon tagged "8:20 OLD", then the title (27.7s). For any other topic, keep the same shape: the event happens on its word, pull back to show scale, dive in to make it personal ("you"), pull back out, the consequence with a live counter, an escalation, a funny beat with the mascot, a callback and the title. 1. One HTML file. Every frame is a pure function of time: window.seek(t) draws frame t. No timers, no CSS animation. 2. Camera moves on easeInOutCubic, zoom is interpolated in log space, every pop is a damped spring (damping .42-.5, frequency 12-16). 3. Voice: ElevenLabs eleven_v4 with a designed voice (calm, warm, curious male, late 30s, crisp, light neutral European English), stability .5, similarity .75, generated with timestamps. Without a key, use kokoro-onnx locally and get word times with faster-whisper. Every animation event fires on its word. About 165 words per minute, 0.24s between sentences, a 0.36s beat before the big reveal. 4. The darkness front: any pixel within the front's radius from the Sun turns to night with a 30px soft edge. The front moves at ~47px/s and ramps to 700px/s near Earth. 5. Keep two clocks: ambient time for twinkle, spin and bob, and a separate story clock for events, so a rewind stays consistent. 6. Render with Playwright in headless Edge with the GPU: seek every frame at 30fps and blend 2 subframes (shutter 0.6) for motion blur, then encode with libx264 at CRF 16 for the master and CRF 20 for delivery. 7. Sound: a calm royalty-free space music bed 7dB under the voice, timed so its natural ending lands on the title, swelling 5dB under the title. One downloaded royalty-free sound effect per event kind (collapse, impact, pull-back whoosh, countdown tick, dive, pin tap, photon land, play click, light hit, reveal, frost, rewind), each peak-aligned to its frame and 4-10dB under the voice. Master with gain plus a limiter to -14 LUFS, -2.2dB true peak. Make the WebGL globe canvas at least 2 x radius x zoom x 1.18 pixels or the sphere clips flat in close-ups. Never draw prominences on the Sun's edge, they read as white hooks. Never pad the voice to fit the visuals, tighten the read instead. Speed the darkness front up near Earth or it takes 13 seconds to cross the planet. Show me a contact sheet of every beat before rendering. Ask me the inputs, write the narration with the beat each word triggers, show it to me, then build and render the video. ``` ### 15 s animation in your pick of 35 art styles, via a skill - **Model:** Opus 5.5 in Claude Code with the huashu-art-motion skill (npx skills add alchaincyf/huashu-art-motion); music synthesized in code; QA script plus an independent reviewer subagent · made on Claude Code · video · art-style animated short / explainer (Claude Code skill) - **Run:** Not a video model: a coding agent writes the video in HTML/GSAP with HyperFrames (or Remotion) and renders it locally. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@Voxyz_ai, 2026-10-12](https://x.com/Voxyz_ai/status/2109690569563746755) — 248,163 views, 2,097 likes, 3,735 bookmarks - **Who:** Vox (@Voxyz_ai, ~27k followers): posts AI builds, model tests and copy-paste prompts - **Result:** https://video.twimg.com/amplify_video/2109078077003456512/vid/avc1/1920x1080/o81_5f4xbdN1uzdv.mp4 - **Inputs:** the huashu-art-motion skill installed; uv, ffmpeg and Playwright Chromium; your subject, audience and orientation; optional character art - **Sections:** setup check · brief questions and 3 style candidates with one still each · scene plan: one main action + two motif loops, on the beat · people policy · QA: script, independent reviewer subagent, delivery script - **Why it spread:** 3,735 bookmarks / 248k views: a 35-style animation kit for Claude Code with a ready English prompt; its 9 explainer styles include a keynote look for product tutorials ```text Use huashu-art-motion to make me a 15-second animation. The skill's docs are in Chinese; read them and talk to me in English. 1. First check for uv, ffmpeg and Playwright Chromium, and tell me how to install anything that's missing. 2. Ask me what it's about, who it's for, and whether it's landscape or portrait. From the material layer in references/风格配方/INDEX.md, pick 3 styles that fit, three-star ones first. Redesign the composition for my subject in all three, each different from the others, and don't copy the room from the samples. Show me one still frame of each to choose from. 3. Once I pick, give each scene one main action plus two motif loops from that style's card. For Van Gogh, that's the starry sky curling into swirls and the lamp's halo spreading outward. If there's music, use the skill's BPM synthesis and put the motion on the beat. 4. If people need to appear, ask me first: my own character art, frames from an image model, or only hands and figures seen from behind. 5. After rendering, follow the skill's own QA steps: run its QA script first, then send a subagent that took no part in making it to watch only the finished film and find problems, have it write its findings into the 审片/ folder, and deliver with its delivery script. If anything comes up red, fix it and re-render before giving it to me. ``` ### One photo to a 30 s step-by-step recipe explainer - **Model:** Opus 5.5 in Claude Code renders the animation in HTML/JS from a single reference image · made on Claude Code · video · recipe / how-to explainer motion graphic (square) - **Run:** Not a video model: a coding agent writes the video in HTML/GSAP with HyperFrames (or Remotion) and renders it locally. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@Ror_Fly, 2026-09-23](https://x.com/Ror_Fly/status/2102853258582880547) — 80,469 views, 1,041 likes, 1,476 bookmarks - **Who:** Rory Flynn (@Ror_Fly, ~29k followers): builds AI workflows with Figma Weave, AI keynote speaker, co-host of the Fast Hours podcast - **Result:** https://video.twimg.com/amplify_video/2102853041246347264/vid/avc1/1080x1080/gHD5YPPHdPJDh8GO.mp4 - **Inputs:** one image of the recipe or product (the author's reply shows his source image) - **Why it spread:** 1,476 bookmarks / 80k views: one image and one paragraph produced a clean step-by-step explainer ```text We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video. ``` ### 9:16 explainer reel with a talking cartoon presenter - **Model:** Claude writes the script, records it with Kokoro, times every word with faster-whisper, rigs an SVG presenter with loudness-driven lip sync and builds HyperFrames + GSAP scenes; free tools only · video · vertical explainer reel (word-timed captions, cards, cartoon presenter) - **Run:** Not a video model: a coding agent writes the video as code (HTML/SVG/GSAP) and renders it. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@finnardley, 2026-10-30](https://x.com/finnardley/status/2116010421740007894) — 29,371 views, 530 likes, 962 bookmarks - **Who:** Finn (@finnardley, ~2k followers): builds AI systems that make content - **Result:** https://video.twimg.com/amplify_video/2116009362552434688/vid/avc1/1080x1920/VjkwhGckyiUxmvjS.mp4 - **Inputs:** a topic and anything it must mention (the agent writes a 30-60 s script for approval first) - **Sections:** · : paper look, palette, type system, presenter, banned list · : hook, points and halftone wipes timed to the voice · : tools, voice, timing, presenter rig, motion presets, layout, sound · · : topic first, then the script - **Why it spread:** 962 bookmarks / 29k views on its first day: an ad-friendly explainer format packaged as a copy-paste HyperFrames build ```text Ask me for the topic and anything it must mention. Then write a 30-60 s script yourself (a 2-line hook, 3-7 points, 1 closing line) and show it to me before you record anything. A 1080x1920 explainer reel on warm cream paper (#EBE7E1 with fine noise grain). Colours: ink #1E1C1A, red #D7372C, grey #8A857E. Cards are #FBFAF8 with a 3px ink border, 20px corners and a halftone shadow (1.7px ink dots on an 8px grid, offset 13px left and 12px down). Captions sit top left (x 120, y 196, 850px wide) in Instrument Sans 500 at 62px. Each word appears on the frame it's spoken, in light grey #B5AFA7, and turns ink in 0.2 s. One key word per line is Instrument Serif italic at 1.16x size, in red. Titles are Anton up to 176px: the first word ink, the second red, with a hand-drawn red swash underline. Small JetBrains Mono labels (25px, grey) sit at y 132: "// 01 · name" on the left, a stat on the right with its number in red bold. Stamps are Anton 52px red text in a 5px red box, tilted -6°. An original cartoon presenter (glasses, hoodie, flat colours, 6px dark brown outlines) stands bottom right, cropped at the chest, about 650x770px from x 430, y 1170. He talks the whole time. Banned: gradients, glow, soft drop shadows, stock photos, emoji, full stops in on-screen text, and any moment where nothing moves for over 1 s. Length: the voice decides, 30-60 s. 0 s line 1 states the problem in under 6 words, a UI card shows it and a red strike-through draws across it → line 2 promises the payoff, small cards pop in 0.16 s apart, a red ring draws around the payoff → halftone dot wipe 0.3 s before point 1 → each point: the header label updates, the title slams in on the spoken word, the underline draws 0.12 s later, the main card rises 0.18 s later with a number counting up over 1.15 s, a red #N badge spins in at 0.6 s, a terminal or search bar types one line in under 0.9 s → 0.3 s before the explanation everything exits upward and a demo animation acts out exactly what the voice says, with one stamp landing on the key word → halftone wipe before the last point → the closing line pays off the hook, and the last frame matches the first so it loops. 1. Tools (all free): Node, FFmpeg, HyperFrames (npx hyperframes init), Kokoro for the voice (pip install kokoro) and faster-whisper for word timings. Install what's missing and tell me what you installed. 2. Voice: read line 1 in 3 Kokoro voices and let me pick one. Then record the whole script at speed 1.1. Cut every pause longer than 0.24 s down to 0.24 s, but only where it's truly silent (check loudness in 0.03 s windows). 3. Timing: run faster-whisper with word timestamps on the final voice file and match it to the script. Every caption word, title, stamp and gesture starts on a real word's start time, never on a guess. 4. Presenter: an SVG rig with separate head, brows, eyelids, glasses, 10 mouth shapes and 2 hands. - Pick the mouth shape every frame from the voice loudness at 30 fps: -42 dB closed, -16 dB wide open, instant attack, 0.55 release per frame. - Blink for 0.14 s every 2.4-4.2 s on a fixed seed. - Sway the head slightly all the time and nod for 0.5 s on each key word. - Raise a pointing hand from below for 1.7 s at every new point, and an open palm on every other explanation. 5. Motion: - pop: scale 0.55 to 1 in 0.34 s, back.out(2.2) - rise: 70px up in 0.4 s, power3.out - exit: 50px up and fade out in 0.22 s - slam: scale 1.22 to 1 in 0.24 s, power4.out - stamp: scale 1.75 to 1 and -18° to -6° in 0.2 s - wipe: 13x23 ink dots grow up to 62px from the centre out, then shrink away, 0.9 s in all 6. Layout: one HyperFrames sub-composition per point, each with its own GSAP timeline. Tracks from bottom to top: paper, scenes, presenter, captions, wipes. Run npx hyperframes check until it shows 0 errors, then look at a snapshot of the first frame of every point before you render. 7. Sound: - one downloaded free SFX per event: pop on cards, whoosh on scene changes, a tick roll under counters, typing under the terminal, a thud on stamps - put the loudest point of each sound on its frame - music at 0.16 volume with a 0.8 s fade out, voice at 1.0, final mix around -15 LUFS Only one .html file can sit in the project root, so keep source files in src/. Every SFX needs its own track and a data-duration. Hide elements with CSS from the start, not with a timeline set at 0, or they flash on frame 1. Inline-block words inside a flex box lose their spaces, so put captions in a normal block. Ask me for the topic first, then show me the script. ``` ### Exercise demo from a motion sheet: 3 yoga poses in 15 s - **Model:** GPT Image 2 draws the motion sheet, Midjourney makes the character (not on varg), Seedance 2.0 animates it · video · fitness / yoga instruction short - **Run:** Not on varg; run it where the author did. - **Post:** [@egeberkina, 2026-04-28](https://x.com/egeberkina/status/2049143762929021290) — 61,754 views, 474 likes, 692 bookmarks - **Who:** Ege (@egeberkina, ~92k followers): art director, creative ambassador for ElevenLabs and Adobe - **Result:** https://video.twimg.com/amplify_video/2049142454717235200/vid/avc1/1080x1214/ilgMybz9_XItpRVU.mp4 - **Inputs:** your character image (the author made one in Midjourney) plus the motion sheet generated by the first prompt - **Sections:** Motion sheet prompt (GPT Image 2) · 1x3 grid layout · Yoga sequence · panel text layout · shading and background rules · Seedance 2.0 prompt · Motion · Important - **Why it spread:** 692 bookmarks / 62k views: any character can demo any routine, a repeatable series for fitness channels ```text Motion sheet prompt: Monochrome grayscale technical illustration, biomechanically accurate yoga instruction sheet, clean 3D anatomical character, scientific diagram aesthetic, minimalistic, no artistic exaggeration 1x3 grid layout (3 panels total), perfectly aligned cells, equal spacing, thin black borders, numbered from 1 to 3 Neutral athletic human body (gender-neutral), proportional anatomy, consistent character across all panels Yoga sequence (key positions only): Forward fold (Uttanasana, hip hinge) Plank pose (full body alignment) Downward facing dog (inverted V, hips lifted) Top-left: bold number + pose name (English) Center: full-body pose (clear joint positions) Bottom-left: short technical explanation (2–3 lines, alignment + breath cues) Overlay: subtle directional arrows showing flow (down → forward → back/up) Correct joint alignment, neutral spine where required, grounded feet, stable shoulders, controlled flexibility, no exaggerated stretching Highly detailed grayscale shading, soft studio lighting, subtle shadows, clean linework, medical / sports science diagram quality Pure white background No colors, no background environment, no extra elements, no stylization, no blur Seedance 2.0 prompt: Use the provided yoga motion sheet as the exact motion blueprint. Use the provided character image as the subject. The character must perform the exact same 3 poses and transitions shown in the sheet, in the same order and timing. Preserve the exact illustration style of the character (linework, face, proportions, clothing, colors). Do NOT convert to 3D or anatomical style. Duration: 15 seconds Camera: full body, centered, static Background: same solid color as character image Motion: Smooth, clean transitions between poses Slightly stylized, natural movement (not robotic) Subtle secondary motion (hair, clothing) Important: Match pose accuracy from the sheet Keep movement readable and simple No extra actions, no added poses ``` ### Fill-in prompt: 30 s animated explainer for any business - **Model:** Opus 5.5 builds the explainer as one HTML page that plays inside the Claude chat; the author screen-records it, then gives notes one at a time · made on Claude (chat) · video · 5-scene business explainer (single HTML page, screen-recorded) - **Run:** Not a video model: a coding agent writes the video in HTML/GSAP with HyperFrames (or Remotion) and renders it locally. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@alex_prompter, 2026-09-25](https://x.com/alex_prompter/status/2103499977632997524) — 42,397 views, 371 likes, 673 bookmarks - **Who:** Alex Prompter (@alex_prompter, ~284k followers): shares AI prompts, systems and tips; says he went to film school - **Result:** https://video.twimg.com/amplify_video/2103499934280585216/vid/avc1/1920x1080/Y09rxWCSpo8R4Xa6.mp4?tag=16 - **Inputs:** what you sell, who it's for and your brand colours (one bracketed placeholder) - **Why it spread:** 673 bookmarks / 42k views: the simplest fill-in-the-blank explainer prompt here, nothing to install ```text Adopt the role of an expert motion designer. Build a 30-second animated explainer for my business as a single HTML page. 5 scenes. The customer's problem, what I do, how it works in 3 steps, one proof point, and my name at the end. Bold text, smooth transitions, my brand colours. My business [DESCRIBE WHAT YOU SELL, WHO IT'S FOR AND YOUR COLOURS] ``` ### Explain your product as one morphing shape in 20 s - **Model:** Opus 5.5 builds one HTML canvas with a single draw(t), closed-form springs and a scripted cursor, renders every frame in headless Chrome at 60 fps with 6-subframe blur and exports each aspect ratio with ffmpeg · video · product explainer loop (one-shape UI morph, square) - **Run:** Not a video model: a coding agent writes the video in HTML/GSAP with HyperFrames (or Remotion) and renders it locally. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@verbove, 2026-09-25](https://x.com/verbove/status/2103483957266268381) — 17,962 views, 242 likes, 377 bookmarks - **Who:** Martijn Verbove (@verbove, ~1.8k followers): builds enterprise AI and a gym app; made this for MakerMap - **Result:** https://video.twimg.com/amplify_video/2103483857836134400/vid/avc1/720x720/IfW_WmhReiEg5OPw.mp4 - **Inputs:** your product + URL, 8-12 UI states that tell its story, the real data for each state, brand colours, fonts and accent, the formats you need (1:1, 16:9, 9:16) - **Sections:** · · : 120 BPM grid and the state sequence · · - **Why it spread:** 377 bookmarks / 18k views: a founder turned the viral one-shape trend into a reusable product-explainer template for his own app ```text Ask me for: • my product + URL • 8–12 UI states that tell its story • the real data shown in each state • brand colors + fonts + accent color • required formats (1:1, 16:9, 9:16) One HTML file. One canvas One draw(t) function No CSS transitions No timers No state carried between frames One shape, never cut Every state is the same element changing size, radius and color while the content swaps A cursor drives the sequence with real clicks, typing and one drag Real UI. Real data. No placeholders. 120 BPM grid Something happens on every bea logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo Closed-form springs everywhere with only a tiny overshoot. If a value changes target multiple times, sum one spring per change Content enters after its container starts morphing and leaves before the next morph so text never overlaps Use a short blur on transitions Never fade black directly into the accent color. Move an accent element between states instead Make tab indicators stretch by putting each edge on a different spring Zoom the camera so every state fills the frame Make the last frame equal the first so the whole thing loops First render one frame per beat as a contact sheet Fix anything cramped or broken Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur Pipe into ffmpeg: H.264 + yuv420p Export all aspect ratios in parallel ``` ### One-line history explainer, Claude Motion vs Motion - **Model:** the same one-line prompt run in Claude Motion (right) and in Motion's video agent (left) · made on Claude Motion and Motion · video · history explainer (side-by-side comparison, about 67 s) - **Run:** Not a video model: a coding agent writes the video as code (HTML/SVG/GSAP) and renders it. Install the HyperFrames skill first. Skill: https://varg.ai/how-to/skills/hyperframes.md - **Post:** [@motion_so, 2026-10-09](https://x.com/motion_so/status/2108614312684380287) — 20,720 views, 236 likes, 213 bookmarks - **Who:** Motion (@motion_so, ~14.5k followers): 'the general video agent', made by Mosaic - **Result:** https://video.twimg.com/amplify_video/2108614203280113664/vid/avc1/1920x1080/6hkJxyQYzrslScgL.mp4 - **Why it spread:** 213 bookmarks / 20.7k views: a one-sentence explainer prompt tested across two code-video agents ```text Make an explainer video about the Second World War ``` ## Prompt skills (0) ## More for explainers ### Effects (1) - [Remotion Maps](https://varg.ai/how-to/skills/remotion-maps.md) — Remotion: Animate maps in Remotion: static maps, Mapbox, MapLibre, MapTiler and CesiumJS 3D flyovers. ### Guides (4) - [HyperFrames](https://varg.ai/how-to/skills/hyperframes.md) — HeyGen: Turn HTML, CSS and seekable animation into deterministic MP4s: launch films, explainers, captions, title cards. - [Remotion Create](https://varg.ai/how-to/skills/remotion-create.md) — Remotion: Scaffold a new Remotion project and lay the video out as clips or scenes before writing any frames. - [Explainer Video Guide](https://varg.ai/how-to/skills/inference-sh-explainer-video-guide.md) — inference.sh: Plan explainer videos end to end: script formulas, pacing, scene planning, voiceover and assembly. - [viscript Scenes](https://varg.ai/how-to/skills/lottiefiles-viscript.md) — LottieFiles, beta: Write animated scenes, diagrams and math shorts in Lua or JS with viscript, then audit and render them. ### Workflows (5) - [HyperFrames Slideshow](https://varg.ai/how-to/skills/hyperframes-slideshow.md) — HeyGen: Build a live, navigable deck with fragment reveals, branching hotspots and presenter notes instead of an MP4. - [Plain-Sight Explainer](https://varg.ai/how-to/skills/hyperframes-vox-explainer.md) — HeyGen: 60–90 s collage explainers about everyday things, or mined from your documents and links, with numeric seam checks. - [Higgsfield Video Explainer](https://varg.ai/how-to/skills/higgsfield-video-explainer.md) — Higgsfield: Turn a topic or document into a narrated, stylized explainer assembled from 10-second voiced blocks. - [Explainroo](https://varg.ai/how-to/skills/explainroo.md) — Vincent Schmalbach: Narrated explainer MP4s with a local voice (Kokoro), word timing (Whisper) and a canvas renderer; no API key needed. - [Manim Skills (3Blue1Brown Style)](https://varg.ai/how-to/skills/manim-skill.md) — Adithya S K: Plan and code 3Blue1Brown-style math animations: a scene composer plus ManimCE and ManimGL best practices. ## Other kinds of skills - [Effects](https://varg.ai/how-to/effects.md): An effect you can see, added to your video: animated titles, captions, transitions, shader backgrounds, logo animations, device mockups and viral camera tricks. Hand your agent the footage or the brief and get the effect. - [Styles](https://varg.ai/how-to/styles.md): The look of the whole video: art styles, film looks, color grades and LUTs, caption fonts and style references. Pick a style and every shot your agent makes follows it. - [Guides](https://varg.ai/how-to/guides.md): Know-how your agent reads before it works: how to write a script, storyboard, edit and caption, and how to use Remotion, HyperFrames, GSAP, Three.js and FFmpeg. - [Workflows](https://varg.ai/how-to/workflows.md): A brief in, a finished video out: UGC ads, product videos, music videos, talking heads, explainers, Shorts and short dramas, step by step, with the models and the edit chosen for you. - [Models & tools](https://varg.ai/how-to/models.md): Run one model or tool from your agent: Seedance, Veo, Kling, FLUX, GPT Image, Nano Banana, ElevenLabs and 1,200+ more, plus scrapers, trend search and video analysis.