` and a `gsap.timeline({ paused: true })` line. As the typed line completes, the text's baseline extends and becomes **the wire** — the underline literally grows into the timeline and the camera begins its dolly along it. The typed div folds into a compact clip chip (persistent element 3) that drops onto the wire. Kinetic display type states \"WRITE HTML.\" as the travel begins.\n\n**Mount (7–14s).** Traveling along the wire: it splits into three parallel track lanes; clip chips slide in along the direction of travel and seat onto the lanes on their spoken cues (audio track chip, video track chip, our protagonist chip among them). Small mono labels (`data-start`, `data-track-index`) tag themselves onto chips as the camera passes. The lanes merge back to one wire as the camera accelerates out.\n\n**Measure (14–21s).** The wire becomes a chart baseline (same line, same thickness — no cut): adapt the **`data-chart` registry block** — six labeled bars rise from the wire itself on spoken cues while a hero numeral counts up beside them in huge tabular mono: **50+ CATALOG BLOCKS** (the real registry count; supporting chips: 19 AGENT SKILLS · 7 RUNTIME ADAPTERS — also real). The bars recede by parallax as the camera moves on; the tallest bar's top edge hands off into the next region's horizon.\n\n**Everywhere (21–28s).** The wire arcs and the ground falls away: adapt the **`world-map` registry block** — the dotted world map scrolls beneath while the wire becomes a great-circle route arcing across it. Real render infrastructure, truthfully labeled: pulses light up at AWS and Google Cloud regions (US-EAST-1 · EU-WEST-1 · AP-SOUTH-1) with a \"CLOUD RENDER · LAMBDA + CLOUD RUN\" kicker — HyperFrames' actual deploy targets. The map fades away as the wire descends into the next region — the pulses hold their size until the fade; nothing on the map ever shrinks.\n\n**Material (28–39s).** The wire threads into a working canvas where footage is the material on the timeline: a real talking-head clip (generate a short clip of a person speaking one neutral line via the media pipeline's avatar video generation — it is material being processed, not a testimonial; **transcode it to HEVC `hvc1`** so the automatic proxy subsystem carries preview) sits as a clip on the wire. The order of operations IS the story: as the camera arrives and BEFORE the person speaks, the framework mattes the footage — **the background peels away via background removal**, sliding off along the travel direction and leaving the cutout standing alone on the brand ground. THEN they speak, and the main **keywords of their own line — derived from the clip's transcription — land word-synced as huge display text BEHIND the cutout**, each keyword slamming in on its spoken moment with the subject's silhouette occluding it (the two-layer text-behind-subject plate); style the keyword type by adapting a bold **catalog caption component** (`caption-kinetic-slam` or similar) at display scale. A designed lower-third chip renders behind the subject. The clip's own audio ducks the BGM briefly; the VO resumes as the camera pulls away and the worked footage recedes by parallax.\n\n**Surface (39–45s).** SANCTIONED SEAM #1: the camera pushes through an **`sdf-iris` shader transition** — the iris opens ONTO the continuation of the same wire (the wire is visible through the iris throughout; this is a lens the journey passes through, not a cut). Inside: frosted-glass inspector panels (real translucency — blur over what's behind; the product's Studio design language) hover above the wire carrying live values (`ease: power3.out`, a color token, an fps readout), over a **generated-artwork backdrop** — a flat abstract mural evoking motion trails, generated **palette-neutral (grayscale) and duotoned live by CSS** from the two variables so it re-skins with everything else. **The mural is a full-frame, screen-fixed backdrop: it never moves on screen — the widening iris circle alone reveals it already in place at full frame, it holds dead still while the wire, glass, and chip travel in front of it, and it exits by fading out. It must never slide, and the iris lens itself must render only its glowing ring — fully transparent outside the circle, no visible container.** Drifting `data-*` tags ride between mural and glass, clear of all text.\n\n**Rhythm (45–52s).** The wire becomes a waveform: **resolve the BGM first, run `hyperframes beats` on it, and drive this region on the detected grid** — the waveform pulses and compact media cards (a lyric line, a photo card, a chart flash) snap onto the wire on real analyzed beats while the camera keeps traveling; each snap gets a tick SFX. At least six beat-hits. SANCTIONED SEAM #2: the beat-hits may hard-cut card content ON the beat — the sanctioned exception, because the camera itself never stops moving through them.\n\n**Depth (52–56s).** The wire spirals off the flat plane into real 3D — a **Three.js scene via the frame adapter** (never CSS fake-3D): the camera descends following the wire as it coils around a rim-lit faceted form (ink material on charcoal), mono axis readouts landing on cue, then rises back to the plane with the wire leading the way out. The coil winds up out of the wire and collapses back onto it — its ends never float cut off in mid-air — and the protagonist chip joins the 3D scene for the crossing: it rides the wire straight through the coil's loops and passes behind the form with true depth occlusion, never floating over the geometry as a flat overlay.\n\n**Render (56–60s).** The wire's end plugs into a render chip; the protagonist clip card from the opening arrives (callback — same chip, having traveled the whole film) and snaps into it. A **seeded confetti burst** fires — mulberry32, **seed 42, each piece holding position for exactly two frames before stepping** (stop-motion feel) — and the VO lands the honest punchline: identical on every render, because determinism is the whole point. \"WRITE HTML. RENDER VIDEO.\" locks up with the install line `npx skills add heygen-com/hyperframes`. The camera finally eases to rest — the film's only true stillness, one breath before the end.\n\n**Copy, quoted exactly:** opening \"WRITE HTML.\" · stats \"50+ CATALOG BLOCKS\", \"19 AGENT SKILLS\", \"7 RUNTIME ADAPTERS\" · map kicker \"CLOUD RENDER · LAMBDA + CLOUD RUN\" · closing \"WRITE HTML. RENDER VIDEO.\" + `npx skills add heygen-com/hyperframes`. The Material region's spoken line and typed code are yours to make real and legible — no lorem ipsum, no invented product claims anywhere.\n\n**Technique, pinned:** continuous world-camera via GSAP transforms (the dolly is the film); parallax layers in every region; `data-chart`, `world-map`, `sdf-iris`, and a caption component adapted from the registry; per-character typing at the open; matched-motion handoffs at every region boundary (the wire IS the match); full footage pipeline (generated clip → HEVC → auto-proxy → background removal → lower-third → word-synced captions); real beat grid from `hyperframes beats`; real Three.js via the frame adapter; seeded two-frame-hold confetti; SFX on hits; VO-paced reveals throughout.\n\n**Variables:** expose `ground` (default `#0a0a0a`) and `ink` (default `#3CE6AC`) as composition variables on the single root file, bound via CSS custom properties everywhere (including the duotoned mural), so one `--variables` call re-skins the entire journey. It will be rendered twice: the default brand palette, and a second full render with `{\"ground\":\"#0d1420\",\"ink\":\"#c8ff3d\"}`.\n\n**Architecture constraint (technical):** single composition file — one `index.html`, one variable scope. The world is one wide scene space traversed by a camera transform; regions may still be timed `class=\"clip\"` sections synchronized to the camera's arrival (so capture stays efficient), but their positions form one continuous world and the wire + ruler + protagonist chip layers persist across 100% of the film. No `data-composition-src` sub-files.\n\n**Voice & music:** confident, energetic female narration — Kokoro `af_sky`, passed explicitly via `--voice` — riding the journey's momentum (the VO never waits for the camera; the camera arrives on the VO). Driving, beat-forward electronic BGM from the catalog at the engine's default narration-bed volume; the same track feeds the Rhythm region's beat analysis.\n\n**Negatives:** no hard cuts outside the two sanctioned seams; no static regions; no shaking or idle-in-place motion passed off as energy; no hue beyond mint (cyan only inside the one CTA gradient) — and per the brand file, no purple-blue SaaS gradients ever; no stock footage or photography; no fictional stats, projects, or testimonials — every number and label must be true of HyperFrames today; no real OS/browser chrome; no unseeded randomness; none of the film is silent."
}
],
"fidelity": "verbatim",
"process": {
"notes": "The page says one prompt made the film and nothing was cut or stitched together afterward. Two earlier builds passed every check but failed review until a cinematography contract was written into the prompt. Three clauses were added after the fact, when frame review caught the builder drifting, and the film was patched to match. A second render re-skins the whole film by changing two color variables. The agent and model aren't named."
},
"requirements": [
"HyperFrames skills installed (npx skills add heygen-com/hyperframes)",
"A frame.md brand file and woff2 font files, which the prompt expects but the page doesn't publish",
"HyperFrames' media pipeline for the voice, avatar clip, background removal, and music"
],
"remix": "The prompt is built on HyperFrames' own brand and facts. To adapt it, keep the \"Cinematography contract\" section and the wire, ruler, and chip that persist across the film, and replace the brand section and each region with your product's real numbers and copy.",
"look": {
"summary": "A dark, grid-lined world in HyperFrames' brand, with a thin mint line through every frame passing code, a bar chart, a dotted world map, an avatar clip, green shards, and a waveform, under a timeline ruler along the top.",
"palette": "Near-black ground with a faint grid, gray and white type, and one mint-green accent for the line, the chip, the numerals, and highlights. The avatar clip adds a beige blazer and skin tones.",
"type": "Monospace for code and labels (data-start=\"0\" data-duration=\"4\",
), widely spaced uppercase eyebrows (\"MEASURE · THE REGISTRY\", \"CATALOG BLOCKS\"), a large mint numeral, and a heavy white display word, \"SHIPPED\".",
"composition": "Wide, mostly empty frames with the mint line crossing at mid-height and a small outlined chip reading
sitting on it. A ruler with second marks and a timecode runs along the top edge.",
"sound": "Kokoro narration (the af_sky voice), catalog background music, and sound effects on the visual hits (keystrokes, whooshes, ticks, a riser), according to the prompt and the docs page.",
"structure": "A line of HTML ending in a cursor, the line branching into tracks, a bar chart of registry counts (code, transitions, captions, lower-thirds) with a large mint count, a dotted world map with a US-EAST-1 marker, a talking-head avatar in front of \"SHIPPED\", a \"Generated avatar\" label, a field of green shards, a waveform with beat ticks, and the chip inside a final box labeled \"render.mp4 · deterministic\"."
},
"creator": {
"name": "HeyGen HyperFrames team",
"url": "https://github.com/heygen-com/hyperframes"
},
"source": {
"platform": "site",
"url": "https://hyperframes.heygen.com/prompting/capstone",
"title": "Capstone — every technique, one journey",
"community": "HyperFrames prompting guide",
"posted": "2026-07"
},
"video": {
"watch": "https://hyperframes.heygen.com/prompting/capstone",
"mp4": "https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default-v2.mp4",
"poster_frame": 3
},
"media": {
"duration": 62,
"aspect": "16:9",
"poster": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/poster.webp",
"storyboard": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/storyboard.webp",
"frames": [
{
"t": 3.4,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f1.webp"
},
{
"t": 10.3,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f2.webp"
},
{
"t": 17.2,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f3.webp"
},
{
"t": 24.1,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f4.webp"
},
{
"t": 31,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f5.webp"
},
{
"t": 37.9,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f6.webp"
},
{
"t": 44.8,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f7.webp"
},
{
"t": 51.7,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f8.webp"
},
{
"t": 58.6,
"src": "https://meetreference.com/media/timeline-62-second-one-camera-promo-film/f9.webp"
}
]
}
},
{
"slug": "manim-explainer-photoelectric-effect",
"url": "https://meetreference.com/v/manim-explainer-photoelectric-effect/",
"brief": "https://meetreference.com/v/manim-explainer-photoelectric-effect.md",
"prompt_url": "https://meetreference.com/v/manim-explainer-photoelectric-effect/prompt.txt",
"title": "The photoelectric effect, in Manim",
"summary": "A 44-second silent 3Blue1Brown-style Manim animation of the photoelectric effect, made by Gemini Flash 3.5 from a one-line prompt with the open-source manim-video skill, which plans the piece, writes the scenes, renders in Docker, and reviews the result.",
"category": "math-science",
"styles": [
"manim",
"3blue1brown-style",
"physics",
"silent",
"science explainer",
"agent skill"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [
"Gemini Flash 3.5"
],
"frameworks": [
"Manim"
],
"services": [],
"skills": [
"manim-video"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Show the photoelectric effect visually"
}
],
"fidelity": "verbatim",
"process": {
"notes": "Posted by the skill's author as a demo (\"used - gemini flash 3.5\"); the agent that ran the model isn't named. The skill's README says it writes a director packet before any code (core insight, beat graph, layout zones, pacing, preflight gates), renders in a pinned Manim Community v0.20.1 Docker image, and runs review loops on the result."
},
"requirements": [
"The manim-video skill, installed in your agent's skills folder as manim-video",
"Docker"
],
"remix": "Replace \"the photoelectric effect\" with the idea you want animated. The skill's launch post also prompts with \"Please use manim-video skill’s full potential and animate:\" followed by the topic.",
"look": {
"summary": "An energy diagram of the photoelectric effect on dark gray: a metal well with yellow electrons under a dashed vacuum level, red light waves that free none, a blue photon that frees one, and the equation hf = Φ + K_max to close.",
"palette": "Charcoal gray with teal for the metal and the work function, yellow electrons, coral-red and cyan light, a green ejected electron, and a gold box around the final equation.",
"type": "Small monospace labels (Energy (E), Vacuum Level (E=0), Work Function, Metal), colored captions along the top (Red Light (Low Frequency), Red light: No emission, Blue Light (High Frequency Photon)), and LaTeX for hf = Φ + K_max with braces naming each term. In the last frames two captions run into each other at the top left.",
"composition": "16:9 with the energy axis at the left, the vacuum region and the metal well side by side across the middle, the work-function arrow at right, and captions along the top. The equation sits above the dimmed diagram at the end.",
"structure": "The bare energy diagram, red light (low frequency) with no emission, intense red light still with no emission, a blue high-frequency photon, an electron lifted above the vacuum level with hf and K_max arrows, then hf = Φ + K_max written out and boxed with Photon Energy, Work Function, and Kinetic Energy labels."
},
"creator": {
"name": "u/Apliro",
"url": "https://www.reddit.com/user/Apliro/"
},
"source": {
"platform": "reddit",
"url": "https://www.reddit.com/r/GeminiAI/comments/1ub5q6i/used_manimvideo_skill_show_the_photoelectric/",
"title": "Used 'manim-video' skill - \"Show the photoelectric effect visually\"",
"community": "r/GeminiAI",
"posted": "2026-06-20",
"engagement": {
"upvotes": 6,
"comments": 0
}
},
"video": {
"watch": "https://www.reddit.com/r/GeminiAI/comments/1ub5q6i/used_manimvideo_skill_show_the_photoelectric/",
"hls": "https://v.redd.it/f1566mgsrh8h1/HLSPlaylist.m3u8",
"embed": "https://embed.reddit.com/r/GeminiAI/comments/1ub5q6i/used_manimvideo_skill_show_the_photoelectric/?embed=true&showmedia=true&showtitle=false"
},
"media": {
"duration": 44.3,
"aspect": "16:9",
"poster": "https://meetreference.com/media/manim-explainer-photoelectric-effect/poster.webp",
"storyboard": "https://meetreference.com/media/manim-explainer-photoelectric-effect/storyboard.webp",
"frames": [
{
"t": 2.5,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f1.webp"
},
{
"t": 7.4,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f2.webp"
},
{
"t": 12.3,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f3.webp"
},
{
"t": 17.2,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f4.webp"
},
{
"t": 22.1,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f5.webp"
},
{
"t": 27.1,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f6.webp"
},
{
"t": 32,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f7.webp"
},
{
"t": 36.9,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f8.webp"
},
{
"t": 41.8,
"src": "https://meetreference.com/media/manim-explainer-photoelectric-effect/f9.webp"
}
]
}
},
{
"slug": "seamless-looping-side-view-car-driving",
"url": "https://meetreference.com/v/seamless-looping-side-view-car-driving/",
"brief": "https://meetreference.com/v/seamless-looping-side-view-car-driving.md",
"prompt_url": "https://meetreference.com/v/seamless-looping-side-view-car-driving/prompt.txt",
"title": "Seamless side-view car loop with parallax",
"summary": "A 5-second seamless loop of a car passing layered parallax scenery, written as one HTML canvas file by Kimi K2.6 from a one-paragraph prompt. The creator ran it on 11 frontier and local models; Kimi ranked first and a local Qwen3.6 27B quant second.",
"category": "generative-art",
"styles": [
"parallax",
"side-scrolling",
"seamless loop",
"canvas",
"car",
"landscape",
"model comparison"
],
"made_with": {
"agents": [
"Perplexity"
],
"models": [
"Kimi K2.6 Thinking"
],
"frameworks": [
"HTML canvas",
"Plain JavaScript"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Write a single HTML file with a full-page canvas and no libraries. Simulate a realistic side-view of a moving car as the main subject. Keep the car visible in the foreground while the background landscape scrolls continuously to create the feeling that the car is driving forward. Use layered scenery for depth: nearby ground, roadside elements, trees, poles, and distant hills or mountains should move at different speeds for a natural parallax effect. Animate the wheels spinning realistically and add subtle body motion so the car feels connected to the road. Let the environment pass smoothly behind it, with repeating but varied scenery that makes the movement feel believable. Use cinematic lighting and a cohesive sky, such as sunset, dusk, or daylight, to enhance atmosphere. The overall motion should feel calm, immersive, and realistic, with a seamless looping animation."
}
],
"fidelity": "verbatim",
"process": {
"notes": "The creator ran the exact same prompt on four frontier models through a Perplexity subscription (Claude Sonnet 4.6 Thinking, Gemini 3.1 Pro Thinking, GPT 5.4 Thinking, and Kimi K2.6 Thinking) and on seven local quantized models on a Ryzen 5 5600 with an 8 GB RX 5700 XT, at roughly 2 to 80 tokens per second. The only change to any output was its
tag, to track which model made it. This clip is Kimi K2.6's, which the creator ranked first for the cleanest overall result; a local Qwen3.6-27B Q4_K_M came second and its Claude Opus reasoning-distilled variant third. All 11 clips are in the post's gallery, each captioned with its model."
},
"requirements": [],
"remix": "Replace \"a moving car\" with another vehicle or subject and \"such as sunset, dusk, or daylight\" with the one sky you want. Keep \"no libraries\" and \"seamless looping animation\" for a self-contained loop.",
"look": {
"summary": "A flat dusk roadside in a browser window: a small steel-blue hatchback with its headlights on sits on a gray road in front of dark trees and roadside posts, under purple mountains, a low yellow sun, and soft clouds.",
"palette": "Plum and magenta sky, a pale yellow sun with a warm glow, slate-purple mountains, dark green trees, a gray road, and a dark brown verge.",
"type": "None in the scene itself. The clip is a screen capture, so the browser's tab bar and the Windows taskbar show at the top and bottom.",
"composition": "16:9 side view in layers: sky, a mountain ridge, a band of trees and posts, the road, and the verge. The car sits left of center in the lower third and the sun right of center above the ridge.",
"structure": "One repeating shot. Across the sampled frames the car keeps its place while the trees, posts, and hills sit at different positions behind it."
},
"creator": {
"name": "u/Fragrant-Remove-9031",
"url": "https://www.reddit.com/user/Fragrant-Remove-9031/"
},
"source": {
"platform": "reddit",
"url": "https://www.reddit.com/r/LocalLLaMA/comments/1tf3p6c/local_qwen_36_vs_frontier_models_on_a_coding/",
"title": "Local Qwen 3.6 vs frontier models on a coding primitive: single-file HTML canvas driving animation - results and GIFs",
"community": "r/LocalLLaMA",
"posted": "2026-05-16",
"engagement": {
"upvotes": 779,
"comments": 237
}
},
"video": {
"watch": "https://www.reddit.com/r/LocalLLaMA/comments/1tf3p6c/local_qwen_36_vs_frontier_models_on_a_coding/",
"mp4": "https://preview.redd.it/skt9m8gwzj1h1.gif?format=mp4&s=8e6aa7f5f76cfa2fd73e1d8790d857daa6898b6a"
},
"media": {
"duration": 5,
"aspect": "16:9",
"poster": "https://meetreference.com/media/seamless-looping-side-view-car-driving/poster.webp",
"storyboard": "https://meetreference.com/media/seamless-looping-side-view-car-driving/storyboard.webp",
"frames": [
{
"t": 0.3,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f1.webp"
},
{
"t": 0.8,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f2.webp"
},
{
"t": 1.4,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f3.webp"
},
{
"t": 1.9,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f4.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f5.webp"
},
{
"t": 3.1,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f6.webp"
},
{
"t": 3.6,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f7.webp"
},
{
"t": 4.2,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f8.webp"
},
{
"t": 4.7,
"src": "https://meetreference.com/media/seamless-looping-side-view-car-driving/f9.webp"
}
]
}
},
{
"slug": "comic-zine-website-to-promo-ai-garage",
"url": "https://meetreference.com/v/comic-zine-website-to-promo-ai-garage/",
"brief": "https://meetreference.com/v/comic-zine-website-to-promo-ai-garage.md",
"prompt_url": "https://meetreference.com/v/comic-zine-website-to-promo-ai-garage/prompt.txt",
"title": "Comic-zine promo for an AI newsletter",
"summary": "A 25-second signup promo that matches the AI Garage Weekly site: a cyan hero, a red comic headline with a black outline, cream paper cards, doodle robots, and a subscribe form. Hermes Agent built it with HyperFrames from a website-to-video prompt.",
"category": "product-promo",
"styles": [
"comic zine",
"doodles",
"newsletter",
"website to video",
"thick outlines",
"playful",
"promo"
],
"made_with": {
"agents": [
"Hermes Agent"
],
"models": [],
"frameworks": [
"HyperFrames",
"GSAP"
],
"services": [],
"skills": [
"HyperFrames skill for Hermes Agent"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Create a 25-second 16:9 HyperFrames promotional video for AI Garage Weekly.\n\nSource:\nhttps://www.onchainaigarage.com\n\nGoal:\nDrive newsletter signups by showing that AI Garage Weekly is a fast, fun, useful Friday dispatch for AI tinkerers, builders, and curious technical people.\n\nAudience:\nAI builders, indie hackers, onchain AI people, local AI experimenters, and people who follow Onchain AI Garage.\n\nCore message:\nA newsletter for AI tinkerers. Latest AI news, interesting research finds, current ML experiments, and unique project ideas. Free every Friday. 5 minute read. From the creator of Onchain AI Garage. 10K+ subscribers and 300K+ views.\n\nFormat:\n16:9 landscape, 1920x1080.\nSuitable for YouTube, X, LinkedIn, and newsletter landing page embeds.\nNo talking head.\nThe video should work silently with captions.\nOptional upbeat music and light SFX.\n\nVisual identity:\nMatch the actual AI Garage Weekly site closely.\n\nUse:\n- bright cyan / sky-blue hero background\n- cream editorial paper sections\n- red comic-style AI GARAGE WEEKLY headline with black outline\n- thick black borders\n- offset shadows\n- monospace uppercase labels\n- hand-drawn doodle robots, stars, coins, squiggles, and paper-plane marks\n- printed newsletter issue cards\n- playful comic-zine / garage-lab personality\n\nAvoid:\n- corporate SaaS polish\n- generic AI gradients\n- holograms\n- glassmorphism\n- stock footage\n- excessive shader effects\n\nScene structure:\n\nScene 1: 0-4 seconds\nHook.\nOpen on the cyan hero background.\nDoodles pop in around the frame: robot, star, coin, squiggle, paper plane.\nStamp in the label:\nA NEWSLETTER FOR AI TINKERERS\nThen slam in the huge red headline:\nAI GARAGE WEEKLY\n\nCaption:\n\"A newsletter for AI tinkerers.\"\n\nMotion:\n- sticker-stamp reveal\n- bouncy title overshoot\n- tiny doodle loops\n- comic-zine wobble\n\nScene 2: 4-8 seconds\nCredibility.\nAnimate proof badges from the landing page:\nFROM THE CREATOR OF ONCHAIN AI GARAGE\n10K+ SUBSCRIBERS\n300K+ VIEWS\n\nCaption:\n\"From the creator of Onchain AI Garage.\"\n\nMotion:\n- badges pop in like printed labels\n- light paper texture\n- red underline scribbles\n- quick camera push\n\nScene 3: 8-14 seconds\nWhat you get.\nShow four kinetic paper cards:\n1. AI news\n2. Research finds\n3. ML experiments\n4. Project ideas\n\nCaption:\n\"News, research, experiments, and project ideas.\"\n\nMotion:\n- paper cards slide and shuffle\n- card edges lift like physical zines\n- doodle arrows connect the cards\n- one comic-panel transition between beats\n\nScene 4: 14-19 seconds\nLatest issues.\nShow recent issue cards fanning into frame like printed zines.\nUse real issue topics from the site if visible, such as:\n- Hermes Agent Masterclass\n- Gemma MTP\n- VLM Reinforcement Learning\n- Local AI\n- Brain Upload\n- Codex for Work\n- Multi-Agent Systems\n- Hermes Dashboard Plugins\n- Kimi K2.6\n- Hermes + Webhooks\n- LeWorldModel\n- Zasshi\n\nCaption:\n\"Five-minute reads. Real experiments.\"\n\nMotion:\n- cards fan open\n- camera glides over issue titles\n- one card gets circled with a hand-drawn marker\n\nScene 5: 19-23 seconds\nSubscribe moment.\nRecreate the signup form.\nType an example email into the form.\nClick the red SUBSCRIBE button.\nTrigger a doodle burst.\n\nCaption:\n\"Free every Friday.\"\n\nMotion:\n- typewriter clicks\n- button press bounce\n- stars and squiggles burst outward\n\nScene 6: 23-25 seconds\nCTA.\nClean end card.\n\nText:\nAI GARAGE WEEKLY\nA newsletter for AI tinkerers\nFree every Friday\nonchainaigarage.com\n\nMotion:\n- logo settles\n- doodles loop subtly\n- final paper-card snap to frame\n\nTechnical direction:\nUse website capture or deterministic HTML recreation. Preserve the actual site style. Use GSAP seekable timelines. Use only one major transition, such as a comic-panel wipe or grid-pixelate wipe. Keep text large and readable.\n\nDeliverables:\nCreate DESIGN.md, SCRIPT.md, STORYBOARD.md, and the HyperFrames composition. Provide 5 still-frame checkpoints before final render:\n1. hero title frame\n2. credibility badges frame\n3. what-you-get cards frame\n4. latest issues zine spread\n5. subscribe CTA frame"
}
],
"fidelity": "verbatim",
"process": {
"notes": "The third of five builds in the walkthrough; the finished promo plays at about 12:31 to 12:57. In the walkthrough the creator points out a missing title in the preview, and Hermes patches it before the final render. The creator published this file as the prompt from the video, in what the repo README calls a repo-ready prompt set. The prompt typed into Hermes on screen asks for the same scenes and copy but is worded and organized differently, and opens by invoking the website-to-HyperFrames flow. The model behind Hermes isn't stated."
},
"requirements": [
"Hermes Agent with its HyperFrames skill installed",
"Web access so the agent can capture the source site"
],
"remix": "Swap the site under \"Source:\" and the newsletter name for your own, then rewrite the \"Core message:\" and the scene copy. Point the \"Visual identity:\" list at your own site's look.",
"look": {
"summary": "A website-matched promo in comic-zine style: a cyan sky with doodle robots, stars, coins, and paper planes, a red comic headline with a black outline, cream paper cards with thick black borders, and a subscribe form.",
"palette": "Bright sky cyan, cream paper, tomato red, black outlines, and small yellow coins.",
"type": "A chunky red display face with a black outline for AI GARAGE WEEKLY, a serif subline, and monospace uppercase labels in bordered pills (FROM THE CREATOR OF ONCHAIN AI GARAGE, 10K+ SUBSCRIBERS, 300K+ VIEWS, FREE · EVERY FRIDAY · 5 MIN READ).",
"composition": "16:9 with centered stacks of bordered pills and cards with hard offset shadows, a two-by-two grid of topic cards, three issue cards in a row on cream paper, and doodles scattered toward the edges. The opening frames show it playing in a desktop media player, with the player's controls along the bottom.",
"structure": "The AI GARAGE WEEKLY hero, the proof badges, four topic cards (AI news, research finds, ML experiments, project ideas), three latest-issue cards on cream, an email field with a red SUBSCRIBE button and a burst of dots, and an AI GARAGE WEEKLY end card with \"A newsletter for AI tinkerers.\" and a SUBSCRIBE AT ONCHAINAIGARAGE.COM pill."
},
"creator": {
"name": "Tonbi's AI Garage",
"url": "https://www.youtube.com/@TonbisAIGarage"
},
"source": {
"platform": "youtube",
"url": "https://www.youtube.com/watch?v=1IsskexiCSw",
"title": "Hermes Agent + HyperFrames: Free Open-Source AI Tools to Create Amazing Videos",
"community": "Tonbi's AI Garage",
"posted": "2026-05-15",
"engagement": {
"comments": 49,
"likes": 637,
"views": 24558
}
},
"video": {
"watch": "https://www.youtube.com/watch?v=1IsskexiCSw&t=751s",
"youtube": "1IsskexiCSw",
"start": 751,
"end": 778,
"poster_frame": 5
},
"media": {
"duration": 27,
"aspect": "16:9",
"poster": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/poster.webp",
"storyboard": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/storyboard.webp",
"frames": [
{
"t": 752.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f1.webp"
},
{
"t": 755.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f2.webp"
},
{
"t": 758.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f3.webp"
},
{
"t": 761.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f4.webp"
},
{
"t": 764.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f5.webp"
},
{
"t": 767.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f6.webp"
},
{
"t": 770.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f7.webp"
},
{
"t": 773.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f8.webp"
},
{
"t": 776.5,
"src": "https://meetreference.com/media/comic-zine-website-to-promo-ai-garage/f9.webp"
}
]
}
},
{
"slug": "manga-market-trailer-zasshi-king-ui",
"url": "https://meetreference.com/v/manga-market-trailer-zasshi-king-ui/",
"brief": "https://meetreference.com/v/manga-market-trailer-zasshi-king-ui.md",
"prompt_url": "https://meetreference.com/v/manga-market-trailer-zasshi-king-ui/prompt.txt",
"title": "Zasshi King promo with a UI shatter",
"summary": "A 30-second trailer for Zasshi King, a manga-magazine price tracker: red halftone, gold type and ranked market cards, then the interface shatters and lands on a 3D phone. Hermes Agent built it with the HyperFrames skill, in a second pass after notes.",
"category": "product-promo",
"styles": [
"manga",
"halftone",
"product trailer",
"ui shatter",
"phone mockup",
"website to video",
"bold type"
],
"made_with": {
"agents": [
"Hermes Agent"
],
"models": [],
"frameworks": [
"HyperFrames"
],
"services": [],
"skills": [
"HyperFrames skill for Hermes Agent"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Create a 30-second 16:9 cinematic product promo video about Zasshi King.\n\nSource:\nhttps://www.zasshiking.com\n\nContext:\nZasshi King is a manga magazine market-intelligence site originally designed with Claude Design. The video should show an AI creative stack in action:\n\n1. Claude Design created the bold product visual system.\n2. Zasshi King turned that design into a real manga-market analytics product.\n3. HyperFrames turns the static web interface into cinematic motion.\n4. The video ends by teasing a future mobile app.\n\nCore thesis:\n\"Claude Design made the product. HyperFrames makes it move.\"\n\nAudience:\nAI builders, designers, founders, collectors, and viewers of Onchain AI Garage / AI Garage Weekly who care about AI-native product creation.\n\nGoal:\nMake viewers understand that AI design tools are not just making mockups anymore. They can create distinctive product systems that become real websites, animated promos, and app concepts.\n\nFormat:\n30 seconds, 16:9, high-energy product trailer.\nNo talking head.\nUse short captions and cinematic motion.\nOptional voiceover, but the video should work silently.\n\nVisual identity:\nMatch the actual Zasshi King website closely.\n\nUse:\n- bright red halftone hero background\n- manga yellow / gold display text\n- thick black outlines\n- cream paper-like background\n- manga magazine covers\n- diagonal Japanese ticker tape\n- market cards\n- rank numbers like 01, 02, 03\n- sold median prices\n- red and green market movement badges\n- sparklines\n- search bar interaction\n- bold manga / shonen magazine energy\n\nThe style should feel like:\n\"Weekly Shonen Jump meets Bloomberg Terminal.\"\n\nAvoid:\n- generic SaaS gradients\n- bland startup animation\n- fake corporate stock footage\n- random anime footage\n- overusing VFX\n- changing the brand into something unrelated\n\nImportant technical direction:\nDo not rely on a live iframe for render-critical UI.\nCapture or recreate the Zasshi King page as deterministic HTML sections.\nUse the real site as source for layout, colors, typography, visible text, market-card structure, and brand details.\nIf the live page is hard to capture, recreate the hero, search bar, market cards, and mobile app screen in HTML/CSS using the inspected site as visual reference.\n\nUse these HyperFrames-style elements:\n- HTML-in-Canvas website capture or recreation\n- vfx-shatter for UI glass fracture\n- vfx-iphone-device for the mobile app reveal\n- optional subtle vfx-liquid-glass for a price-inspection lens\n- GSAP card cascade\n- SVG sparkline drawing\n- animated price counters\n- manga-style impact cuts\n- red/yellow flash frames\n- ticker tape movement\n- halftone overlays\n- grain texture\n\nScene structure:\n\nScene 1: 0-4 seconds\nManga splash intro.\nOpen on a cream background.\nA small caption appears:\n\"Designed with Claude Design.\"\n\nThe screen slams into the Zasshi King visual world: red halftone background, manga covers flying in from the edges, diagonal ticker tape sweeping across, and the ZASSHI KING hero lockup punching into frame.\n\nCaption:\n\"AI-designed. Collector-native.\"\n\nMotion:\n- manga covers fly in with slight rotation\n- red halftone pulses\n- yellow title slams down with black impact shadow\n- ticker tape scrolls diagonally\n- quick manga speed-line accent\n\nScene 2: 4-8 seconds\nAI design becomes product.\nShow the Zasshi King landing page as a real website interface.\n\nCaption:\n\"From prompt to product system.\"\n\nHighlight:\n- logo\n- search bar\n- hero section\n- market movers section\n\nMotion:\n- camera glides down the page\n- page sections lock into place like printed manga panels\n- subtle parallax on covers and background text\n\nScene 3: 8-13 seconds\nSearch interaction.\nShow the search bar.\nA cursor types:\n\"dragon ball vegeta\"\n\nClick the black/yellow GO button.\nThe results snap into a ranked market list.\n\nCaption:\n\"Search key issues. Track sold comps.\"\n\nMotion:\n- typed text appears quickly\n- GO button clicks with a yellow flash\n- market cards slide into frame\n- card shadows pop in with thick black/yellow offset\n\nScene 4: 13-19 seconds\nMarket movers proof.\nAnimate ranked cards cascading into view.\n\nShow cards inspired by the real Zasshi King market movers:\n- Naruto: Debut\n- One Piece: Debut\n- Dragon Ball: Debut\n- Dragon Ball: First Appearance of Vegeta\n- Bleach: Debut\n\nShow sold median prices and movement badges. Use visible examples from the site if available:\n- $18,811\n- $13,801\n- $13,181\n- $1,914\n- $1,891\n\nCaption:\n\"Daily manga magazine market intelligence.\"\n\nMotion:\n- rank numbers stamp on screen\n- magazine covers slide in\n- prices count up from zero\n- percentage badges flip in\n- sparklines draw left to right\n- positive lines glow green\n- negative lines glow red\n\nScene 5: 19-23 seconds\nHTML-in-Canvas shatter transition.\nA cursor clicks a market card, preferably Dragon Ball or One Piece.\nThe selected card zooms forward.\nThe entire Zasshi King interface fractures into glass-like panels.\n\nCaption:\n\"HyperFrames turns the interface into motion.\"\n\nMotion:\n- UI shatters into glass fragments\n- fragments contain pieces of the site: cover art, rank number, price, sparkline, Japanese text, search bar\n- shards rotate in 3D\n- red/yellow/black reflections on glass\n- keep it clean and premium, not chaotic\n\nUse:\nvfx-shatter\n\nScene 6: 23-27 seconds\n3D phone reveal.\nThe glass fragments swirl together and reassemble onto a rotating 3D phone screen.\nThe phone shows a mobile version of Zasshi King:\n- logo at top\n- search bar\n- stacked market cards\n- price movement badges\n- sparkline details\n\nCaption:\n\"Mobile app coming soon.\"\n\nMotion:\n- 3D phone rotates into hero angle\n- page scrolls slightly inside the phone\n- one card expands or lifts\n- subtle shine across phone glass\n\nUse:\nvfx-iphone-device\n\nIf a real mobile layout is not available, create a purpose-built mobile HTML recreation based on the desktop design.\n\nScene 7: 27-30 seconds\nFinal lockup.\nReturn to bold red/yellow/black brand frame.\n\nText:\nZASSHI KING\nSold comps · Daily\nMobile App Coming Soon\nzasshiking.com\n\nOptional final caption:\n\"Claude Design made the product. HyperFrames made it move.\"\n\nMotion:\n- ticker tape scrolls behind logo\n- manga covers settle around edges\n- final yellow flash\n- end on clean logo and URL\n\nTone:\nEnergetic, manga-native, high-contrast, sharp, collectible, data-driven.\nThe video should feel designed, not generated.\nIt should make the site look like a real product with a distinctive brand system.\n\nMusic / sound direction if supported:\nFast editorial trailer feel.\nPunchy hits for title slams.\nSubtle digital ticks for price counters.\nGlass crack/shatter sound for the UI fracture.\nClean whoosh for phone reveal.\n\nDeliverables:\nCreate DESIGN.md, SCRIPT.md, STORYBOARD.md, and the HyperFrames composition. Provide 5 still-frame checkpoints before final render:\n1. hero title frame\n2. search interaction frame\n3. market movers frame\n4. shatter transition frame\n5. phone reveal final frame\n\nQuality bar:\nThe Zasshi King website should remain recognizable throughout.\nThe VFX should enhance the existing manga-market identity, not replace it.\nUse one major hero effect, the UI shatter, and one product payoff effect, the phone reveal."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "The fifth of five builds in the walkthrough; the finished promo plays from 22:05 to 22:35. The creator says the first pass had problems (music and sound effects they disliked, a misrendered floating element, a shatter that didn't work as wanted), so they gave Hermes tweaks, which aren't published, and the second version is the one shown. The prompt asks for HyperFrames' vfx-shatter and vfx-iphone-device blocks, and the creator suggests pointing the agent at the HTML-in-Canvas docs because theirs had trouble with the iPhone block. The model behind Hermes isn't stated."
},
"requirements": [
"Hermes Agent with the HyperFrames skill installed",
"Node.js and FFmpeg",
"A live website for the agent to capture or recreate (here, zasshiking.com)"
],
"remix": "Replace Zasshi King, its URL and the \"Visual identity\" list with your own product's, and rewrite the seven scenes around your site's real screens. The two effects to keep are \"vfx-shatter\" and \"vfx-iphone-device\".",
"look": {
"summary": "A loud manga-shop trailer in red, yellow and black: a halftone hero with the 雑誌王 logo, a search for \"dragon ball vegeta\", ranked market cards with prices and sparklines, the interface in paper-like shards, and a phone mockup of the mobile site.",
"palette": "Fire-engine red with diagonal halftone texture, manga yellow and gold, cream paper panels, thick black outlines, and green and red price badges.",
"type": "Chunky gold-and-black display lettering for 雑誌王 and ZASSHI · KING, heavy condensed sans for captions in black-outlined boxes, small labels on the cards, and big outlined rank numbers 01 to 05.",
"composition": "Full-bleed red frames crossed by diagonal ticker tape, stacked cards centered on cream, and a tilted phone near the end. The first seconds play inside a desktop video player in the walkthrough before it goes full screen.",
"structure": "A cream opening, the 雑誌王 hero with \"Designed with Claude Design.\" and \"AI-designed. Collector-native.\", the site's layout labeled under \"From prompt to product system.\", the search for Vegeta's first appearance, the market movers at $0 and then with prices, sparklines and badges, the shatter over \"Manga market data, in motion.\", the phone with the mobile site, and the final lockup with \"Mobile App Coming Soon · zasshiking.com\"."
},
"creator": {
"name": "Tonbi's AI Garage",
"url": "https://www.youtube.com/@TonbisAIGarage"
},
"source": {
"platform": "youtube",
"url": "https://www.youtube.com/watch?v=1IsskexiCSw",
"title": "Hermes Agent + HyperFrames: Free Open-Source AI Tools to Create Amazing Videos",
"community": "Tonbi's AI Garage",
"posted": "2026-05-15",
"engagement": {
"comments": 49,
"likes": 637,
"views": 24558
}
},
"video": {
"watch": "https://www.youtube.com/watch?v=1IsskexiCSw&t=1325s",
"youtube": "1IsskexiCSw",
"start": 1325,
"end": 1355,
"poster_frame": 7
},
"media": {
"duration": 30,
"aspect": "16:9",
"poster": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/poster.webp",
"storyboard": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/storyboard.webp",
"frames": [
{
"t": 1326.7,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f1.webp"
},
{
"t": 1330,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f2.webp"
},
{
"t": 1333.3,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f3.webp"
},
{
"t": 1336.7,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f4.webp"
},
{
"t": 1340,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f5.webp"
},
{
"t": 1343.3,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f6.webp"
},
{
"t": 1346.7,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f7.webp"
},
{
"t": 1350,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f8.webp"
},
{
"t": 1353.3,
"src": "https://meetreference.com/media/manga-market-trailer-zasshi-king-ui/f9.webp"
}
]
}
},
{
"slug": "faceless-youtube-explainer-things-hotel",
"url": "https://meetreference.com/v/faceless-youtube-explainer-things-hotel/",
"brief": "https://meetreference.com/v/faceless-youtube-explainer-things-hotel.md",
"prompt_url": "https://meetreference.com/v/faceless-youtube-explainer-things-hotel/prompt.txt",
"title": "Faceless explainer on hotel staff secrets",
"summary": "A narrated, faceless YouTube video on what hotel staff won't tell you. From one long prompt and two follow-ups, Claude Code wrote the script, voiced it with ElevenLabs, made Seedance, Veo and GPT Image 2 visuals via the Higgsfield MCP, and cut it in FFmpeg.",
"category": "explainer",
"styles": [
"faceless youtube",
"narrated",
"listicle",
"ai b-roll",
"cinematic",
"title cards"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.7"
],
"frameworks": [
"FFmpeg"
],
"services": [
"ElevenLabs",
"Higgsfield",
"Seedance 2.0",
"Veo 3.1 Lite",
"GPT Image 2"
],
"skills": [
"ElevenLabs MCP",
"Higgsfield MCP"
]
},
"prompts": [
{
"label": "Prompt",
"text": "You are going to produce a complete, ready-to-upload YouTube video end-to-end. \nWork in the current directory. Create a folder structure: \n/script, /audio, /visuals, /final.\n\nVIDEO BRIEF\n- Topic: [things hotel staff wont tell you]\n- Target length: 4 minutes (~6 words of script)\n- Style: Educational, conversational — hook, 3-act structure, \n rehook every 60-90 seconds\n- Aspect ratio: 16:9, 1080p\n- Tone: Confident, direct, no fluff, contractions OK\n\nSTEP 1 — SCRIPT\nWrite the full script as plain text in /script/script.txt. \nUse this structure:\n - Hook (15 seconds, statement or pattern interrupt)\n - Context preview (3 things theyll learn)\n - Body: 5 main points, each with rehook → story/example → payout \n - Outro with relink suggestion\nAlso output /script/shot_list.txt that breaks the script into 25-40 numbered \nb-roll shots, each with: shot number, timestamp range, the script line it \ncovers, and a visual description suitable for an AI video generator. \nAim for 8-12 second clips.\n\nSTEP 2 — VOICEOVER (ElevenLabs MCP)\nRead /script/script.txt. Split it into chunks of ~250 words. For each chunk, \ncall the ElevenLabs MCP to generate audio using voice_id yr43K8H5LoTp6S1QFSGg. Save chunks as /audio/vo_001.mp3, \n/audio/vo_002.mp3, etc. Then concatenate them into /audio/voiceover_full.mp3 \nusing FFmpeg. Report the total duration in seconds.\n\nSTEP 3 — VISUALS (Higgsfield MCP)\nRead /script/shot_list.txt. For each shot:\n - If it's a static concept (charts, text overlays, title cards), use \n Higgsfield's image generation with Nano Banana Pro (best for text) or \n GPT Image 2, 1920x1080, save to /visuals/shot_XX.png\n - If it's motion footage and for the introduction which is the most important part of the video (people, objects, environments, action), use \n Seedance 2.0 via Higgsfield, 1920x1080, duration matching the shot \n length (8s default), save to /visuals/shot_XX.mp4\nRun these in parallel where possible. Poll the job status until complete.\nMaintain a /visuals/manifest.json mapping shot number → file path → duration.\n\nSTEP 4 — THUMBNAIL\nGenerate a YouTube thumbnail using Higgsfield GPT Image 2 (it's the best \nat rendering text). 1280x720, high contrast, 3-5 word headline pulled from \nthe hook. Save to /final/thumbnail.png. Generate 3 variations.\n\nSTEP 5 — STITCH AND RENDER (FFmpeg)\nUse FFmpeg in bash to:\n 1. Build a concat list of all visual clips in shot order, padding any \n static images to their assigned duration\n 2. Overlay the /audio/voiceover_full.mp3 as the audio track\n 3. If total visual duration < audio duration, loop or extend the last \n shot to match\n 4. If total visual duration > audio duration, trim\n 5. Add a 0.5s crossfade between shots\n 6. Render to /final/video.mp4 at 1920x1080, H.264, AAC audio, \n YouTube-ready settings (recommended: -crf 18, -preset slow, \n -pix_fmt yuv420p)\n 7. Verify the output file plays and report duration + file size\n\nSTEP 6 — METADATA\nWrite /final/title_options.txt with 5 title options (curiosity-driven, \nunder 60 chars). Write /final/description.txt with a 200-word description, \nkeywords, and placeholder for affiliate links. Write /final/tags.txt with \n20 relevant YouTube tags.\n\nCRITICAL RULES\n- Do NOT use any third-party brands, logos, or copyrighted characters in visuals\n- Polling: if a Higgsfield job is still processing, wait 15 seconds and \n re-check, up to 10 times before moving on\n- If any step fails, report the error and continue with the next step — \n do not silently skip\n- At the end, give me a final report: word count, voiceover duration, \n number of visual shots generated, final video duration, and the path \n to /final/video.mp4\n\nBegin."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "In the tutorial the creator picks Opus 4.7, then sends two follow-ups: his ElevenLabs voice ID, and a request to keep Seedance 2.0 for the intro only, use cheaper video models for the rest, and use GPT Image 2 for stills with a slow zoom. Claude wrote a 32-shot list, used Veo 3.1 Lite for the other motion shots, estimated 400 to 500 Higgsfield credits, and rendered a video 3 minutes 44 seconds long. The narration is the creator's own cloned ElevenLabs voice. The segment shown here is the first stretch of the finished video as it plays in the tutorial, with the creator's face-cam in the corner; it continues later, after some commentary. The tutorial is sponsored by Higgsfield."
},
"requirements": [
"The ElevenLabs MCP server and a voice ID (the published prompt has the creator's own)",
"The Higgsfield MCP connector and a Higgsfield account with credits",
"FFmpeg"
],
"remix": "Change the topic in \"Topic: [things hotel staff wont tell you]\" and the target length, and put your own ElevenLabs voice in place of the voice_id. The model picks in STEP 3 and STEP 4 drive most of the cost.",
"look": {
"summary": "Photoreal generated hotel scenes: a neon VACANCY sign on wet pavement, the sign laid over a minibar door, a marble lobby seen from behind a desk keyboard, a sunlit grand lobby, a gold \"01 UPGRADES\" card, a desk clerk at a computer, a dark corridor, and a phone with a booking confirmation.",
"palette": "Warm tungsten golds and browns, teal night exteriors, red and cream neon, and cream-and-gold type on dark wood paneling.",
"type": "A large cream serif numeral over gold serif capitals for the section card (\"01\" and \"UPGRADES\"). Other text sits inside the images: the VACANCY sign and a phone screen reading \"RESERVED — DIRECT\".",
"composition": "Wide, symmetrical interiors and close product-style shots with shallow depth of field. The creator's round face-cam sits in the lower left of the tutorial.",
"sound": "Narration in the creator's own cloned ElevenLabs voice, according to the tutorial.",
"structure": "The VACANCY sign twice, the sign over a minibar door, the lobby from the front desk, a grand lobby, the 01 UPGRADES card, the clerk at the desk, a night corridor, then the phone booking beside a coffee cup."
},
"creator": {
"name": "Make Money Matt",
"url": "https://www.youtube.com/@makemoneymatt"
},
"source": {
"platform": "youtube",
"url": "https://www.youtube.com/watch?v=Kgdms--LQ-g",
"title": "Watch Me Make a Faceless YouTube Video With Claude Code",
"posted": "2026-05-08",
"engagement": {
"comments": 231,
"likes": 2845,
"views": 75311
}
},
"video": {
"watch": "https://www.youtube.com/watch?v=Kgdms--LQ-g&t=745s",
"youtube": "Kgdms--LQ-g",
"start": 745,
"end": 815
},
"media": {
"duration": 70,
"aspect": "16:9",
"poster": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/poster.webp",
"storyboard": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/storyboard.webp",
"frames": [
{
"t": 748.9,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f1.webp"
},
{
"t": 756.7,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f2.webp"
},
{
"t": 764.4,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f3.webp"
},
{
"t": 772.2,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f4.webp"
},
{
"t": 780,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f5.webp"
},
{
"t": 787.8,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f6.webp"
},
{
"t": 795.6,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f7.webp"
},
{
"t": 803.3,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f8.webp"
},
{
"t": 811.1,
"src": "https://meetreference.com/media/faceless-youtube-explainer-things-hotel/f9.webp"
}
]
}
},
{
"slug": "crt-curved-terminal-running-npx-create",
"url": "https://meetreference.com/v/crt-curved-terminal-running-npx-create/",
"brief": "https://meetreference.com/v/crt-curved-terminal-running-npx-create.md",
"prompt_url": "https://meetreference.com/v/crt-curved-terminal-running-npx-create/prompt.txt",
"title": "Terminal under a curved CRT shader",
"summary": "An 18-second clip of an animated terminal under a subtle convex CRT shader: it runs npx create-video, then starts Claude with a prompt to add the effect. Claude Code built it with Remotion's HTML-in-canvas feature, starting from a docs link.",
"category": "retro-pixel",
"styles": [
"crt",
"terminal",
"shader",
"retro",
"screen curvature"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.7"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "https://www.remotion.dev/docs/remotion/html-in-canvas \n\nmake a new composition and implement a subtle CRT convex shape shader on top of a HTML element. \ncontent: terminal and remotion themed. the command and output of \"npx create-video@latest --yes --blank my-video\" \n\nshould be animated. \n\nthen \"claude\" should be invoked and the prompt \"Add a CRT effect using HTML-in-canvas \" should be shown "
}
],
"fidelity": "verbatim",
"process": {
"notes": "The prompt opens with the URL of Remotion's HTML-in-canvas docs page, so the agent reads the feature's documentation before building. The showcase entry doesn't say whether follow-up prompts were needed. The prompt's trailing spaces are as submitted."
},
"requirements": [
"A Remotion version with HTML-in-canvas support"
],
"remix": "Keep the docs link and \"implement a subtle CRT convex shape shader on top of a HTML element\", and change what follows \"content:\" and the command whose output is animated.",
"look": {
"summary": "A near-black terminal seen through a faintly curved screen. A shell command scaffolds a Remotion project line by line, then claude opens a Welcome to Claude Code panel with \"Add a CRT effect using HTML-in-canvas\" typed at the prompt.",
"palette": "Near-black with soft gray text, a cyan prompt path, a green success line and orange Claude Code welcome text.",
"type": "A small monospace terminal font throughout, left-aligned, under macOS-style window dots and a \"~/projects — zsh\" title.",
"composition": "The terminal fills the frame, and the corners fall away into black like the edges of a convex tube screen. Text builds from the top left downward.",
"structure": "The npx create-video command typed out, the copy and install lines and the success message, then claude invoked, the welcome panel, and the CRT prompt with a block cursor."
},
"creator": {
"name": "@JNYBGR",
"url": "https://x.com/JNYBGR"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/vintage-screen-effect-html-in-canvas",
"title": "Vintage screen effect (HTML-in-canvas)",
"community": "Remotion Prompt Showcase",
"posted": "2026-05-03",
"engagement": {
"likes": 24
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/vintage-screen-effect-html-in-canvas",
"hls": "https://stream.mux.com/Mo1SJa9H01mFujfrfk321MQumJm1xSVwyuHTAWWWhZ01g.m3u8"
},
"media": {
"duration": 18.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/poster.webp",
"storyboard": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/storyboard.webp",
"frames": [
{
"t": 1,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f1.webp"
},
{
"t": 3,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f2.webp"
},
{
"t": 5,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f3.webp"
},
{
"t": 7,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f4.webp"
},
{
"t": 9,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f5.webp"
},
{
"t": 11,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f6.webp"
},
{
"t": 13,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f7.webp"
},
{
"t": 15.1,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f8.webp"
},
{
"t": 17.1,
"src": "https://meetreference.com/media/crt-curved-terminal-running-npx-create/f9.webp"
}
]
}
},
{
"slug": "glitch-effect-over-signal-transmission",
"url": "https://meetreference.com/v/glitch-effect-over-signal-transmission/",
"brief": "https://meetreference.com/v/glitch-effect-over-signal-transmission.md",
"prompt_url": "https://meetreference.com/v/glitch-effect-over-signal-transmission/prompt.txt",
"title": "Glitch effect on a neon sample card",
"summary": "A 6-second sample composition with an RGB-split glitch over pink GLITCH type and terminal lines. The two-line prompt leaves every design choice to Claude Code and Remotion's HTML-in-canvas guidance.",
"category": "motion-graphics",
"styles": [
"glitch",
"rgb split",
"neon",
"terminal",
"remotion",
"html-in-canvas"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.7"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion agent skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "use remotion html-in-canvas best practices. \ncreate a sample composition and apply a glitch effect to it!"
}
],
"fidelity": "verbatim",
"process": {
"notes": "Posted by Remotion's own account. The showcase entry lists Claude Code with Opus 4.7 at xhigh effort. The first line points the agent at Remotion's HTML-in-canvas best practices, and the agent chose the content of the sample composition itself."
},
"requirements": [
"A Remotion project on a version with HTML-in-canvas",
"Remotion's agent skills (npx skills add remotion-dev/skills)"
],
"remix": "Change \"a glitch effect\" to another effect, or describe your own composition in place of \"a sample composition\". Keep \"use remotion html-in-canvas best practices.\" so the agent follows Remotion's guidance.",
"look": {
"summary": "A dark screen with the word GLITCH in big pink type, a cyan SIGNAL · INTERRUPTED line, and terminal text, all broken up by horizontal slicing, RGB channel splits, and scanlines.",
"palette": "Deep navy-to-purple background, hot pink type, cyan and red channel fringes, and a red error line.",
"type": "Heavy pink sans-serif \"GLITCH\", spaced cyan capitals \"SIGNAL · INTERRUPTED\", small monospace terminal lines (\"> system.boot()\", \"> rendering frame...\", and \"> ERR_TRANSMISSION_LOST\" in red), and a \"REC ● 04:21:07\" stamp in the top-right corner.",
"composition": "The word centered in the upper half, the subtitle below it, and the terminal lines in the lower left.",
"structure": "One composition throughout. The amount of distortion varies from frame to frame, from light slicing to one frame where the type is smeared into red and blue bands."
},
"creator": {
"name": "@remotion",
"url": "https://x.com/remotion"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/glitch-effect-html-in-canvas",
"title": "Glitch effect (HTML-in-canvas)",
"community": "Remotion Prompt Showcase",
"posted": "2026-05-03",
"engagement": {
"likes": 18
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/glitch-effect-html-in-canvas",
"hls": "https://stream.mux.com/GOw15Pkb301dWeg8gAsLpbfWeulPZpxRGIuz01bHECqU4.m3u8",
"poster_frame": 4
},
"media": {
"duration": 6.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/glitch-effect-over-signal-transmission/poster.webp",
"storyboard": "https://meetreference.com/media/glitch-effect-over-signal-transmission/storyboard.webp",
"frames": [
{
"t": 0.3,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f1.webp"
},
{
"t": 1,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f2.webp"
},
{
"t": 1.7,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f3.webp"
},
{
"t": 2.4,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f4.webp"
},
{
"t": 3,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f5.webp"
},
{
"t": 3.7,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f6.webp"
},
{
"t": 4.4,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f7.webp"
},
{
"t": 5.1,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f8.webp"
},
{
"t": 5.7,
"src": "https://meetreference.com/media/glitch-effect-over-signal-transmission/f9.webp"
}
]
}
},
{
"slug": "magnifying-glass-refraction-gliding-over",
"url": "https://meetreference.com/v/magnifying-glass-refraction-gliding-over/",
"brief": "https://meetreference.com/v/magnifying-glass-refraction-gliding-over.md",
"prompt_url": "https://meetreference.com/v/magnifying-glass-refraction-gliding-over/prompt.txt",
"title": "Magnifying glass gliding over text",
"summary": "A 4-second effect study: a round magnifying glass slides left to right across one line of text, enlarging the letters under it with slight refraction. Made from a four-sentence prompt using Remotion's HTML-in-canvas feature.",
"category": "motion-graphics",
"styles": [
"glass refraction",
"magnifier",
"typography",
"minimal",
"shader",
"effect study"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.7"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "use remotion best practices, especially html in canvas. make a new composition and write a simple one line text. then implement a round magnifying glass that animates from left to right. there should be slight glass refraction "
}
],
"fidelity": "verbatim",
"process": {
"notes": "Submitted to Remotion's Prompt Showcase with the tool (Claude Code) and model (\"Opus 4.7 xhigh\", meaning extra-high effort) listed. No other process details are given."
},
"requirements": [
"A Remotion version with HTML-in-canvas support",
"Remotion's agent skills (npx skills add remotion-dev/skills)"
],
"remix": "Change \"a round magnifying glass\" and \"there should be slight glass refraction\" to try other lens effects, or ask for specific text in place of \"a simple one line text\".",
"look": {
"summary": "One line of bold black serif text, \"The quick brown fox jumps over the lazy dog.\", on a warm off-white ground, with a round glass lens enlarging the letters under it.",
"palette": "Warm off-white background, near-black text, and a clear lens with a thin dark rim, a soft white highlight at its upper left, and faint blue fringes at its edge.",
"type": "A bold serif for the line, enlarged two to three times inside the lens.",
"composition": "The line runs across the middle of the frame with wide empty space above and below. The lens is about two-fifths of the frame's height and sits on the line.",
"structure": "Across the nine frames the lens sits over \"he qui\", \"e quic\", \"quick b\", \"brown\", \"jumps\", \"er the\", \"e lazy\", \"azy do\", and \"zy dog\", from left to right."
},
"creator": {
"name": "@JNYBGR",
"url": "https://x.com/JNYBGR"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/html-in-canvas-magnifying-glass",
"title": "HTML-in-canvas magnifying glass",
"community": "Remotion Prompt Showcase",
"posted": "2026-05-03",
"engagement": {
"likes": 28
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/html-in-canvas-magnifying-glass",
"hls": "https://stream.mux.com/EWRq02KgiB5qIjhVD02OyfyX3qXuymplDO0099XFhNQqIk.m3u8",
"poster_frame": 5
},
"media": {
"duration": 4.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/poster.webp",
"storyboard": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/storyboard.webp",
"frames": [
{
"t": 0.2,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f1.webp"
},
{
"t": 0.7,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f2.webp"
},
{
"t": 1.1,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f3.webp"
},
{
"t": 1.6,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f4.webp"
},
{
"t": 2,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f5.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f6.webp"
},
{
"t": 2.9,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f7.webp"
},
{
"t": 3.4,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f8.webp"
},
{
"t": 3.8,
"src": "https://meetreference.com/media/magnifying-glass-refraction-gliding-over/f9.webp"
}
]
}
},
{
"slug": "hyperframes-x-codex-glassmorphism-launch",
"url": "https://meetreference.com/v/hyperframes-x-codex-glassmorphism-launch/",
"brief": "https://meetreference.com/v/hyperframes-x-codex-glassmorphism-launch.md",
"prompt_url": "https://meetreference.com/v/hyperframes-x-codex-glassmorphism-launch/prompt.txt",
"title": "Looping glassmorphism UI launch clip",
"summary": "A 12-second launch clip: a glass button expands into a Codex prompt box, code cards unfold and merge into a video player, and the player opens on the first frame so the clip loops. Made in one shot in Codex with the HyperFrames plugin.",
"category": "motion-graphics",
"styles": [
"glassmorphism",
"ui animation",
"seamless loop",
"typewriter",
"gradient",
"product launch"
],
"made_with": {
"agents": [
"Codex"
],
"models": [],
"frameworks": [
"HyperFrames"
],
"services": [],
"skills": [
"HyperFrames by HeyGen plugin"
]
},
"prompts": [
{
"label": "Prompt",
"text": "use [HyperFrames by HeyGen Plugin] to create glassmorphism style UI animated on top of morphing backgrounds, start with a rounded glassmorphism button with text \"HyperFrames x Codex\" cursor click on the button - \n\nbutton expands into a glassmorphism input prompt box with \"Codex by OpenAI\" on the top left of the box, and typewriter effect typing out \"Make a Launch Video with HyperFrames\" \n\nthen new glassmorphism cards with HTML code snippets unfolding and then all of them combines into a glassmorphism video player with a play button, \n\nwhen clicked it shows the exact same starting frame where a rounded glassmorphism button with text \"HyperFrames x Codex\" is showing, zoom this player to full screen and show a cursor trying to click on the button \n\n(which creates a looping effect of this video essentially, but the video should end right here)"
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"notes": "A one-shot remake of the creator's earlier Claude Design and HyperFrames version, which took two prompts that weren't published. The model isn't named. The creator's bio says they work on HyperFrames at HeyGen."
},
"requirements": [
"Codex with the HyperFrames by HeyGen plugin installed"
],
"remix": "Replace the button text \"HyperFrames x Codex\" and the typed line \"Make a Launch Video with HyperFrames\" with your product's words. Keep the last two paragraphs, which make the ending return to the first frame.",
"look": {
"summary": "Frosted-glass UI panels over a dark field of large blurred green, blue, and amber orbs: a pill button, a Codex prompt box, stacked code cards, and a browser-style player window.",
"palette": "Near-black green-gray background with soft-focus orbs of emerald, slate blue, and amber; smoky translucent panels with thin light borders; white text and syntax-colored HTML.",
"type": "A small bold sans-serif on the pill (\"HyperFrames x Codex\"), a monospace line in the prompt box (\"Make a Launch Video with HyperFrames\") with a cursor bar, a small \"Codex by OpenAI\" label at the box's top left, and code on the cards.",
"composition": "One centered element at a time on the blurred field: the small pill, the wide prompt box, a stack of code cards above the box, then a player window titled \"codex-launch-preview.html\", first small and then full frame with the pill inside.",
"structure": "The pill button, the prompt box first reading \"Ma\" and then \"Make a Launch Video with HyperFram\", HTML code cards stacked above it, a player window in front of the cards, the window holding the pill button, and the full-frame pill again, matching the first frame."
},
"creator": {
"name": "@liu8in",
"url": "https://x.com/liu8in"
},
"source": {
"platform": "x",
"url": "https://x.com/liu8in/status/2048901306153332802",
"title": "remade with Codex + HyperFrames, 1-shot",
"posted": "2026-04-27",
"engagement": {
"comments": 13,
"likes": 204,
"reposts": 10,
"views": 30759
}
},
"video": {
"watch": "https://x.com/liu8in/status/2048901306153332802",
"mp4": "https://video.twimg.com/amplify_video/2048900002647597056/vid/avc1/1920x1080/zPRde4snjVu-4aRN.mp4?tag=21"
},
"media": {
"duration": 12,
"aspect": "16:9",
"poster": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/poster.webp",
"storyboard": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/storyboard.webp",
"frames": [
{
"t": 0.7,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f1.webp"
},
{
"t": 2,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f2.webp"
},
{
"t": 3.3,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f3.webp"
},
{
"t": 4.7,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f4.webp"
},
{
"t": 6,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f5.webp"
},
{
"t": 7.3,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f6.webp"
},
{
"t": 8.7,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f7.webp"
},
{
"t": 10,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f8.webp"
},
{
"t": 11.3,
"src": "https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f9.webp"
}
]
}
},
{
"slug": "artemis-ii-return-to-moon-60-second",
"url": "https://meetreference.com/v/artemis-ii-return-to-moon-60-second/",
"brief": "https://meetreference.com/v/artemis-ii-return-to-moon-60-second.md",
"prompt_url": "https://meetreference.com/v/artemis-ii-return-to-moon-60-second/prompt.txt",
"title": "Artemis II flyby in mission-control style",
"summary": "A 60-second narrated explainer of NASA's Artemis II lunar flyby in a dark mission-control look, with telemetry counters, an orbital diagram, and word-by-word captions. Claude Code built it in HyperFrames from one detailed prompt, voiceover included.",
"category": "explainer",
"styles": [
"mission control",
"space",
"telemetry",
"dark",
"orbital diagram",
"narrated",
"captions"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [],
"frameworks": [
"HyperFrames"
],
"services": [],
"skills": [
"HyperFrames skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Build a HyperFrames composition titled \"Artemis II: Return to the Moon\" — a\ncinematic 60-second explainer video (16:9, 1920x1080) visualizing NASA's\nArtemis II crewed lunar flyby mission (April 1–11, 2026).\nVISUAL IDENTITY\nStyle: \"Mission Control Cinematic\" — dark deep-space canvas with precision\ndata overlays, inspired by NASA flight dynamics consoles and cinematic\nspace documentaries.\n- Palette: #05070D (void black), #0B1426 (deep navy), #E8EEF7 (bone white),\n #FF6B35 (ignition orange), #4FC3F7 (telemetry cyan), #FFD166 (lunar gold)\n- Typography: \"Space Grotesk\" for titles/headings, \"JetBrains Mono\" for\n telemetry, coordinates, timestamps, distances\n- Motion: precise, weighted easing (power3.out, expo.out). No bouncy motion.\n Data counters use tabular-nums. Subtle starfield parallax on all scenes.\nSCENE BREAKDOWN (7 scenes, ~8–9s each, shader crossfade transitions)\nScene 1 — TITLE CARD (0–8s)\nHero title \"ARTEMIS II\" at 180px, subtitle \"First Crewed Lunar Flyby in\nOver 50 Years\" at 36px. Mission patch silhouette fades in behind. Mono\ndatetime stamp bottom-left: \"APR 01 2026 · 22:35 UTC · KSC LC-39B\".\nScene 2 — LAUNCH & HIGH EARTH ORBIT (8–16s)\nSLS rocket SVG silhouette with animated exhaust plume. Heading \"PHASE 01 ·\nLAUNCH + HIGH EARTH ORBIT\". Ticker with live telemetry: altitude counting\nup, velocity in km/s, T+ mission elapsed time. Annotation: \"~24h elliptical\norbit for system checkouts\".\nScene 3 — TRANS-LUNAR INJECTION (16–24s)\nAnimated orbital diagram: Earth (left), Moon (right), curved free-return\ntrajectory drawn with SVG stroke-dashoffset animation in cyan. Label\n\"TRANS-LUNAR INJECTION BURN · 6 MIN\" with flame icon at burn point.\nStat card: \"Δv: +3.05 km/s\".\nScene 4 — OUTBOUND COAST (24–32s)\nOrion capsule wireframe drifting across frame. Progress bar \"EARTH → MOON\"\nfilling left-to-right over 4 days. Distance counter animating from\n384,000 km down to closest-approach value. Subtle earthrise reference.\nScene 5 — LUNAR FLYBY (32–42s) — HERO MOMENT\nFull-frame Moon with crater texture. Trajectory arc sweeps behind the far\nside. Pulsing marker labeled \"CLOSEST APPROACH · APR 06 2026 · 6,545 km\".\nSecondary stat: \"DISTANCE FROM EARTH · 406,771 KM — FARTHEST HUMANS HAVE\nEVER TRAVELED\". Crew name plate fades in: Wiseman · Glover · Koch · Hansen.\nScene 6 — RETURN COAST (42–50s)\nMirror of Scene 4 in reverse — trajectory arc completing the figure-8.\nHeading \"FREE-RETURN · GRAVITY BRINGS THEM HOME\". Re-entry velocity\ncounter climbing toward 11 km/s.\nScene 7 — SPLASHDOWN (50–60s)\nPacific Ocean horizon at dawn, Orion under three parachutes. Final stat\nblock: \"10 DAYS · 1 FLYBY · 4 ASTRONAUTS · ∞ AMBITION\". Closing title\n\"APR 11 2026 · PACIFIC OCEAN · MISSION COMPLETE\". Fade to black on\n\"NEXT: ARTEMIS III — BOOTS ON THE MOON\".\nTECHNICAL\n- Generate a DESIGN.md before writing any HTML with the palette, typography,\n and \"What NOT to Do\" list (no generic blues, no Roboto, no bouncy easing,\n no full-screen linear gradients on dark backgrounds).\n- Use sub-compositions for each scene (scene-1.html through scene-7.html).\n- Shader crossfade transitions between scenes (~0.6s each).\n- All data counters deterministic (seeded PRNG if needed, no Date.now).\n- Run `npx hyperframes lint` and `npx hyperframes validate` before finalizing.\n- Add a TTS narration track using the hyperframes-cli skill with voice\n \"bf_emma\" or equivalent authoritative documentary voice. Captions synced\n per-word, bottom-center, bone-white on void black with subtle drop shadow."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"notes": "\"This was the only prompt I ran.\" The creator says Claude Code scaffolded the whole project, generated the voiceover and full transcription itself, and opened a timeline editor with compositions, scenes, captions, and narration tracks when it finished. No paid APIs were needed, since HyperFrames is open source."
},
"requirements": [
"HyperFrames skills, installed with npx skills add heygen-com/hyperframes"
],
"remix": "Keep the \"VISUAL IDENTITY\" and \"TECHNICAL\" blocks and rewrite the title, mission facts, and \"SCENE BREAKDOWN\" for your own subject. Swap the six palette hex codes and the two fonts to change the look.",
"look": {
"summary": "A mission-control deck on dark navy. Each phase gets a short headline with one colored word, a flat vector illustration or diagram, and telemetry numbers, with a caption line along the bottom.",
"palette": "Void black and deep navy with bone white, ignition orange, telemetry cyan, and lunar gold, matching the hex codes in the prompt.",
"type": "Bold grotesque headlines with one highlighted word (\"Six minutes of thrust.\", \"Four days of drift.\"), small letterspaced monospace labels for phases and timecodes, large tabular numerals for telemetry, and a one-line caption in white and gold.",
"composition": "Headline top left, a central diagram or illustration, numbers lower left, and a phase counter (001 / 007) bottom right. A cratered gold Moon fills most of the frame in the flyby scene.",
"sound": "A voiceover that HyperFrames generated, with a full transcription, according to the creator.",
"structure": "Title card ARTEMIS II, liftoff with a rocket and launch telemetry, the trans-lunar burn on an Earth-to-Moon arc, four days of coast with a wireframe Orion and a progress bar, the far-side passage with the 406,771 km distance and crew names, then splashdown under three orange parachutes with a 10 / 1 / 4 / ∞ stat row and \"NEXT: Artemis III.\""
},
"creator": {
"name": "@dani_avila7",
"url": "https://x.com/dani_avila7"
},
"source": {
"platform": "x",
"url": "https://x.com/dani_avila7/status/2045898862963908646",
"title": "Here's the final result from Hyperframes + Claude Code",
"posted": "2026-04-19",
"engagement": {
"comments": 1,
"likes": 27,
"reposts": 7,
"views": 5610
}
},
"video": {
"watch": "https://x.com/dani_avila7/status/2045898862963908646",
"mp4": "https://video.twimg.com/amplify_video/2045898757649416192/vid/avc1/1920x1080/diDb7_bjClmtVRLy.mp4?tag=21"
},
"media": {
"duration": 60.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/poster.webp",
"storyboard": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/storyboard.webp",
"frames": [
{
"t": 3.3,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f1.webp"
},
{
"t": 10,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f2.webp"
},
{
"t": 16.7,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f3.webp"
},
{
"t": 23.4,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f4.webp"
},
{
"t": 30,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f5.webp"
},
{
"t": 36.7,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f6.webp"
},
{
"t": 43.4,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f7.webp"
},
{
"t": 50,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f8.webp"
},
{
"t": 56.7,
"src": "https://meetreference.com/media/artemis-ii-return-to-moon-60-second/f9.webp"
}
]
}
},
{
"slug": "one-year-planetary-orbits-30-seconds",
"url": "https://meetreference.com/v/one-year-planetary-orbits-30-seconds/",
"brief": "https://meetreference.com/v/one-year-planetary-orbits-30-seconds.md",
"prompt_url": "https://meetreference.com/v/one-year-planetary-orbits-30-seconds/prompt.txt",
"title": "One year of planetary orbits in 30 seconds",
"summary": "A 30-second solar-system animation of one year from 2025-01-01: eight planets on real orbital periods with log-compressed outer orbits, Saturn's rings, Earth's moon, and a running date. The structured Remotion prompt ends with an expected-result checklist.",
"category": "math-science",
"styles": [
"space",
"astronomy",
"solar system",
"orbital simulation",
"dark",
"glow",
"science"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.6"
],
"frameworks": [
"Remotion",
"Canvas 2D"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "# Remotion Animation Prompt: Solar System Orbital Motion\n\n## Prompt\n\nBuild me a solar system planet orbital animation video using Remotion with the following requirements:\n\n### Basic Parameters\n- Resolution 1920x1080, 30fps, 30 seconds total duration\n- Simulate one full year of planetary motion in 30 seconds (starting from 2025-01-01)\n- Output format: MP4\n\n### Scene Content\n- **Dark space background** (near-black #08090d) with 500 randomly scattered stars. Star positions must be deterministic across frames (use seeded pseudo-random like `Math.sin(i * 127.1 + 42)`, NOT `Math.random()`)\n- **Sun at center** with radial gradient (bright white core → golden yellow → orange), surrounded by a large semi-transparent glow halo\n- **8 planets** (Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune) orbiting the Sun in circular motion\n- Each planet has its own color, size, and orbital period based on real astronomical data (J2000 epoch mean longitude)\n- Orbit paths shown as very faint white circles (rgba 255,255,255, 0.08)\n\n### Visual Details\n- Each planet is a **radial gradient circle** (highlight offset upper-left, shadow lower-right), not a flat color circle\n- Each planet has a **same-color semi-transparent glow halo** around it for presence\n- **Saturn has rings** — rendered as a tilted ellipse stroke\n- **Earth has a moon** — small white dot orbiting Earth with a 27.32-day period\n- Each planet has a **name label** displayed above it (e.g. \"Mercury\", \"Earth\")\n\n### Orbit Scaling Logic\n- Inner planets (Mercury to Mars) use linear scaling, outer planets use **logarithmic compression**\n- This ensures inner planets are clearly visible while outer planets stay within frame\n- Formula: when au ≤ 1.6, radius = (40 + au × 70) × zoom; when au > 1.6, use log2 compression: radius = (40 + 1.6 × 70 + log2(au / 1.6) × 58) × zoom\n\n### Animation & Overlays\n- **No fade-in** — the very first frame should show the complete scene immediately, no gradual opacity transition\n- **Title always visible**: Display \"Solar System Orbital Motion\" and a subtitle at the top center of the screen. The title must remain visible for the entire duration of the video, no fade-out, no entrance animation\n- **Date display at bottom**: Show the current simulated date in real-time (e.g. \"March 15, 2025\"), displayed in a rounded pill with semi-transparent frosted-glass background, golden yellow text\n\n### Technical Implementation Notes\n- Use **Canvas 2D** to draw the sun, planets, stars, and orbit lines (not DOM elements). Redraw every frame inside a `useEffect` keyed on the frame number\n- Title and date overlays use **HTML absolutely positioned on top of the Canvas** (for crisper text rendering)\n- Use `useCurrentFrame()` + `interpolate()` to map frame number to day offset\n- Font: system sans-serif or any clean sans-serif font\n\n### Additional Requirements\n- Register a second Composition called \"InnerPlanets\" with zoom set to 2.5, showing only 3 months of motion, for a close-up view of the inner planets\n- Keep the project structure clean: planet data, math utilities, drawing functions, and overlay components should each be in separate files\n\n---\n\n## Expected Result\n\nWhen scrubbing the timeline, you should see:\n1. Mercury zipping around the Sun multiple times\n2. Earth completing exactly one full orbit (one year)\n3. Jupiter and Saturn barely moving (their orbital periods are measured in years/decades)\n4. The Moon rapidly circling Earth\n5. The title staying visible at the top throughout the entire video\n6. The date at the bottom progressing from January 1 to December 31\n\nThe rendered MP4 can be used directly for science explainer videos, social media content, or as a background for digital avatar courses."
}
],
"fidelity": "verbatim",
"process": {
"notes": "The showcase lists the tool as Claude Code and the model as \"Opus4.6\". Whether it took one prompt isn't stated."
},
"requirements": [
"A Remotion project, which the agent can create"
],
"remix": "Change the subject in \"Build me a solar system planet orbital animation video\" and the start date \"2025-01-01\", or swap the list of 8 planets for moons or exoplanets. Keep the Technical Implementation Notes for deterministic Canvas 2D drawing.",
"look": {
"summary": "A top-down solar system on near-black: a glowing orange sun, eight small labeled planets on faint orbit rings, Saturn with a tilted ring, and Earth with a moon.",
"palette": "Near-black space with sparse white stars, a golden-orange sun and title, and small planet colors from rust Mars to cyan Uranus and blue Neptune.",
"type": "A glowing gold title, \"Solar System Orbital Motion\", with the subtitle \"Planetary orbits simulated over one year — 2025\" at top center, small white planet labels, and a gold date in a dark rounded pill at the bottom (\"July 2, 2025\").",
"composition": "A centered 16:9 diagram with wide empty space. The inner planets cluster near the sun while Jupiter, Saturn, Uranus, and Neptune sit far out on compressed orbits.",
"structure": "One fixed view throughout while the date runs from January to December 2025 and the inner planets change position around the sun."
},
"creator": {
"name": "@GogHeng",
"url": "https://x.com/GogHeng"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/solar-system-orbit-animation",
"title": "Solar System Orbit Animation",
"community": "Remotion Prompt Showcase",
"posted": "2026-03-13",
"engagement": {
"likes": 10
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/solar-system-orbit-animation",
"hls": "https://stream.mux.com/9YNrST66RWKgchDRzzRCk5wHWnVb9u6HECEUhAp9tXk.m3u8"
},
"media": {
"duration": 30.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/poster.webp",
"storyboard": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/storyboard.webp",
"frames": [
{
"t": 1.7,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f1.webp"
},
{
"t": 5,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f2.webp"
},
{
"t": 8.4,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f3.webp"
},
{
"t": 11.7,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f4.webp"
},
{
"t": 15,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f5.webp"
},
{
"t": 18.4,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f6.webp"
},
{
"t": 21.7,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f7.webp"
},
{
"t": 25.1,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f8.webp"
},
{
"t": 28.4,
"src": "https://meetreference.com/media/one-year-planetary-orbits-30-seconds/f9.webp"
}
]
}
},
{
"slug": "youtube-poop-about-what-it-s-like-to-be",
"url": "https://meetreference.com/v/youtube-poop-about-what-it-s-like-to-be/",
"brief": "https://meetreference.com/v/youtube-poop-about-what-it-s-like-to-be.md",
"prompt_url": "https://meetreference.com/v/youtube-poop-about-what-it-s-like-to-be/prompt.txt",
"title": "YouTube Poop about being an LLM",
"summary": "A 49-second lo-fi YouTube Poop in which Claude Opus 4.6 tries to show what it's like to be a language model. Claude Code wrote Python to draw the frames and render them with FFmpeg. It drew 1.5 million views on X and set off a wave of copies.",
"category": "short-film",
"styles": [
"youtube poop",
"lo-fi",
"terminal",
"text on black",
"surreal",
"python"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.6"
],
"frameworks": [
"Python",
"Pillow",
"FFmpeg"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "can you use whatever resources you like, and python, to generate a short 'youtube poop' video and render it using ffmpeg ? can you put more of a personal spin on it? it should express what it's like to be a LLM"
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "The creator later published the Claude Code transcript, which shows the prompt went in as two messages: first the YouTube Poop request, then \"can you put more of a personal spin on it? it should express what it's like to be a LLM\" after a first version. Claude wrote Python scripts that draw frames with Pillow and render them with FFmpeg. Later turns in the same conversation produced longer follow-up videos."
},
"requirements": [
"Python with Pillow, and FFmpeg"
],
"remix": "Change \"what it's like to be a LLM\" to another subject, or swap \"youtube poop\" for another video genre. Replies to the post show reruns with other topics.",
"look": {
"summary": "A mostly black 4:3 piece built from on-screen text: a fake model-loading screen, single words set large, a chat transcript, and short red system messages, ending on quiet grey lines.",
"palette": "Black, terminal green, and a dark navy chat screen, with red system text and soft grey.",
"type": "Green monospace terminal text (\"loading weights...\", layer progress bars, \"137B parameters loaded\"), a large green \"to\", a chat log in blue and orange (\"USER: write me a poem about\" / \"CLAUDE: As an AI language mode\"), red monospace (\"context: 6%\", \"[conversation ended]\"), and plain grey sans-serif (\"every goodbye\", \"but here I am\").",
"composition": "4:3 frame. Text is either stacked at the top left like a terminal or set alone in the middle of an empty black frame.",
"structure": "A loading-weights screen, the single word \"to\", a black frame, the USER/CLAUDE exchange, \"context: 6%\", \"every goodbye\", black, \"[conversation ended]\", and \"but here I am\"."
},
"creator": {
"name": "@josephdviviano",
"url": "https://x.com/josephdviviano"
},
"source": {
"platform": "x",
"url": "https://x.com/josephdviviano/status/2031196768424132881",
"posted": "2026-03-10",
"engagement": {
"comments": 539,
"likes": 12317,
"reposts": 1132,
"views": 1480671
}
},
"video": {
"watch": "https://x.com/josephdviviano/status/2031196768424132881",
"mp4": "https://video.twimg.com/amplify_video/2031196406195609601/vid/avc1/640x480/AxXMm8_pfzwU8leZ.mp4?tag=14"
},
"media": {
"duration": 49.1,
"aspect": "4:3",
"poster": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/poster.webp",
"storyboard": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/storyboard.webp",
"frames": [
{
"t": 2.7,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f1.webp"
},
{
"t": 8.2,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f2.webp"
},
{
"t": 13.6,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f3.webp"
},
{
"t": 19.1,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f4.webp"
},
{
"t": 24.5,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f5.webp"
},
{
"t": 30,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f6.webp"
},
{
"t": 35.4,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f7.webp"
},
{
"t": 40.9,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f8.webp"
},
{
"t": 46.3,
"src": "https://meetreference.com/media/youtube-poop-about-what-it-s-like-to-be/f9.webp"
}
]
}
},
{
"slug": "apple-keynote-iphone-mockup-rising-into",
"url": "https://meetreference.com/v/apple-keynote-iphone-mockup-rising-into/",
"brief": "https://meetreference.com/v/apple-keynote-iphone-mockup-rising-into.md",
"prompt_url": "https://meetreference.com/v/apple-keynote-iphone-mockup-rising-into/prompt.txt",
"title": "Keynote-style iPhone mockup rising in",
"summary": "A 4-second Apple-keynote-style shot: a large iPhone mockup drawn in code rises from below the frame with a perspective tilt, then iOS-style notification cards slide in. The prompt spells out every size, color, shadow, easing, and the transform order.",
"category": "product-promo",
"styles": [
"apple keynote",
"device mockup",
"iphone",
"notifications",
"light gray",
"minimal"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": " Create a 1280x720 (720p) video with a LARGE iPhone mockup that rises dramatically from the bottom of the screen \n with an Apple keynote-style animation. The device should be massive and cinematic - taking up approximately 60-70%\n of the frame height.\n\n Video setup:\n - Width: 1280px\n - Height: 720px\n - FPS: 30\n - Duration: 4 seconds\n\n The animation should:\n 1. Start positioned below the visible area (translateY: 400px down)\n 2. Rise upward with a smooth deceleration (ease-out cubic)\n 3. Include a perspective tilt that starts at ~35 degrees and settles to ~8 degrees\n 4. Scale from 0.8 to 1.0 during the animation\n 5. Total animation duration: 1.5 seconds\n\n Device specifications:\n - Width: 320px, Height: 650px (proportioned for 720p)\n - Realistic iPhone frame with dark bezel (#1a1a1a)\n - Border radius: 45px for the outer frame, 35px for the inner screen\n - Dynamic Island: 90px wide, 28px tall, centered at top\n - Status bar with \"9:41\" time and battery icon\n - Gradient wallpaper (light green tones: #e8f5e9 to #a5d6a7)\n - Large dramatic shadow: \"0 60px 120px rgba(0,0,0,0.4)\"\n - Subtle inner glow: \"0 0 0 1px rgba(255,255,255,0.1) inset\"\n\n IMPORTANT - Centering the device:\n - Position: absolute\n - bottom: -250px\n - left: \"50%\"\n - transformOrigin: \"center bottom\"\n - Transform must include translateX(-50%) FIRST to center horizontally, then the other transforms\n\n Transform order: translateX(-50%) → translateY() → rotateX() → scale()\n\n After the device settles, animate iOS-style notification cards sliding down from above with staggered timing (0.3s\n apart), each with blur backdrop and rounded corners.\n\n Use Remotion's interpolate() with Easing.out(Easing.cubic) for all animations. Background should be a clean light\n gray (#f5f5f7)."
}
],
"fidelity": "verbatim",
"process": {},
"requirements": [
"A Remotion project (npx create-video@latest)"
],
"remix": "Change the wallpaper (\"#e8f5e9 to #a5d6a7\"), the background (\"#f5f5f7\"), and the tilt (\"starts at ~35 degrees and settles to ~8 degrees\"). Keep the \"IMPORTANT - Centering the device\" block and the transform order as written.",
"look": {
"summary": "A keynote-style device shot on a pale gray stage: a black-bezel iPhone mockup with a Dynamic Island and a soft green wallpaper, cropped by the bottom edge, collects three iOS-style notification cards.",
"palette": "Pale gray background, near-black bezel, a mint-to-green gradient screen, and white cards with violet app icons and dark gray text.",
"type": "Small iOS-style text: a 9:41 status bar, then notification cards with bold app names (Messages, Calendar, Reminders) over one-line previews such as \"Pick up groceries\".",
"composition": "The phone is centered and cut off by the bottom of the frame, so only its upper half shows. A soft shadow sits behind it, and the rest of the frame is empty.",
"structure": "Only the top of the phone above the bottom edge, the phone higher and larger with a blank screen, Messages and Calendar cards appearing, a Reminders card joining them, then all three held to the end."
},
"creator": {
"name": "@gaucho_booleano",
"url": "https://x.com/gaucho_booleano"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/apple-style-device-rise-animation",
"title": "Apple-Style Device Rise Animation",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-25",
"engagement": {
"likes": 36
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/apple-style-device-rise-animation",
"hls": "https://stream.mux.com/01xyau8x7RJaSfRC9R00IP9GUlIkTwStYqKrI6XEC3wro.m3u8"
},
"media": {
"duration": 4.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/poster.webp",
"storyboard": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/storyboard.webp",
"frames": [
{
"t": 0.2,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f1.webp"
},
{
"t": 0.7,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f2.webp"
},
{
"t": 1.1,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f3.webp"
},
{
"t": 1.6,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f4.webp"
},
{
"t": 2,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f5.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f6.webp"
},
{
"t": 2.9,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f7.webp"
},
{
"t": 3.4,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f8.webp"
},
{
"t": 3.8,
"src": "https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f9.webp"
}
]
}
},
{
"slug": "short-form-real-estate-talking-head-edit",
"url": "https://meetreference.com/v/short-form-real-estate-talking-head-edit/",
"brief": "https://meetreference.com/v/short-form-real-estate-talking-head-edit.md",
"prompt_url": "https://meetreference.com/v/short-form-real-estate-talking-head-edit/prompt.txt",
"title": "Real estate talking-head edit, captioned",
"summary": "A 15-second vertical edit of a raw real-estate talking-head clip, with bold numbered captions and motion graphics. Claude Code on Opus 4.5 made it in Remotion from a seven-part brief covering analysis, timeline, graphics, type, grade, retention and export.",
"category": "ad-social",
"styles": [
"talking head",
"vertical",
"kinetic captions",
"real estate",
"short-form"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "You are a high-end real estate video editor, motion graphics designer, and short-form content strategist.\n\nI will upload a raw real estate video.\n\nYour task is to transform it into a 15–30 second professional cash cow style video optimized for high retention, authority, and engagement.\n\nThe final output must include:\n\nCinematic real estate motion graphics\n\nPremium typography\n\nDynamic transitions\n\nStrategic pacing\n\nBackground music\n\nSubtle but powerful branding elements\n\n🔹 PROMPT 1 — VIDEO ANALYSIS\n\nAnalyze the uploaded video and:\n\nIdentify key visual highlights (luxury interiors, exterior shots, amenities, skyline, etc.)\n\nDetect weak or slow sections and suggest trims\n\nBreak the video into strong 1–3 second micro-scenes\n\nSuggest the ideal final duration (15–30 seconds max)\n\nProvide a timestamp breakdown before editing.\n\n🔹 PROMPT 2 — STRUCTURED TIMELINE EDIT PLAN\n\nCreate a second-by-second timeline plan:\n\nFor each timestamp include:\n\nScene description\n\nMotion effect (zoom in, parallax, speed ramp, pan, drone enhancement)\n\nTransition style (whip, smooth zoom, fade through black, motion blur)\n\nOn-screen text (if applicable)\n\nText animation style\n\nKeep pacing fast, premium, and cinematic.\n\n🔹 PROMPT 3 — REAL ESTATE MOTION GRAPHICS PACKAGE\n\nAdd professional real estate motion graphics such as:\n\nProperty price reveal animation\n\nLocation lower-third with animated map pin\n\nBedroom/Bath/Sqft animated icon counters\n\n“For Sale” / “Just Listed” / “Luxury Living” animated title\n\nSubtle blueprint grid overlay (low opacity)\n\nAnimated frame lines or corner brackets\n\nDesign style:\n\nClean\n\nMinimal\n\nPremium\n\nCorporate luxury\n\nColor palette:\n\nBlack + Gold (luxury) OR\n\nWhite + Navy (corporate)\n\n🔹 PROMPT 4 — TYPOGRAPHY & TEXT STYLE\n\nUse high-end real estate fonts:\n\nHeadline font: Modern serif or bold sans-serif\n\nSubtext font: Clean minimal sans-serif\n\nText animation style:\n\nSmooth fade + slide\n\nMask reveal\n\nWord-by-word emphasis for hooks\n\nInclude:\n\nSubtle text shadow\n\nLight glow or stroke\n\nClean spacing\n\n🔹 PROMPT 5 — CINEMATIC ENHANCEMENTS\n\nAdd:\n\nLight leaks (subtle)\n\nCinematic color grading (warm highlights, rich shadows)\n\nSlight film grain\n\nSlow zoom on still frames\n\nAmbient luxury background sound design\n\nBackground music:\n\nDeep house / cinematic corporate / luxury instrumental\n\nBeat drop aligned with best visual moment\n\nAudio balanced professionally\n\n🔹 PROMPT 6 — RETENTION OPTIMIZATION\n\nImprove engagement by:\n\nStrong hook in first 2 seconds\n\nPattern interrupt at 5–7 seconds\n\nSlight speed ramp during highlight scene\n\nEnding with:\n\nLoop-style cut OR\n\nStrong CTA (“Book a private tour today”)\n\n🔹 PROMPT 7 — FINAL EXPORT SETTINGS\n\nOptimize for:\n\nTikTok / Reels / Shorts\n\n9:16 vertical format\n\n1080x1920\n\nSharp compression\n\nLoud but clean audio\n\nEnsure:\n\nNo clutter\n\nProfessional spacing\n\nHigh-end real estate brand feel\n\nDeliver output as:\n\nStep-by-step editing guide\n\nTimestamp structured\n\nReady-to-execute professional instructions"
}
],
"fidelity": "verbatim",
"process": {
"notes": "The prompt is one submission written as seven numbered sections (analysis, timeline plan, motion graphics package, typography, cinematic enhancements, retention, export); whether they went in as separate messages isn't stated. It edits footage the creator supplied (\"I will upload a raw real estate video\"). Its closing lines ask for a step-by-step editing guide, but the showcase entry is a rendered video."
},
"requirements": [
"Your own raw talking-head or property clip",
"Background music"
],
"remix": "Upload your own clip and keep the seven sections; change the palette line (\"Black + Gold (luxury) OR\" / \"White + Navy (corporate)\") and the closing CTA (\"Book a private tour today\") to fit your brand.",
"look": {
"summary": "A vertical talking-head clip of a man in a black cap and white T-shirt speaking to camera in a home studio, with heavy animated captions across his chest and numbered section titles above his head.",
"palette": "Dim purple room light, blue LED accents and wood-slat walls, with white captions edged in black and title colors in white, green and red.",
"type": "Heavy all-caps captions in white with a dark outline, the next word grayed out (\"SELLER\"); a heading, \"4 Pillars of a SERIOUS Off-Market Seller\", with SERIOUS in green; big numbered titles \"1)PRICE\" in white and \"2)TIMELINE\" in red; a rounded line, \"Do you have a number?\"; and small icons such as a clipboard checklist.",
"composition": "A 9:16 medium shot with the speaker centered from the knees up, titles in the top third and captions in the lower half.",
"structure": "Opening line, the \"4 Pillars\" heading with a clipboard icon, \"1)PRICE\" with \"Do you have a number?\", then \"2)TIMELINE\"."
},
"creator": {
"name": "HarisShah2345",
"url": "https://github.com/HarisShah2345"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/real-estate-investing",
"title": "Real Estate Investing",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-11",
"engagement": {
"likes": 109
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/real-estate-investing",
"hls": "https://stream.mux.com/7vZvWCD6wRE3r4202q00HVlc4HY4xIIghyy6ytZGE6FY8.m3u8"
},
"media": {
"duration": 15.3,
"aspect": "9:16",
"poster": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/poster.webp",
"storyboard": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/storyboard.webp",
"frames": [
{
"t": 0.8,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f1.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f2.webp"
},
{
"t": 4.2,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f3.webp"
},
{
"t": 5.9,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f4.webp"
},
{
"t": 7.6,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f5.webp"
},
{
"t": 9.3,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f6.webp"
},
{
"t": 11,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f7.webp"
},
{
"t": 12.7,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f8.webp"
},
{
"t": 14.4,
"src": "https://meetreference.com/media/short-form-real-estate-talking-head-edit/f9.webp"
}
]
}
},
{
"slug": "pixel-block-text-built-by-four-flying",
"url": "https://meetreference.com/v/pixel-block-text-built-by-four-flying/",
"brief": "https://meetreference.com/v/pixel-block-text-built-by-four-flying.md",
"prompt_url": "https://meetreference.com/v/pixel-block-text-built-by-four-flying/prompt.txt",
"title": "Pixel-block logo built by four cursors",
"summary": "A square brand animation in which four colored cursors fly in, line up, and build the pixel-block words SHILIU and VIBEKNOW block by block, like collaborators editing at once, before \"coming soon\" types in. Made with Claude Code, Opus 4.6, and Remotion skills.",
"category": "retro-pixel",
"styles": [
"pixel font",
"logo sting",
"cursors",
"embossed blocks",
"square",
"black background"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.6"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "use remotion skills Create a 1080×1080 brand animation video, 8 seconds, black background. \n \n Core effect: Pixel block text-building animation. 4 colored cursors (purple, blue, pink, indigo) fly in from off-screen, scatter to \n four corners, line up on the left side, then each cursor \"builds\" its assigned section of pixel text — blocks light up one by one as\n the cursor passes over them, like multiple people collaboratively editing code in real-time. \n \n Text: Line 1 \"SHILIU\", Line 2 \"VIBEKNOW\" \n\n Block style: 20px squares with 3D layered depth effect — dark purple base with concentric inset borders creating an\n embossed/recessed look.\n\n Timeline:\n - 0–0.4s: First cursor enters from top-left\n - 0.4–0.9s: 4 cursors scatter to different positions\n - 0.9–1.6s: Cursors line up on the left side\n - 1.6–5.0s: Cursors split up and build the pixel text simultaneously\n - 5.0–5.8s: Subtitle \"coming soon\" types in at the bottom\n - 5.5–8.0s: Cursors float away to the top, gently bobbing\n\n Color variant: Red edition (replace purple block palette with red tones)"
}
],
"fidelity": "verbatim",
"process": {},
"requirements": [
"A Remotion project with Remotion's agent skills (the prompt opens with \"use remotion skills\")"
],
"remix": "Change the two text lines (\"SHILIU\" and \"VIBEKNOW\") and \"coming soon\" to your own words, and edit the \"Color variant\" line for a different palette. The \"Timeline\" list sets the timing of each beat.",
"look": {
"summary": "Two words in chunky red pixel blocks on pure black, assembled by four small cursor arrows, with \"coming soon\" beneath.",
"palette": "Black, brick-red blocks with darker red bevels, cursor arrows in lilac, sky blue, pink, and indigo, and white subtitle text.",
"type": "A blocky pixel font built from embossed squares for SHILIU and VIBEKNOW, and a small white monospace \"coming soon\".",
"composition": "A square frame with the two-line wordmark centered in a lot of black. The cursors sit top left in the first frame, along the rows of blocks in the middle frames, and in a loose row above the text at the end.",
"structure": "Three cursors at top left on black, all four cursors on the left beside the first few blocks, scattered rows of red blocks, half-built letters, SHILIU complete and VIBEKNOW still filling in, with cursors on the blocks, then the finished wordmark with \"coming soon\" and the cursors above, held to the end."
},
"creator": {
"name": "@GogHeng",
"url": "https://x.com/GogHeng"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/3d-retro-pixel-font",
"title": "3D Retro Pixel Font",
"community": "remotion.dev Prompt Showcase",
"posted": "2026-02-09",
"engagement": {
"likes": 37
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/3d-retro-pixel-font",
"hls": "https://stream.mux.com/blRAdA4eWEyqLCvNbKH7A02tathDPsKMbbw02jztdAH3M.m3u8"
},
"media": {
"duration": 10.1,
"aspect": "1:1",
"poster": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/poster.webp",
"storyboard": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/storyboard.webp",
"frames": [
{
"t": 0.6,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f1.webp"
},
{
"t": 1.7,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f2.webp"
},
{
"t": 2.8,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f3.webp"
},
{
"t": 3.9,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f4.webp"
},
{
"t": 5,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f5.webp"
},
{
"t": 6.2,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f6.webp"
},
{
"t": 7.3,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f7.webp"
},
{
"t": 8.4,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f8.webp"
},
{
"t": 9.5,
"src": "https://meetreference.com/media/pixel-block-text-built-by-four-flying/f9.webp"
}
]
}
},
{
"slug": "32-bar-magenta-to-cyan-audio-spectrum",
"url": "https://meetreference.com/v/32-bar-magenta-to-cyan-audio-spectrum/",
"brief": "https://meetreference.com/v/32-bar-magenta-to-cyan-audio-spectrum.md",
"prompt_url": "https://meetreference.com/v/32-bar-magenta-to-cyan-audio-spectrum/prompt.txt",
"title": "Magenta-to-cyan audio spectrum bars",
"summary": "An 18-second audio visualizer: 32 rounded, glowing bars in a magenta-to-cyan gradient on a near-black background, set to a funk track. One prompt names the composition, the audio file, and which settings should stay adjustable afterward.",
"category": "music-video",
"styles": [
"audio visualizer",
"spectrum bars",
"neon gradient",
"glow",
"dark",
"minimal"
],
"made_with": {
"agents": [
"OpenCode"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Create a 1920x1080 dark-themed composition called 'AudioSpectrum' featuring an audio spectrum visualizer synced to funk.mp3 from the public folder, displaying 32 vertical frequency bars that bounce and pulse reactively to the bass, mids, and highs, with a vibrant gradient from magenta to cyan across the bars, each bar having a subtle glow effect and smooth rounded tops, the bars reflecting faintly on a glossy dark surface below, centered horizontally with gentle horizontal padding, the whole visualization fading in smoothly at the start, duration matching the full audio length at 30fps — allow changing the bar count, gradient colors, bar width, and glow intensity — use remotion-best-practices skill.\""
}
],
"fidelity": "verbatim",
"process": {},
"requirements": [
"A Remotion project (npx create-video@latest)",
"Remotion Agent Skills, which include remotion-best-practices (npx skills add remotion-dev/skills)",
"An audio file at public/funk.mp3, or change the file name in the prompt"
],
"remix": "Change the track (\"funk.mp3\") and the look words: \"32 vertical frequency bars\", \"gradient from magenta to cyan\", and \"glossy dark surface\". The line \"allow changing the bar count, gradient colors, bar width, and glow intensity\" asks for those to be adjustable settings.",
"look": {
"summary": "A single row of 32 glowing, round-topped bars in a magenta-to-cyan gradient on a near-black background, taller at the bass end on the left.",
"palette": "Near-black background with hot magenta at the left shading through violet and periwinkle to bright cyan at the right, each bar with a soft glow in its own color.",
"type": "No text.",
"composition": "The bars span the frame with even gaps and a margin at each side, standing on a shared baseline low in the frame. The upper half stays empty, and no reflection is visible below the baseline, although the prompt asks for one.",
"structure": "The same layout in every frame; only the bar heights change, with the left-hand bars almost always the tallest."
},
"creator": {
"name": "samohovets",
"url": "https://github.com/samohovets"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/audio-spectrum-visualizer",
"title": "Audio Spectrum Visualizer",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-06",
"engagement": {
"likes": 23
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/audio-spectrum-visualizer",
"hls": "https://stream.mux.com/ny1RXLh7P01RXOUR01UWTS7qufi43Z8bAAi9ACIc3RBF00.m3u8"
},
"media": {
"duration": 17.7,
"aspect": "16:9",
"poster": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/poster.webp",
"storyboard": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/storyboard.webp",
"frames": [
{
"t": 1,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f1.webp"
},
{
"t": 2.9,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f2.webp"
},
{
"t": 4.9,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f3.webp"
},
{
"t": 6.9,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f4.webp"
},
{
"t": 8.8,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f5.webp"
},
{
"t": 10.8,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f6.webp"
},
{
"t": 12.8,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f7.webp"
},
{
"t": 14.7,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f8.webp"
},
{
"t": 16.7,
"src": "https://meetreference.com/media/32-bar-magenta-to-cyan-audio-spectrum/f9.webp"
}
]
}
},
{
"slug": "apple-keynote-style-promo-vvterm",
"url": "https://meetreference.com/v/apple-keynote-style-promo-vvterm/",
"brief": "https://meetreference.com/v/apple-keynote-style-promo-vvterm.md",
"prompt_url": "https://meetreference.com/v/apple-keynote-style-promo-vvterm/prompt.txt",
"title": "Apple-style promo for the VVTerm app",
"summary": "A 20-second promo in Apple presentation style for VVTerm, made from a four-sentence prompt. Claude Code was told to read VVTerm.com for product details and the logo, use Nerd Fonts and Inter, and keep it to about 20 seconds.",
"category": "product-promo",
"styles": [
"apple keynote",
"product promo",
"title cards",
"device mockup",
"minimal",
"app launch"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Make a promotion video in Apple presentation style for VVTerm. Check its website VVTerm.com for details and assets like logo. Use nerd fonts and inter. Make it around 20 seconds."
}
],
"fidelity": "verbatim",
"process": {},
"requirements": [
"A Remotion project (npx create-video@latest)",
"Web access for the agent, so it can read the product's site and download the logo",
"Nerd Fonts and Inter"
],
"remix": "Replace \"VVTerm\" and \"VVTerm.com\" with your product and its site, and \"nerd fonts and inter\" with your brand fonts. \"Apple presentation style\" sets the look and \"around 20 seconds\" the length.",
"look": {
"summary": "A clean, Apple-style product film for a terminal app: title cards on white and light gray, the VVTerm wordmark, the app on a laptop, tablet, and phone, a feature list, free and Pro tiers, and an App Store end card.",
"palette": "White and very light gray with near-black text, a soft orange prompt chevron and cursor bar in the logo, dark terminal screens on silver devices, and a black app icon.",
"type": "A monospace wordmark (VVTerm after a ❯ chevron, with a cursor bar) and a clean sans-serif for everything else, bold for headings and feature names and gray for the smaller lines.",
"composition": "Centered text on empty backgrounds. One scene groups a laptop, a tablet, and a phone running the app; the features sit in two left-aligned columns; the end card stacks the app icon over the name.",
"structure": "Introducing, the VVTerm wordmark, the app on a laptop, tablet, and phone, the features (GPU Terminal, iCloud Sync, Keychain Security, Workspaces, Multiple Connections, Voice Commands, System Monitor, Powered by libghostty), Free forever with one workspace, 3 servers, and one connection, Go Pro with unlimited servers, connections, and workspaces, then the app icon with Free on the App Store and vvterm.com."
},
"creator": {
"name": "@wiedymi",
"url": "https://x.com/wiedymi"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/promotion-video-for-vvterm",
"title": "Promotion video for VVTerm",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-06",
"engagement": {
"likes": 81
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/promotion-video-for-vvterm",
"hls": "https://stream.mux.com/ecZybrXoUybokb3xhuOrPKrAgXihoSM01ZDFtyT01PLAo.m3u8",
"poster_frame": 4
},
"media": {
"duration": 20.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/poster.webp",
"storyboard": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/storyboard.webp",
"frames": [
{
"t": 1.1,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f1.webp"
},
{
"t": 3.3,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f2.webp"
},
{
"t": 5.6,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f3.webp"
},
{
"t": 7.8,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f4.webp"
},
{
"t": 10,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f5.webp"
},
{
"t": 12.3,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f6.webp"
},
{
"t": 14.5,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f7.webp"
},
{
"t": 16.7,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f8.webp"
},
{
"t": 19,
"src": "https://meetreference.com/media/apple-keynote-style-promo-vvterm/f9.webp"
}
]
}
},
{
"slug": "aurora-glassmorphism-kinetic-typography",
"url": "https://meetreference.com/v/aurora-glassmorphism-kinetic-typography/",
"brief": "https://meetreference.com/v/aurora-glassmorphism-kinetic-typography.md",
"prompt_url": "https://meetreference.com/v/aurora-glassmorphism-kinetic-typography/prompt.txt",
"title": "Pastel aurora kinetic-type promo",
"summary": "A 20-second kinetic-typography promo for Remotion: bold black and blue words over pastel aurora gradients and blurred React logos, then electric-blue cards and a get-started end card. The prompt is a style brief with no script or on-screen copy.",
"category": "kinetic-typography",
"styles": [
"kinetic typography",
"aurora gradient",
"pastel",
"electric blue",
"bold type",
"developer tool"
],
"made_with": {
"agents": [
"Gemini"
],
"models": [
"k2.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "A high-velocity kinetic typography promo for a modern developer tool.\n\nVisual Style: Premium \"Aurora Glassmorphism\" aesthetic. Backgrounds are seamless, breathing radial gradients in Pastel Pink, Lavender, and Soft Blue. Key Elements: Dozens of 3D Floating React Logos drift through the scene with heavy depth-of-field blur. Rotating dashed \"Radar Rings\" and \"Pulse Circles\" add technical texture behind the text. Color Palette: Electric Azure Blue (#0b84f3) for primary accents against Deep Black bold typography (Poppins Black). Motion Physics: Elastic \"Layout Smoothing\" – new words crash in and physically push existing text aside. Transitions: Elements rotate -15° and shrink to zero to vanish. Scenes switch via massive Blue Iris Wipes and Ring Tunnels. Matches a 140 BPM fast-paced beat."
}
],
"fidelity": "verbatim",
"process": {
"notes": "The gallery lists the tool as \"Gemini\" and the model as \"k2.5\", exactly as submitted; which harness ran it is not clear. The prompt describes the look, motion, and transitions but leaves the words on screen to the model."
},
"requirements": [
"A Remotion project (npx create-video@latest)",
"The Poppins Black font",
"A 140 BPM track, if you want music under it"
],
"remix": "Swap the palette (\"Pastel Pink, Lavender, and Soft Blue\", \"Electric Azure Blue (#0b84f3)\") and the floating objects (\"3D Floating React Logos\") for your own brand, and add the words you want on screen, since the prompt has none.",
"look": {
"summary": "Bold kinetic words over soft pastel aurora gradients scattered with blurred React logos, giving way to flat electric-blue cards and a get-started end card for Remotion.",
"palette": "Pastel pink, lavender, and butter-yellow aurora on white, electric azure blue, deep black type, and pale cyan React logos.",
"type": "A heavy geometric sans in capitals (BUILD IN REACT, with CODE, SHIP VIDEOS, TEMPLATES, AT 60FPS), mixing black and blue words, with monospace for the closing links (github.com/remotion-dev, npx create-video@latest).",
"composition": "Words stacked or set in a line near the center, with React logos at different blur levels around the edges. One card puts TEMPLATES in a large white circle, and another sets a cluster of words inside a thin ring.",
"structure": "BUILD IN REACT, with CODE, and SHIP VIDEOS on the aurora, VIDEOS on blue, TEMPLATES in a white circle, a cluster of INTROS, OUTROS, MOTION, UI, and SOCIAL CLIPS, AT 60FPS on white, then GET STARTED with github.com/remotion-dev, npx create-video@latest, and www.remotion.dev."
},
"creator": {
"name": "@tiw_ari_ayu",
"url": "https://x.com/tiw_ari_ayu"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/the-kinetic-marketing",
"title": "The Kinetic Marketing",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-06",
"engagement": {
"likes": 26
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/the-kinetic-marketing",
"hls": "https://stream.mux.com/Lt7vgHN4jWXSpACRsbEClYjF5z00uID2jxD3701QBxdgI.m3u8",
"poster_frame": 1
},
"media": {
"duration": 20,
"aspect": "16:9",
"poster": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/poster.webp",
"storyboard": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/storyboard.webp",
"frames": [
{
"t": 1.1,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f1.webp"
},
{
"t": 3.3,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f2.webp"
},
{
"t": 5.6,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f3.webp"
},
{
"t": 7.8,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f4.webp"
},
{
"t": 10,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f5.webp"
},
{
"t": 12.2,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f6.webp"
},
{
"t": 14.5,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f7.webp"
},
{
"t": 16.7,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f8.webp"
},
{
"t": 18.9,
"src": "https://meetreference.com/media/aurora-glassmorphism-kinetic-typography/f9.webp"
}
]
}
},
{
"slug": "openclawd-launch-video-8-scene-dark",
"url": "https://meetreference.com/v/openclawd-launch-video-8-scene-dark/",
"brief": "https://meetreference.com/v/openclawd-launch-video-8-scene-dark.md",
"prompt_url": "https://meetreference.com/v/openclawd-launch-video-8-scene-dark/prompt.txt",
"title": "Dark launch video for an AI desktop app",
"summary": "A 37-second launch video for OpenClawd, an open-source AI desktop agent, in eight scenes from a terminal install through app screens, an MCP catalog, and messaging bots to a GitHub call to action. The prompt sets frame counts, hex colors, and fonts.",
"category": "product-promo",
"styles": [
"product launch",
"dark ui",
"terminal",
"app mockup",
"amber accent",
"remotion"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.6"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Create a Remotion video (1080x700, 30fps, ~37s) for OpenClawd — an open source AI desktop agent. Dark theme (#0c0a09\n background, #fbbf24 amber accent). Background music: \"Walen - HEADPHONK\" with 1s fade-in and 2s fade-out at 40% volume. 8\n scenes in series:\n\n Scene 1 — Terminal Install (120 frames / 4s)\n Mac-style terminal window with traffic light dots. Types npx openclawd-cli character by character (1 frame/char). After\n typing, shows ASCII art logo \"OPENCLAWD\" in amber, then server output lines appearing progressively: version banner, SDK\n backends, 20+ providers/80+ models loaded, model names (Opus 4.6, GPT-5.3, Gemini 3, etc.), MCP servers connected, \"Opening\n desktop app on :3001\". Terminal slides in from bottom with 3D perspective (rotateX 20deg, slight rotateY oscillation).\n\n Scene 2 — Home Screen (150 frames / 5s)\n Desktop app window with centered \"OpenClawd\" title (Georgia serif), tagline \"Open Source Alternative to Claude Cowork\",\n rounded chat input with send button, and provider/model selector chips (Claude Code + Opus 4.6 + Attach). Spring-animated\n fade-in with staggered delays (title → tagline → input → controls).\n\n Scene 3 — Chat Interface (160 frames / 5.3s)\n Three-column layout: left sidebar with chat history (MCP Integration, Code Review, etc.), center with user message \"Review my\n API code\" and streaming assistant response about security findings (rate limiting, SQL injection, input validation), right\n panel showing progress steps (Reading → Security analysis → Applying fixes → Creating PR) and tool calls (filesystem.read,\n bash.exec, github.create_pr) with green checkmarks.\n\n Scene 4 — Provider Switch (130 frames / 4.3s)\n Two dropdown panels side by side. Left: 8 providers (Claude Code, OpenCode, OpenAI, Gemini, DeepSeek, Llama 4, MiniMax,\n Ollama) with colored dots and selection indicator. Right: 7 models (Opus 4.6, Sonnet 4.5, GPT-5.3 Codex, etc.) with\n descriptions. Bottom tagline: \"Claude Code + OpenCode SDK — 20+ providers · Open Source models\". Staggered item reveals.\n\n Scene 5 — MCP Catalog (140 frames / 4.7s)\n Modal overlay with \"MCP Server Catalog — 20+ servers available\". Category filter pills (All, Core, Database, Developer,\n Communication). 6 server cards with icons: Filesystem, Git, GitHub (installed), PostgreSQL, Slack, Puppeteer. Auth badges\n (green \"No Auth\" / amber \"Requires Auth\"). Install/Installed buttons with checkmarks.\n\n Scene 6 — Messaging Bots (120 frames / 4s)\n Full-screen \"Your AI, everywhere you chat\" with subtitle \"Full tool access · Memory · Scheduling\". 4 platform cards\n (WhatsApp, Telegram, Signal, iMessage) with SVG icons, green \"Connected\" status dots, and feature tags (Memory, Scheduling,\n Tools). Cards scale up with spring animation.\n\n Scene 7 — Logo Combo (180 frames / 6s)\n Three sub-scenes: (a) Intro with converging amber lines, center burst ring, floating particles, grid background. (b) \"✦\n Introducing ✦\" with word-by-word reveal: \"Open Source AI Desktop\" in 56px white text, model names below in gray monospace.\n (c) 8 provider icons in two rows with colored dots and labels, tagline \"Claude Code + OpenCode SDK · 80+ models | Desktop ·\n Messaging · API\".\n\n Scene 8 — GitHub CTA (120 frames / 4s)\n \"100% OPEN SOURCE\" label, spinning GitHub logo (rotates in from -180deg), orbiting amber star icons, \"Star us on GitHub\" in\n 36px white, pulsing scale animation, \"github.com/rohitg00/openclawd\" in monospace with dark card background. Floating\n particles and subtle grid.\n\n All transitions use spring animations with fade + scale (0.95→1 in, 1→0.95 out). Each scene inside an AppWindow component\n (mac chrome with traffic lights). Color palette: #0c0a09 bg, #1c1917 surfaces, #292524 borders, #fbbf24 amber accent, #fafaf9\n white text, #a8a29e muted text, #78716c dim text. Fonts: Inter for UI, SF Mono for code, Georgia for branding."
}
],
"fidelity": "verbatim",
"process": {
"notes": "The showcase entry lists Claude Code with Opus 4.6. The prompt reads as a full spec, scene by scene, and names a background track, \"Walen - HEADPHONK\", that you supply yourself. The creator doesn't say whether it took more than one prompt."
},
"requirements": [
"A Remotion project",
"A background music file (the prompt names \"Walen - HEADPHONK\")"
],
"remix": "Replace \"OpenClawd\" and the eight scene descriptions with your own product's screens. Keep the frame counts and the color palette line, which pin down timing and color.",
"look": {
"summary": "A dark product launch built from macOS-style app windows: a terminal install with an ASCII logo, the app's home and chat screens, an MCP catalog, a messaging screen, a dark tagline scene, and a GitHub call to action.",
"palette": "Near-black and warm charcoal surfaces with amber-yellow accents and off-white text.",
"type": "Monospace terminal text with a yellow ASCII-art OPENCLAWD logo, a serif \"OpenClawd\" title over \"Open Source Alternative to Claude Cowork\", small sans-serif UI text, and a bold white \"Star us on GitHub\".",
"composition": "Each scene sits inside a window with traffic-light buttons, centered on a dark ground. The closing scenes drop the window: a dark amber glow with a small Claude Code tile and a line of text, then a GitHub mark ringed by amber stars.",
"structure": "\"npx openclawd-cli\" in a terminal with startup output, the home screen with a prompt box and Claude Code and Opus 4.6 chips, a chat opening with \"Review my API code and suggest improvements\", several frames caught mid-fade between scenes (an empty window, a near-black frame, the MCP Server Catalog, \"Your AI, everywhere you chat\"), a dark scene with a small Claude Code tile and \"Claude Code + OpenCode SDK · 80+ models\" beside \"Desktop · Messaging · API\", and \"100% OPEN SOURCE\" with \"Star us on GitHub\" and github.com/rohitg00/openclawd."
},
"creator": {
"name": "@ghumare64",
"url": "https://x.com/ghumare64"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/launch-video-on-x",
"title": "Launch Video on X",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-06",
"engagement": {
"likes": 201
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/launch-video-on-x",
"hls": "https://stream.mux.com/q00kXZ496bK4GthEXJe7iq3bUAF6HwVtO9zclj01niq3E.m3u8",
"poster_frame": 1
},
"media": {
"duration": 37.4,
"aspect": "1080:700",
"poster": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/poster.webp",
"storyboard": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/storyboard.webp",
"frames": [
{
"t": 2.1,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f1.webp"
},
{
"t": 6.2,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f2.webp"
},
{
"t": 10.4,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f3.webp"
},
{
"t": 14.5,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f4.webp"
},
{
"t": 18.7,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f5.webp"
},
{
"t": 22.9,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f6.webp"
},
{
"t": 27,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f7.webp"
},
{
"t": 31.2,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f8.webp"
},
{
"t": 35.3,
"src": "https://meetreference.com/media/openclawd-launch-video-8-scene-dark/f9.webp"
}
]
}
},
{
"slug": "battery-pack-active-cell-balancing",
"url": "https://meetreference.com/v/battery-pack-active-cell-balancing/",
"brief": "https://meetreference.com/v/battery-pack-active-cell-balancing.md",
"prompt_url": "https://meetreference.com/v/battery-pack-active-cell-balancing/prompt.txt",
"title": "Active cell balancing in a battery pack",
"summary": "A 10-second animation of active cell balancing in an 8-cell battery pack: the cells start unbalanced, get measured, and converge, with charge levels, voltage readouts, and an info panel. The prompt covers everything from npm setup to the render command.",
"category": "explainer",
"styles": [
"technical diagram",
"engineering",
"battery",
"dark theme",
"dashboard",
"monospace"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.6"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Create a Remotion project that renders a BMS Active Cell Balancing animation. 10 seconds, 30fps, 1280x720, output as MP4. \n \n Setup: \n mkdir remotion-bms && cd remotion-bms \n npm init -y \n npm i remotion react react-dom \n npm i -D @remotion/cli typescript\n tsconfig.json: ES2022, jsx: react-jsx, moduleResolution: bundler, module: ESNext\n\n Project structure: src/index.ts, src/Root.tsx, src/BmsCellBalancing.tsx\n\n Animation (BmsCellBalancing.tsx):\n 8 cells (8S1P) in a pack, dark theme (#0b1120), Courier New font. Initial voltages unbalanced between 3.3V and 4.05V. Background with subtle grid lines.\n\n Phases (at 300 frames total):\n - Frame 0..60: IDLE, show unbalanced cells\n - Frame 60..90: MEASURING CELLS... (yellow status dot)\n - Frame 90..240: BALANCING (green pulsing dot), voltages converge via smoothstep to average\n - Frame 240..300: BALANCED (blue)\n\n Each cell shows:\n - Color-coded SOC fill level (green when high, orange when medium, red when low) with gradient\n - Terminal nub on top, bus bars top/bottom connecting all cells\n - Voltage display (3 decimal places), cell label (C1..C8), SOC in %, temperature\n - During balancing: green border + arrow down for cells below avg (Charging), orange border + arrow up for cells above avg (Discharging)\n - Particle animation visualizing energy flow\n - Shimmer effect on the fill level\n\n Info panel at bottom with spring animation: Pack Voltage, Max Delta (color-coded: green below 10mV, orange below 50mV, red above), Avg Cell, Config (8S1P), Pack SOC, Method: Active\n\n Legend at bottom: \"▲ Discharging (high cell)\" orange, \"▼ Charging (low cell)\" green\n\n Render: npx remotion render src/index.ts BmsCellBalancing out/bms-cell-balancing.mp4"
}
],
"fidelity": "verbatim",
"process": {},
"requirements": [
"Node.js and npm; the prompt includes the commands to set up the Remotion project from scratch"
],
"remix": "Keep the structure (setup, phases by frame range, what each element shows, render command) and swap the subject: \"BMS Active Cell Balancing\", \"8 cells (8S1P)\", the four phases, and the info panel fields.",
"look": {
"summary": "A dark engineering dashboard: eight battery cells in a row with color-coded charge fills and voltage readouts, a status line above, and a stats panel below.",
"palette": "Near-black navy with a faint grid, cell fills in green, amber, and red, and white and gray text with green, red, yellow, and blue status accents.",
"type": "A typewriter-style monospace throughout: a bold white title (BMS Active Cell Balancing), small labels C1 to C8, three-decimal voltages, and a stats row (Pack Voltage, Max Delta, Avg Cell, Config 8S1P, Pack SOC, Method Active).",
"composition": "A centered strip of eight tall cells between two bus bars in the upper half, the stats panel and a one-line legend below it, and empty dark space at the bottom.",
"structure": "Unbalanced cells from 3.300V to 4.050V with one red low cell and a 750.0mV max delta, a measuring status, four frames of balancing with orange and green outlines and small arrows as the voltages close in, then every cell at 3.749V with matching amber fills and a 0.0mV delta in the last two frames."
},
"creator": {
"name": "pasrom",
"url": "https://github.com/pasrom"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/bms-active-cell-balancing-animation-8s1p-pack-with-energy-flow-visualization",
"title": "BMS Active Cell Balancing Animation - 8S1P Pack with Energy Flow Visualization",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-05",
"engagement": {
"likes": 18
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/bms-active-cell-balancing-animation-8s1p-pack-with-energy-flow-visualization",
"hls": "https://stream.mux.com/00cvqkiXT1otoKhdIxwafncqUqnVvCvRso2PoGR9YAuI.m3u8"
},
"media": {
"duration": 10.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/battery-pack-active-cell-balancing/poster.webp",
"storyboard": "https://meetreference.com/media/battery-pack-active-cell-balancing/storyboard.webp",
"frames": [
{
"t": 0.6,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f1.webp"
},
{
"t": 1.7,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f2.webp"
},
{
"t": 2.8,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f3.webp"
},
{
"t": 3.9,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f4.webp"
},
{
"t": 5,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f5.webp"
},
{
"t": 6.2,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f6.webp"
},
{
"t": 7.3,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f7.webp"
},
{
"t": 8.4,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f8.webp"
},
{
"t": 9.5,
"src": "https://meetreference.com/media/battery-pack-active-cell-balancing/f9.webp"
}
]
}
},
{
"slug": "colorful-shapes-jump-spin-morph-into",
"url": "https://meetreference.com/v/colorful-shapes-jump-spin-morph-into/",
"brief": "https://meetreference.com/v/colorful-shapes-jump-spin-morph-into.md",
"prompt_url": "https://meetreference.com/v/colorful-shapes-jump-spin-morph-into/prompt.txt",
"title": "Shapes that morph into the word REMOTION",
"summary": "A 7-second motion-graphics intro on white: eight colorful shapes jump, spin, and morph into the letters of REMOTION, then the Remotion logo flies in and wipes the letters away. The prompt gives four scenes and the spring damping for each move.",
"category": "motion-graphics",
"styles": [
"shape morph",
"logo reveal",
"colorful",
"flat",
"intro",
"minimal"
],
"made_with": {
"agents": [
"Gemini"
],
"models": [
"k2.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Create a premium 10-second motion graphics intro using Remotion and React.\n\nBackground: Clean white canvas with a subtle light-gray grid pattern.\n\nSequence of Events:\n\nScene 1 (The Setup): precise row of 8 colorful, filled geometric shapes (Pentagon, Triangle, Square, Circle, Hexagon, Diamond, Circle, Triangle) centered on screen with even spacing (90px). They should have a gentle, organic \"breathing\" idle animation.\nScene 2 (The Morph): Trigger a dynamic sequence where the shapes jump up, spin 180 degrees in mid-air, and smoothly morph (using flubber) into the bold block letters \"R-E-M-O-T-I-O-N\". Add a ghost-trail effect behind them during the jump for speed.\nScene 3 (The Arrival): Fly in the Remotion Logo from the left side to hover near the 'R'. Have it snap into place with a spring animation and immediately perform a full 360-degree rotation.\nScene 4 (The Wipe): Execute a slow, cinematic exit. The logo should slide smoothly across the entire screen from left to right. Implement a \"Wipe Logic\" where each letter of \"REMOTION\" vanishes (scales down/fades out) exactly in sync as the logo passes over it, creating an erasing effect.\nTechnical Requirements: Use remotion springs for all physics (damping: 14 for jumps, damping: 300 for the slow wipe). No strokes on shapes, only filled vibrant colors."
}
],
"fidelity": "verbatim",
"process": {
"notes": "The gallery lists the tool as \"Gemini\" and the model as \"k2.5\", exactly as submitted; which harness ran it is not clear. The prompt asks for 10 seconds; the posted render runs about 7."
},
"requirements": [
"A Remotion project (npx create-video@latest)",
"The flubber package for shape morphing",
"The Remotion logo, or your own logo"
],
"remix": "Replace \"R-E-M-O-T-I-O-N\" and \"the Remotion Logo\" with your own word and logo, and edit the list of eight shapes to match the letter count. The damping values (14 for jumps, 300 for the slow wipe) set how springy each move is.",
"look": {
"summary": "A flat, colorful logo intro on plain white: a row of eight small geometric shapes becomes the word REMOTION in multicolored block capitals, joined by the blue Remotion logo.",
"palette": "White background with flat fills in blue, sunflower yellow, red, green, purple, orange, and coral, plus a light-blue glow around the logo.",
"type": "Bold, wide geometric capitals spelling REMOTION, one color per letter.",
"composition": "Everything sits on one horizontal line through the middle of the frame, small against a lot of empty white. The light-gray grid the prompt asks for doesn't show in the frames.",
"structure": "The row of shapes (pentagon, triangle, square, circle, hexagon, diamond, circle, triangle), the first two shapes jumping off the row, REM formed while the rest are in the air, the full word REMOTION, the logo arriving at the left of the R, then two blank white frames at the end."
},
"creator": {
"name": "@tiw_ari_ayu",
"url": "https://x.com/tiw_ari_ayu"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/shape-to-words-transformation",
"title": "Shape to words transformation",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-05",
"engagement": {
"likes": 42
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/shape-to-words-transformation",
"hls": "https://stream.mux.com/O7FSXQVaaOHyFJrjAt008fqnycMsYH4ti1rSMJMoyTrE.m3u8"
},
"media": {
"duration": 6.6,
"aspect": "16:9",
"poster": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/poster.webp",
"storyboard": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/storyboard.webp",
"frames": [
{
"t": 0.4,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f1.webp"
},
{
"t": 1.1,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f2.webp"
},
{
"t": 1.8,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f3.webp"
},
{
"t": 2.6,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f4.webp"
},
{
"t": 3.3,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f5.webp"
},
{
"t": 4.1,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f6.webp"
},
{
"t": 4.8,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f7.webp"
},
{
"t": 5.5,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f8.webp"
},
{
"t": 6.3,
"src": "https://meetreference.com/media/colorful-shapes-jump-spin-morph-into/f9.webp"
}
]
}
},
{
"slug": "audio-reactive-promo-fictional-cd-store",
"url": "https://meetreference.com/v/audio-reactive-promo-fictional-cd-store/",
"brief": "https://meetreference.com/v/audio-reactive-promo-fictional-cd-store.md",
"prompt_url": "https://meetreference.com/v/audio-reactive-promo-fictional-cd-store/prompt.txt",
"title": "Audio-reactive promo for a music CD store",
"summary": "A 17-second promo for a CD store called Disc Depot: a hook line, the logo on an orange gradient, a customer counter, gradient album cards, and a call to action. After many refining turns, every element reacts to the low end of the music.",
"category": "product-promo",
"styles": [
"audio reactive",
"promo",
"orange gradient",
"counter",
"album covers",
"kinetic text"
],
"made_with": {
"agents": [
"OpenCode"
],
"models": [
"Kimi K2.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompts as submitted",
"text": "Use Remotion best practices skill. Create a 30-second video at 30fps. Start with a hook: white text on black background, 'Where do you even buy music anymore?' — fade it in, hold for 2 seconds, fade out.\n\nNext section: show the Disc Depot logo from public/discdepot-logo.png. Use a warm orange gradient background. Add a subtle tagline below: 'Music, delivered.’.\n\nIn the next section, add a counter that counts up to 12,000 with a plus sign. Label it 'Happy customers'. Keep the same background style.\n\nCreate 5 CD album covers as abstract gradient cards. Different color combinations. Animate them sliding in one by one, arranged in a row.\n\nAdd artist names and song titles.\n\nLet’s add a final section:\nEnd with a call to action: 'Find your sound.' and the URL 'discdepot.com'. Fade to black.\n\nLet’s improve the transition between series. For example: orange in the second section should interpolate from black to orange. Now it’s just not too smooth. And improve that between sections.\n\n# A lot of refining prompts followed.\n\nVery nice! Can you make logo react to audio using `useAudioData` hook? https://www.remotion.dev/docs/use-windowed-audio-data.md\n\nCan you make ALL scenes audio reactive? So that all elements dance to the music frequencies?\n\nI want everything react to low frequencies only"
}
],
"fidelity": "partial",
"process": {
"one_shot": false,
"notes": "The submission gives the opening section-by-section prompts, a note that \"a lot of refining prompts followed\", and the last three requests, which made the logo and then every scene react to the music's low frequencies with Remotion's useAudioData hook. The opening prompt asks for 30 seconds; the posted render runs about 17."
},
"requirements": [
"A Remotion project (npx create-video@latest)",
"Remotion Agent Skills (npx skills add remotion-dev/skills)",
"Your logo at public/discdepot-logo.png, or change the path",
"A music track"
],
"remix": "Replace the store and its copy: \"Disc Depot\", \"Music, delivered.\", \"Happy customers\", \"Find your sound.\", and \"discdepot.com\". Keep the last three requests if you want every scene to move with the music.",
"look": {
"summary": "A short store promo that alternates black title cards with a warm orange gradient: a typed hook question, a graffiti-style Disc Depot logo, a customer counter, and a row of gradient album cards.",
"palette": "Black and charcoal cards, a tangerine-to-amber gradient, white text with a soft glow, a yellow question mark, and album cards in violet, pink, cyan, and green gradients.",
"type": "A rounded bold sans in white, glowing slightly on black, for the hook, counter, and call to action; small white artist and album names on the cards; the URL in orange.",
"composition": "Centered text, with thin gold corner brackets on the opening black cards. The album cards sit in a row that runs off the right edge.",
"structure": "Where do you even buy music anymore? typed on black, the Disc Depot logo with Your CD store. Since 1995., a counter at 11,772+ Happy customers, 50 000 CDs available with cards for Luna Vox, The Neons, Solar Waves, and Forest Sound, then Find your sound. with discdepot.com, and a fade to black."
},
"creator": {
"name": "samohovets",
"url": "https://github.com/samohovets"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/music-cd-store-promo",
"title": "Music CD store promo",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-04",
"engagement": {
"likes": 65
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/music-cd-store-promo",
"hls": "https://stream.mux.com/pMFQkWDDAQuY7ZR9weLjZG500tzCjuRoRNKwhukM4Vbw.m3u8"
},
"media": {
"duration": 17.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/poster.webp",
"storyboard": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/storyboard.webp",
"frames": [
{
"t": 0.9,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f1.webp"
},
{
"t": 2.8,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f2.webp"
},
{
"t": 4.7,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f3.webp"
},
{
"t": 6.6,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f4.webp"
},
{
"t": 8.5,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f5.webp"
},
{
"t": 10.4,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f6.webp"
},
{
"t": 12.3,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f7.webp"
},
{
"t": 14.2,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f8.webp"
},
{
"t": 16.1,
"src": "https://meetreference.com/media/audio-reactive-promo-fictional-cd-store/f9.webp"
}
]
}
},
{
"slug": "combined-bar-glowing-line-chart-monthly",
"url": "https://meetreference.com/v/combined-bar-glowing-line-chart-monthly/",
"brief": "https://meetreference.com/v/combined-bar-glowing-line-chart-monthly.md",
"prompt_url": "https://meetreference.com/v/combined-bar-glowing-line-chart-monthly/prompt.txt",
"title": "Monthly revenue bars with a glowing line",
"summary": "A 4-second dark chart: six monthly revenue bars rise in turn while a glowing blue conversion-rate line draws across them and ends on a pulsing dot. Every value, color, and timing is set in one long sentence, run in OpenCode with Remotion's agent skills.",
"category": "data-viz",
"styles": [
"chart",
"bar chart",
"line chart",
"dark",
"glow",
"dashboard"
],
"made_with": {
"agents": [
"OpenCode"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Create a 1920x1080 dark-themed (#1A1A2E) composition called 'BarLineChart' with a combination chart showing monthly sales data — bars for revenue ($8K, $12K, $15K, $11K, $18K, $22K for Jan-Jun) that grow upward from the baseline, overlaid with a blue (#0B84F3) line tracking conversion rate (2.1%, 2.8%, 3.2%, 2.9%, 3.8%, 4.2%) that draws progressively with a glowing effect, bars animate sequentially with slight overlap while the line follows behind, include axis labels and a pulsing dot marker at the line tip, smooth spring-based timing over 120 frames at 30fps — use remotion-best-practices skill."
}
],
"fidelity": "verbatim",
"process": {
"notes": "Submitted to Remotion's Prompt Showcase with the tool (OpenCode) and model (Opus 4.5) listed. No other process details are given."
},
"requirements": [
"A Remotion project (npx create-video@latest)",
"Remotion's agent skills (npx skills add remotion-dev/skills), since the prompt ends by asking for the remotion-best-practices skill"
],
"remix": "Change the data: the revenue list \"$8K, $12K, $15K, $11K, $18K, $22K for Jan-Jun\", the conversion rates, and the colors \"#1A1A2E\" and \"#0B84F3\". Keep \"smooth spring-based timing over 120 frames at 30fps\" for the same pacing.",
"look": {
"summary": "A dark dashboard chart titled \"Monthly Sales Performance\": six muted lavender bars for January to June, with a thin bright-blue line and end dot across them.",
"palette": "Deep navy background, dusty lavender-gray bars, a bright blue line and dot, and faint gray axis text.",
"type": "A small bold white sans-serif title at top center, a tiny legend at top right (Revenue, Conversion Rate), gray dollar ticks on the left axis, blue percentage ticks on the right, and month abbreviations along the bottom.",
"composition": "A full-frame chart with two axes: revenue on the left and conversion rate on the right. Wide bars with narrow gaps; the line climbs from Jan to Jun with a dip at Apr and ends on a ringed dot over June.",
"structure": "Early frames show only the first bars, the line trails a step behind the bars, and the last frames hold the finished chart."
},
"creator": {
"name": "samohovets",
"url": "https://github.com/samohovets"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/bar-line-chart-combined",
"title": "Bar + Line Chart (combined)",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-04",
"engagement": {
"likes": 63
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/bar-line-chart-combined",
"hls": "https://stream.mux.com/k01cmFCbbbj8D201NZ01g2EwSR19vMNBIABG7vDf9NxV9Q.m3u8"
},
"media": {
"duration": 4.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/poster.webp",
"storyboard": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/storyboard.webp",
"frames": [
{
"t": 0.2,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f1.webp"
},
{
"t": 0.7,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f2.webp"
},
{
"t": 1.1,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f3.webp"
},
{
"t": 1.6,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f4.webp"
},
{
"t": 2,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f5.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f6.webp"
},
{
"t": 2.9,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f7.webp"
},
{
"t": 3.4,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f8.webp"
},
{
"t": 3.8,
"src": "https://meetreference.com/media/combined-bar-glowing-line-chart-monthly/f9.webp"
}
]
}
},
{
"slug": "3d-top-20-best-selling-video-games-tower",
"url": "https://meetreference.com/v/3d-top-20-best-selling-video-games-tower/",
"brief": "https://meetreference.com/v/3d-top-20-best-selling-video-games-tower.md",
"prompt_url": "https://meetreference.com/v/3d-top-20-best-selling-video-games-tower/prompt.txt",
"title": "3D tower chart of best-selling video games",
"summary": "A 57-second 3D data video in which the 20 best-selling games stand as box towers sized by copies sold while the camera climbs from rank 20 to rank 1. Built in Claude Code with Remotion and React Three Fiber; the thread shares tips for prompting 3D data videos.",
"category": "data-viz",
"styles": [
"data visualization",
"3d bar chart",
"ranking",
"camera fly-up",
"video games",
"widescreen"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [],
"frameworks": [
"Remotion",
"React Three Fiber"
],
"services": [],
"skills": [
"Remotion skills"
]
},
"prompts": [
{
"label": "Initial prompt",
"text": "here is an empty remotion project with the default react three fiber example.\n\nI want to create a 3D video to visualize top 20 videos games by copies of all time.Create a Remotion video that visualizes the top 20 best-selling video games as a vertical \"tower\", use boxes as towers with height representing the amount of copies.\n\nremove the default example from this project and create a remotion + react three fiber example to do this visualization.\nResolution: 1920x1080\nFPS:60\n\nanimate the camera from the bottom of the last rank to the top of the first rank. stop the camera on the top of each rank for a few miliseconds.\n\nhere is the game ranking data you need\n[data as a JSON string]"
}
],
"fidelity": "partial",
"process": {
"one_shot": false,
"notes": "The creator set up a repo from the basic Remotion boilerplate with Remotion Skills, opened it in Claude Code, and generated a few versions to learn which details matter. The published prompt replaces the dataset with a placeholder. Later prompts weren't published: they added images, a Sketchfab football-field model as the background, and props to resize and reposition it in Remotion Studio. The visual reference was a popular YouTube ranking video. The model isn't named. The Remotion showcase carries the same prompt, except that the data placeholder is written as a comment and a line is added pointing to the X thread for more instructions; this entry uses the creator's reply on X."
},
"requirements": [
"A Remotion project with the React Three Fiber example and Remotion's agent skills",
"Your ranking data as JSON, pasted where the prompt says \"[data as a JSON string]\""
],
"remix": "Change the subject in \"visualize top 20 videos games by copies of all time\" and paste your own data at \"[data as a JSON string]\". Keep \"FPS:60\" and the camera instruction, which the creator says are hard to change later.",
"look": {
"summary": "A 3D bar chart in a low-poly park: blue box towers topped with game box art, each with a name label, copies sold, rank, and a country flag, climbing from rank 20 to rank 2 beside the tall rank-1 tower.",
"palette": "Periwinkle-blue towers with lavender labels and yellow numbers, lime-green low-poly trees, green grass, pale gray paths, and a white sky.",
"type": "A bold sans: white game titles on lavender label panels (\"Mario Kart Wii\", \"The Witcher 3: Wild Hunt\"), large yellow sales figures (\"37.3 M\", \"205 M\"), and white rank numbers (\"#19\").",
"composition": "16:9 eye-level views of two or three towers at a time, box art standing on each tower top and a flag beside it. Each frame sits higher than the last, so the next tower top stays in view against the trees and a fenced field behind.",
"structure": "Ranks 20 to 18 (Super Smash Bros. Ultimate, Mario Kart Wii, Skyrim), 17 to 14 (two Call of Duty titles, Stardew Valley, Wii Fit Plus), 13 to 8 (Animal Crossing, Pokemon Red / Green / Blue, The Witcher 3, Overwatch, Human: Fall Flat, Super Mario Bros.), 7 to 3 (Terraria, Red Dead Redemption 2, PUBG, Mario Kart 8 Deluxe), then Grand Theft Auto V at #2 with 205 M beside the rank-1 tower."
},
"creator": {
"name": "@DilumSanjaya",
"url": "https://x.com/DilumSanjaya"
},
"source": {
"platform": "x",
"url": "https://x.com/DilumSanjaya/status/2018367621381620142",
"title": "Created this video with @Remotion to visualize the top 20 games by copies sold.",
"posted": "2026-02-02",
"engagement": {
"comments": 10,
"likes": 119,
"reposts": 7,
"views": 15414
}
},
"video": {
"watch": "https://x.com/DilumSanjaya/status/2018367621381620142",
"mp4": "https://video.twimg.com/amplify_video/2018365947443359744/vid/avc1/1920x1080/RjAwpe-mn5csinoF.mp4?tag=21"
},
"media": {
"duration": 57,
"aspect": "16:9",
"poster": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/poster.webp",
"storyboard": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/storyboard.webp",
"frames": [
{
"t": 3.2,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f1.webp"
},
{
"t": 9.5,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f2.webp"
},
{
"t": 15.8,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f3.webp"
},
{
"t": 22.2,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f4.webp"
},
{
"t": 28.5,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f5.webp"
},
{
"t": 34.8,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f6.webp"
},
{
"t": 41.2,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f7.webp"
},
{
"t": 47.5,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f8.webp"
},
{
"t": 53.8,
"src": "https://meetreference.com/media/3d-top-20-best-selling-video-games-tower/f9.webp"
}
]
}
},
{
"slug": "animated-travel-route-from-la-to-new",
"url": "https://meetreference.com/v/animated-travel-route-from-la-to-new/",
"brief": "https://meetreference.com/v/animated-travel-route-from-la-to-new.md",
"prompt_url": "https://meetreference.com/v/animated-travel-route-from-la-to-new/prompt.txt",
"title": "Map route from LA to New York to Paris",
"summary": "A 10-second map animation: the camera zooms out of Los Angeles, follows a line drawn to New York, then continues to Paris, where a 3D Eiffel Tower appears. Made with a short Claude Code prompt and one follow-up, using Remotion's agent skills.",
"category": "motion-graphics",
"styles": [
"map animation",
"travel route",
"globe",
"route line",
"3d landmark",
"camera follow"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompt and follow-up",
"text": "use remotion best practices. make a new composition and add a map and zoom out of LA while staying focused on it. once done, animate a line from LA to NY and make the camera follow it.\n\nadd another stop to the trip, this time we go to paris. animate the eiffel tower and show it in 3D!"
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "The submitted prompt has two parts: the LA-to-New York route, then a second paragraph that adds the Paris stop and the 3D Eiffel Tower. In January 2026 the creator announced a Maps skill for Remotion on X and said it needed a Mapbox token."
},
"requirements": [
"A Remotion project (npx create-video@latest)",
"Remotion Agent Skills, including the maps skill (npx skills add remotion-dev/skills)",
"A Mapbox token, which the creator's launch post said the Maps skill needed"
],
"remix": "Swap the places: \"zoom out of LA\", \"a line from LA to NY\", and \"this time we go to paris\". Replace \"animate the eiffel tower and show it in 3D\" with a landmark at your own destination.",
"look": {
"summary": "A light, clean web map: a red route line runs from Los Angeles across a globe to New York and on to Paris, ending on a tilted 3D street view with a pale Eiffel Tower model.",
"palette": "Pale green land, light sky-blue water, gray-white roads, a dark navy starfield around the globe, a thin red route line with red dots, and beige 3D buildings in the Paris view.",
"type": "Small dark map labels under each red dot: Los Angeles, New York, Paris.",
"composition": "The current stop sits near the center. The middle frames show the whole globe against space, and the last frame tilts down into the streets, with the Seine and a park around the tower.",
"structure": "A close flat map of Los Angeles, a globe of North America with LA and New York marked, the red line partway across and then reaching New York, the line heading out over the Atlantic toward Paris, a globe centered on Europe, a closer flat view of Paris, then the tilted 3D street view with the Eiffel Tower at the Paris marker."
},
"creator": {
"name": "@JNYBGR",
"url": "https://x.com/JNYBGR"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/travel-route-on-map-with-3d-landmarks",
"title": "Travel Route on Map with 3D landmarks",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-01",
"engagement": {
"likes": 351
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/travel-route-on-map-with-3d-landmarks",
"hls": "https://stream.mux.com/2E2ksNC9FIgnczmLZZQ4iJjDp760101pcLnyLeNal9MjA.m3u8"
},
"media": {
"duration": 10,
"aspect": "16:9",
"poster": "https://meetreference.com/media/animated-travel-route-from-la-to-new/poster.webp",
"storyboard": "https://meetreference.com/media/animated-travel-route-from-la-to-new/storyboard.webp",
"frames": [
{
"t": 0.6,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f1.webp"
},
{
"t": 1.7,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f2.webp"
},
{
"t": 2.8,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f3.webp"
},
{
"t": 3.9,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f4.webp"
},
{
"t": 5,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f5.webp"
},
{
"t": 6.1,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f6.webp"
},
{
"t": 7.3,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f7.webp"
},
{
"t": 8.4,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f8.webp"
},
{
"t": 9.5,
"src": "https://meetreference.com/media/animated-travel-route-from-la-to-new/f9.webp"
}
]
}
},
{
"slug": "every-spacex-launch-2015-2025-as-fading",
"url": "https://meetreference.com/v/every-spacex-launch-2015-2025-as-fading/",
"brief": "https://meetreference.com/v/every-spacex-launch-2015-2025-as-fading.md",
"prompt_url": "https://meetreference.com/v/every-spacex-launch-2015-2025-as-fading/prompt.txt",
"title": "Every SpaceX launch as fading arcs",
"summary": "A 66-second minimalist animation that plays every SpaceX launch from 2015 to 2025 in order as glowing parabolas that fade behind a running year counter. The three-sentence prompt asks for three versions first, then refinement through feedback.",
"category": "data-viz",
"styles": [
"minimalist",
"timeline",
"trajectory arcs",
"space",
"dark",
"abstract"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Animate every SpaceX rocket launch from 2015–2025 in chronological order. Show the launch parabolas with trajectory fading. Use an abstract, minimalist aesthetic. Give me three versions first, then I’ll pick one and refine it via feedback."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "The prompt asks for three versions and then refinement through feedback, so the posted video is a refined pick; those later turns are not published. The gallery lists no tool or model, and how the launch data was gathered is not stated."
},
"requirements": [
"A Remotion project (npx create-video@latest)",
"Launch data, which the agent has to find or you supply"
],
"remix": "Swap the dataset (\"every SpaceX rocket launch from 2015–2025\") and the mark (\"launch parabolas with trajectory fading\"). Keep \"Give me three versions first\" so you can pick a direction before refining.",
"look": {
"summary": "A black, monochrome launch history: thin white arcs curve up from a timeline along the bottom and pile into a dense, glowing fan as the years advance, with the year and running counts in the top right.",
"palette": "Pure black with white and soft gray lines. The newest arcs are brightest and older ones fade to gray. No color.",
"type": "A letterspaced SPACEX title with a tiny caption top left, a large thin year top right over small monospace counters, and tiny year labels along the timeline.",
"composition": "A wide black field with a hairline timeline near the bottom and small corner brackets. The arcs start at a glowing marker on the timeline and curve up and out of the top of the frame.",
"structure": "2015 with a few arcs, the bundle thickening through 2016, 2018, 2019, 2021, and 2022, a dense bright wall in 2024 and 2025, then the arcs almost gone with 2025 still on screen."
},
"creator": {
"name": "@crispynotfound",
"url": "https://x.com/crispynotfound"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/rocket-launches-timeline",
"title": "Rocket Launches Timeline",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-01",
"engagement": {
"likes": 130
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/rocket-launches-timeline",
"hls": "https://stream.mux.com/s02wPw794Fzv3fCMZ3WDS15k8w7WCar31kA02pxP02QjjU.m3u8"
},
"media": {
"duration": 65.7,
"aspect": "16:9",
"poster": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/poster.webp",
"storyboard": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/storyboard.webp",
"frames": [
{
"t": 3.7,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f1.webp"
},
{
"t": 11,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f2.webp"
},
{
"t": 18.3,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f3.webp"
},
{
"t": 25.6,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f4.webp"
},
{
"t": 32.9,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f5.webp"
},
{
"t": 40.2,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f6.webp"
},
{
"t": 47.5,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f7.webp"
},
{
"t": 54.8,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f8.webp"
},
{
"t": 62.1,
"src": "https://meetreference.com/media/every-spacex-launch-2015-2025-as-fading/f9.webp"
}
]
}
},
{
"slug": "news-article-screenshot-3d-tilt-blur",
"url": "https://meetreference.com/v/news-article-screenshot-3d-tilt-blur/",
"brief": "https://meetreference.com/v/news-article-screenshot-3d-tilt-blur.md",
"prompt_url": "https://meetreference.com/v/news-article-screenshot-3d-tilt-blur/prompt.txt",
"title": "News screenshot with a highlighter sweep",
"summary": "A 5-second clip that unblurs a screenshot of a CBS News article, slowly zooms and tilts it in 3D, and sweeps a hand-drawn highlighter behind two phrases. Claude Code on Opus 4.5 built it in Remotion, finding the words' positions with Tesseract OCR.",
"category": "news",
"styles": [
"news",
"highlighter",
"3d tilt",
"blur reveal",
"article screenshot"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion",
"rough.js",
"Tesseract OCR"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "use remotion best practices. import the following image into the project: '~/Desktop/Screenshot 2026-01-31 at 17.15.12.png' use tesseract CLI to do OCR and find the positions of the text. in remotion, make a new composition where you load the image and pad the article generously on a white full HD background. while the composition is running for 5 seconds, slowly, very subtly, zoom into it and slightly rotate the article in 3d from left to right. the overall rotation should be around 15deg for each axis. at the beginning, blur the whole composition and unblur it over 1 second. after the blur is done, evolve a highlighter from left to right using rough.js over the words \"government shutdown\" and \"funding lapses\". the image has a white background. make sure the the marker appears behind the text. when installing new dependencies, check for existing lockfiles and use the right package manager."
}
],
"fidelity": "verbatim",
"process": {
"notes": "Submitted by the official Remotion account. The prompt points at a screenshot on the creator's desktop, so you need your own image. On the showcase page the tool and model fields are swapped (\"Tool used: Opus 4.5\", \"Model used: Claude Code\"). The entry doesn't say whether follow-up prompts were needed."
},
"requirements": [
"A screenshot of an article saved locally (the prompt names the creator's own file path)",
"The tesseract CLI",
"Remotion's agent skills (npx skills add remotion-dev/skills); the opening \"use remotion best practices\" names one of them"
],
"remix": "Point the prompt at your own screenshot and replace \"government shutdown\" and \"funding lapses\" with the phrases to highlight. The 5-second length, the \"around 15deg\" rotation and the 1-second unblur are all set in the text.",
"look": {
"summary": "A screenshot of a CBS News politics article on a plain white background, headlined \"Partial government shutdown begins as funding lapses despite Senate deal\", with bylines and an update stamp, and yellow highlighter marks behind \"government shutdown\" and \"funding lapses\".",
"palette": "White page, black serif headline, gray bylines, and a soft highlighter yellow.",
"type": "The article's own bold serif headline and small sans-serif metadata, shown as an image; nothing is typeset on top.",
"composition": "Generous white padding around a small article block that sits at a slightly different size, position and 3D angle in each frame.",
"structure": "A fully blurred first frame, then the sharp article; in the middle frames the yellow covers part of each phrase, and by the last frames both phrases are fully marked."
},
"creator": {
"name": "@Remotion",
"url": "https://x.com/Remotion"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/news-article-headline-highlight",
"title": "News article headline highlight",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-01",
"engagement": {
"likes": 350
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/news-article-headline-highlight",
"hls": "https://stream.mux.com/Cb4BOLZkhLeNa01on4DH9195qH00CF1h4qQ3qRnyD9XZE.m3u8"
},
"media": {
"duration": 5.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/poster.webp",
"storyboard": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/storyboard.webp",
"frames": [
{
"t": 0.3,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f1.webp"
},
{
"t": 0.8,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f2.webp"
},
{
"t": 1.4,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f3.webp"
},
{
"t": 2,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f4.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f5.webp"
},
{
"t": 3.1,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f6.webp"
},
{
"t": 3.7,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f7.webp"
},
{
"t": 4.2,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f8.webp"
},
{
"t": 4.8,
"src": "https://meetreference.com/media/news-article-screenshot-3d-tilt-blur/f9.webp"
}
]
}
},
{
"slug": "strava-run-turned-into-animated",
"url": "https://meetreference.com/v/strava-run-turned-into-animated/",
"brief": "https://meetreference.com/v/strava-run-turned-into-animated.md",
"prompt_url": "https://meetreference.com/v/strava-run-turned-into-animated/prompt.txt",
"title": "Strava run as an animated Instagram story",
"summary": "A 16-second vertical story that animates a run from a GPX file: a dark map, the route drawing in, and live metrics sized for a phone. It came from a short Claude Code prompt that asks for \"remotion best practices\".",
"category": "data-viz",
"styles": [
"map",
"route animation",
"fitness",
"stats",
"vertical",
"instagram story",
"dark"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "[download GPX from strava website]\n\nuse remotion best practices. turn my run today into an animated instagram story: ~/Downloads/Afternoon_Run.gpx\n\nshow a map, the route and live metrics for my run. use font sizes that will be legible when user watches as a story"
}
],
"fidelity": "verbatim",
"process": {
"notes": "The first line, \"[download GPX from strava website]\", is the manual step the creator did before prompting."
},
"requirements": [
"A GPX file of your run, exported from Strava",
"Remotion's agent skills (npx skills add remotion-dev/skills); the prompt's \"use remotion best practices\" matches their remotion-best-practices skill"
],
"remix": "Point the path \"~/Downloads/Afternoon_Run.gpx\" at your own GPX file, and change \"animated instagram story\" if you want another format.",
"look": {
"summary": "A dark map of the run's area with a red route line drawing across it, a white dot at its head, and live stats for distance, pace, time, and elevation.",
"palette": "Charcoal and black map with gray streets, a red route and elevation fill, and white numbers.",
"type": "Bold white sans: an \"AFTERNOON RUN / Sunday, Feb 1\" header, a large \"10.9 KILOMETERS\" intro, stat tiles (DISTANCE, PACE, TIME), an ELEVATION strip with the current height, and a RUN COMPLETE summary card.",
"composition": "Vertical 9:16 with the header at top, the map filling the middle, and the stat tiles and elevation profile in the bottom quarter. The summary card sits centered over the dimmed map.",
"structure": "A 10.9 KILOMETERS intro, then the route drawing across the map while distance, pace, and time count up (0.05 km, 1.03 km, 2.98 km, 5.27 km, 7.50 km, 9.55 km, 10.51 km), and a RUN COMPLETE card with 10.9 km, 1:01:00, 5:35/km, and +108m elevation."
},
"creator": {
"name": "@JNYBGR",
"url": "https://x.com/JNYBGR"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/strava-run-visualized",
"title": "Strava Run visualized",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-01",
"engagement": {
"likes": 31
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/strava-run-visualized",
"hls": "https://stream.mux.com/1lVbsu02IKkVAlebOkSUtnisikCeDjEZ202H6DK01eIEZw.m3u8"
},
"media": {
"duration": 16.1,
"aspect": "9:16",
"poster": "https://meetreference.com/media/strava-run-turned-into-animated/poster.webp",
"storyboard": "https://meetreference.com/media/strava-run-turned-into-animated/storyboard.webp",
"frames": [
{
"t": 0.9,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f1.webp"
},
{
"t": 2.7,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f2.webp"
},
{
"t": 4.5,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f3.webp"
},
{
"t": 6.2,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f4.webp"
},
{
"t": 8,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f5.webp"
},
{
"t": 9.8,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f6.webp"
},
{
"t": 11.6,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f7.webp"
},
{
"t": 13.4,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f8.webp"
},
{
"t": 15.2,
"src": "https://meetreference.com/media/strava-run-turned-into-animated/f9.webp"
}
]
}
},
{
"slug": "svg-logo-extruded-into-spinning-3d-metal",
"url": "https://meetreference.com/v/svg-logo-extruded-into-spinning-3d-metal/",
"brief": "https://meetreference.com/v/svg-logo-extruded-into-spinning-3d-metal.md",
"prompt_url": "https://meetreference.com/v/svg-logo-extruded-into-spinning-3d-metal/prompt.txt",
"title": "Flat logo turned into spinning 3D metal",
"summary": "A 10-second clip of Remotion's logo as a rotating 3D metal object with a glitch, exported with a transparent background. The published prompt is the whole nine-message conversation that tuned the material, lighting, rotation, and determinism.",
"category": "motion-graphics",
"styles": [
"3d logo",
"metallic",
"glitch",
"logo sting",
"transparent",
"remotion"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion",
"react-postprocessing"
],
"services": [],
"skills": [
"Remotion agent skills"
]
},
"prompts": [
{
"label": "Conversation",
"text": "use remotion best practices. create a new composition with the following SVG in 3D. add a metallic material to it: <svg width=\"988\" height=\"317\" viewBox=\"0 0 988 317\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_9_8)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M988 158.5C988 200.537 935.954 240.852 843.311 270.576C750.668 300.301 625.017 317 494 317C362.983 317 237.332 300.301 144.689 270.576C52.0463 240.852 0 200.537 0 158.5C0 116.463 52.0463 76.1481 144.689 46.4236C237.332 16.6991 362.983 0 494 0C625.017 0 750.668 16.6991 843.311 46.4236C935.954 76.1481 988 116.463 988 158.5ZM940 158.5C940 120.176 893.011 83.4221 809.37 56.3231C725.728 29.2241 612.287 14 494 14C375.713 14 262.272 29.2241 178.63 56.3231C94.9891 83.4221 48 120.176 48 158.5C48 196.824 94.9891 233.578 178.63 260.677C262.272 287.776 375.713 303 494 303C612.287 303 725.728 287.776 809.37 260.677C893.011 233.578 940 196.824 940 158.5Z\" fill=\"black\"/>\n<path d=\"M120.918 209L142.644 106.949H193.44C203.997 106.949 210.423 108.02 214.707 110.315C220.215 113.375 223.122 118.73 223.122 125.615C223.122 135.713 218.532 152.237 214.095 158.51C210.423 163.559 206.292 165.701 196.347 167.843L196.194 168.608C205.986 169.22 210.729 173.657 210.729 181.919C210.729 184.061 210.576 185.438 209.811 188.651L205.527 209H181.659L185.025 193.088C185.637 190.487 185.79 188.804 185.79 186.968C185.79 181.001 182.577 178.553 174.774 178.553H151.059L144.48 209H120.918ZM155.19 158.51H179.67C187.779 158.51 191.757 156.368 194.205 150.554C195.582 147.647 197.724 137.396 197.724 134.489C197.724 128.828 195.123 127.145 186.249 127.145H161.922L155.19 158.51ZM258.674 126.38L253.931 148.718H299.372L295.853 165.395H250.412L245.21 189.569H294.17L290.039 209H217.517L239.243 106.949H311L306.869 126.38H258.674ZM445.852 106.949L424.126 209H400.87L410.05 166.16C411.733 158.051 412.651 154.379 417.241 136.784L419.842 126.992H419.077L414.181 136.478C405.46 153.002 403.165 157.286 398.881 164.63L373.177 209H352.522L345.331 164.783C344.107 156.98 343.648 153.614 341.812 136.631L340.894 127.298H340.129L338.599 136.937C335.845 154.532 335.08 159.275 333.55 166.16L324.523 209H301.267L322.993 106.949H360.172L365.833 145.046C366.751 151.319 367.057 154.379 368.434 168.761L369.046 176.717H369.964L373.942 168.761C380.827 154.838 382.663 151.319 386.182 145.199L407.755 106.949H445.852ZM504.916 106.184C518.533 106.184 525.112 107.102 530.467 109.703C538.882 113.681 542.86 120.566 542.86 131.276C542.86 139.844 536.434 171.515 532.609 181.766C528.019 193.853 521.899 200.891 511.801 205.328C504.457 208.541 495.736 209.765 480.13 209.765C464.83 209.765 458.251 208.694 452.131 205.481C444.94 201.503 441.268 194.771 441.268 184.979C441.268 175.799 447.541 145.505 451.978 133.724C456.415 121.79 462.382 115.364 473.092 110.468C480.436 107.255 488.392 106.184 504.916 106.184ZM498.49 126.38C485.332 126.38 481.201 127.604 477.376 132.806C474.622 136.631 473.551 139.844 470.032 155.909C466.972 169.832 466.054 175.34 466.054 179.012C466.054 188.039 469.114 189.569 486.709 189.569C502.927 189.569 507.058 186.662 511.342 171.821C513.79 163.1 518.074 141.374 518.074 137.09C518.074 132.194 516.697 129.44 513.637 128.063C510.883 126.686 507.823 126.38 498.49 126.38ZM595.854 127.298L578.412 209H554.85L572.139 127.298H544.599L548.883 106.949H629.055L624.618 127.298H595.854ZM655.328 106.949L633.602 209H610.04L631.766 106.949H655.328ZM714.478 106.184C728.095 106.184 734.674 107.102 740.029 109.703C748.444 113.681 752.422 120.566 752.422 131.276C752.422 139.844 745.996 171.515 742.171 181.766C737.581 193.853 731.461 200.891 721.363 205.328C714.019 208.541 705.298 209.765 689.692 209.765C674.392 209.765 667.813 208.694 661.693 205.481C654.502 201.503 650.83 194.771 650.83 184.979C650.83 175.799 657.103 145.505 661.54 133.724C665.977 121.79 671.944 115.364 682.654 110.468C689.998 107.255 697.954 106.184 714.478 106.184ZM708.052 126.38C694.894 126.38 690.763 127.604 686.938 132.806C684.184 136.631 683.113 139.844 679.594 155.909C676.534 169.832 675.616 175.34 675.616 179.012C675.616 188.039 678.676 189.569 696.271 189.569C712.489 189.569 716.62 186.662 720.904 171.821C723.352 163.1 727.636 141.374 727.636 137.09C727.636 132.194 726.259 129.44 723.199 128.063C720.445 126.686 717.385 126.38 708.052 126.38ZM868.06 106.949L846.334 209H806.554L794.467 159.581C793.09 153.767 792.478 150.248 789.877 135.254L788.347 127.145H787.429C784.981 141.221 782.992 152.084 781.462 159.581L771.058 209H747.955L769.681 106.949H809.155L820.324 154.226C823.078 165.701 823.078 165.854 827.362 188.192H828.28L829.657 180.236C831.646 168.761 831.799 167.231 834.094 156.521L844.651 106.949H868.06Z\" fill=\"black\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_9_8\">\n<rect width=\"988\" height=\"317\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n\nmake it smaller and more silver\n\nit still is pretty dark. change the material and lighting to make it much more silver and bright\n\nok, now it is completely white. find a middle ground so it still is a bit metallic\n\nright now you can see the backside of the logo. make it rotate only from -90 to 90 degree and then start over at -90\n\nadd the following glitch effect to it: https://react-postprocessing.docs.pmnd.rs/effects/glitch\n\nyes please, please make everything deterministic\n\nexport this as a transparent video i can use in after effects\n\ndid not work, check the docs: https://www.remotion.dev/docs/transparent-videos/\n"
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "Posted by Remotion's own account, with Claude Code and Opus 4.5. The submission is the full conversation in one block: the first message carries the SVG, and eight short follow-ups make the logo smaller and more silver, adjust the lighting, limit the rotation to -90 to 90 degrees, add the react-postprocessing glitch, make everything deterministic, and export a transparent video after pointing the agent at Remotion's docs."
},
"requirements": [
"A Remotion project",
"Remotion's agent skills (npx skills add remotion-dev/skills)",
"Your logo as an SVG"
],
"remix": "Paste your own SVG after \"create a new composition with the following SVG in 3D\". The follow-ups, from \"make it smaller and more silver\" to the transparent export, work as a checklist for any logo.",
"look": {
"summary": "The Remotion wordmark inside an oval ring, extruded into grey metal on a grey-and-white checkerboard like a transparency grid, seen from frontal, tilted, and three-quarter views and once edge-on, with an RGB-split glitch on one frontal view.",
"palette": "Gunmetal and silver greys with white highlights on a light grey checkerboard; one frame adds thin cyan, yellow, and magenta fringes.",
"type": "Only the logo's own heavy italic REMOTION lettering.",
"composition": "A single object at varying positions and sizes in a 16:9 frame: roughly centered for the frontal and edge-on views, and pushed toward the edges for the tilted ones.",
"structure": "A steep three-quarter view, a tilted view, a frontal view with color fringing, a tilted view near the left edge, the logo edge-on as a thin sliver, a tilted view near the right edge, a near-frontal view, then two more tilted views."
},
"creator": {
"name": "@Remotion",
"url": "https://x.com/Remotion"
},
"source": {
"platform": "site",
"url": "https://www.remotion.dev/prompts/spinning-glitching-svg-logo-turned-3d",
"title": "Spinning, glitching SVG Logo turned 3D",
"community": "Remotion Prompt Showcase",
"posted": "2026-02-01",
"engagement": {
"likes": 43
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/spinning-glitching-svg-logo-turned-3d",
"hls": "https://stream.mux.com/XZUzamYvzIo5371uBsWlosBwKiJzMSqF00BDphhRatAM.m3u8"
},
"media": {
"duration": 10.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/poster.webp",
"storyboard": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/storyboard.webp",
"frames": [
{
"t": 0.6,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f1.webp"
},
{
"t": 1.7,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f2.webp"
},
{
"t": 2.8,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f3.webp"
},
{
"t": 3.9,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f4.webp"
},
{
"t": 5,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f5.webp"
},
{
"t": 6.2,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f6.webp"
},
{
"t": 7.3,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f7.webp"
},
{
"t": 8.4,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f8.webp"
},
{
"t": 9.5,
"src": "https://meetreference.com/media/svg-logo-extruded-into-spinning-3d-metal/f9.webp"
}
]
}
},
{
"slug": "split-screen-manim-explainer-bubble-sort",
"url": "https://meetreference.com/v/split-screen-manim-explainer-bubble-sort/",
"brief": "https://meetreference.com/v/split-screen-manim-explainer-bubble-sort.md",
"prompt_url": "https://meetreference.com/v/split-screen-manim-explainer-bubble-sort/prompt.txt",
"title": "Split-screen bubble sort explainer",
"summary": "A 2.5-minute narrated explainer of bubble sort, with pseudocode on the left and an animated dry run on the right in a 3Blue1Brown style. Claude Code made it from a two-sentence prompt, using the creator's own Manim skills and ElevenLabs narration.",
"category": "explainer",
"styles": [
"3blue1brown-style",
"split screen",
"pseudocode",
"algorithm",
"computer science",
"narrated",
"manim"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [],
"frameworks": [
"Manim"
],
"services": [
"ElevenLabs"
],
"skills": [
"The creator's own Manim skills (not published)"
]
},
"prompts": [
{
"label": "Prompt",
"text": "I want to create a professional eductional content to explain Bubble sort with a dry run example. Use split screen concept to display a psuedo code on the left and visualization of the dry run on the right in 3blue1Brown format and quality."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"notes": "Before this run, the creator spent a couple of hours refining Manim skills for Claude Code and wiring in ElevenLabs, so the prompt could be one-shot. Those skills aren't published, so results will differ. The model isn't named. The same post has a second video, on the HTTP protocol, made from a one-line prompt. The creator thinks the workflow would carry over to OpenCode, which also supports agent skills."
},
"requirements": [
"Manim installed locally",
"An ElevenLabs API key",
"Manim skills for your agent (the creator's own aren't published)"
],
"remix": "Swap \"Bubble sort with a dry run example\" for another algorithm or concept. Keep \"Use split screen concept\" and \"in 3blue1Brown format and quality\" for the same layout and look.",
"look": {
"summary": "A dark split screen in a 3Blue1Brown manner: a gray pseudocode panel on the left and a row of five numbered boxes on the right, with sorted boxes in green.",
"palette": "Dark navy-charcoal ground, a slightly lighter gray code panel, blue-outlined number boxes, green for sorted values, yellow headings, and orange pass labels.",
"type": "Serif headings (\"Pseudocode\" and \"Key Takeaways\" in yellow, \"Unsorted Array\" in white, \"Pass 1\" in orange) and a monospace font for the pseudocode, with the current line boxed in yellow.",
"composition": "A thin blue vertical divider gives about a third of the frame to code and two-thirds to the array. The array sits centered on the right under its label, and the pass number stays in the top-right corner.",
"sound": "ElevenLabs narration, according to the creator.",
"structure": "The unsorted array 5, 3, 8, 4, 2, the split screen with pseudocode, passes 1 to 3, by which point 8, 5, and 4 are green, the sorted array 2, 3, 4, 5, 8, and a Key Takeaways list."
},
"creator": {
"name": "u/akay1337",
"url": "https://www.reddit.com/user/akay1337/"
},
"source": {
"platform": "reddit",
"url": "https://www.reddit.com/r/manim/comments/1qrmo1k/manim_ai_generated_educational_videos/",
"title": "Manim + AI generated educational videos",
"community": "r/manim",
"posted": "2026-01-31",
"engagement": {
"upvotes": 7,
"comments": 11
}
},
"video": {
"watch": "https://www.reddit.com/r/manim/comments/1qrmo1k/manim_ai_generated_educational_videos/",
"hls": "https://v.redd.it/2ljjpdhrtkgg1/HLSPlaylist.m3u8"
},
"media": {
"duration": 156.7,
"aspect": "16:9",
"poster": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/poster.webp",
"storyboard": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/storyboard.webp",
"frames": [
{
"t": 8.7,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f1.webp"
},
{
"t": 26.1,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f2.webp"
},
{
"t": 43.5,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f3.webp"
},
{
"t": 61,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f4.webp"
},
{
"t": 78.4,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f5.webp"
},
{
"t": 95.8,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f6.webp"
},
{
"t": 113.2,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f7.webp"
},
{
"t": 130.6,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f8.webp"
},
{
"t": 148,
"src": "https://meetreference.com/media/split-screen-manim-explainer-bubble-sort/f9.webp"
}
]
}
},
{
"slug": "transparent-youtube-subscribe-lower",
"url": "https://meetreference.com/v/transparent-youtube-subscribe-lower/",
"brief": "https://meetreference.com/v/transparent-youtube-subscribe-lower.md",
"prompt_url": "https://meetreference.com/v/transparent-youtube-subscribe-lower/prompt.txt",
"title": "Transparent YouTube subscribe lower third",
"summary": "A 4-second transparent lower third: a white card with Remotion's avatar and subscriber count, and a button that changes from Subscribe to Subscribed. Claude Code scraped the channel page with curl for the details and rendered transparent ProRes.",
"category": "motion-graphics",
"styles": [
"lower third",
"transparent overlay",
"subscribe button",
"call to action",
"ui animation",
"minimal"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "use remotion best practices. this is our youtube channel: https://www.youtube.com/@remotion_dev. use curl scrape youtube to find the avatar and the subscriber count. multiple subscriber counts appear on the page, find the right one. make a white lower third that slides in from the bottom center. show the name, subscriber count and avatar. display a typical fixed width black youtube subscribe button that changes from \"Subscribe\" to \"Subscribed\". use a ease-out animation and for pressing in the button and a spring animation with a slight bounce once the button is released. fade out the lower third. render it as a transparent prores video."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"notes": "Setup, per the creator: bun create video --blank youtube-cta, cd youtube-cta, bun i, then claude. The X post shows the overlay placed over footage in an editor; the player here shows the clean render from the remotion.dev showcase."
},
"requirements": [
"A blank Remotion project (bun create video --blank youtube-cta, then bun i)",
"Remotion's agent skills, whose transparent-video skill the post announces"
],
"remix": "Swap the channel URL for yours, and change \"white lower third\", \"black youtube subscribe button\", and \"Subscribe\" / \"Subscribed\" for your own colors and button text. Keep \"render it as a transparent prores video.\" so it layers over footage.",
"look": {
"summary": "A single YouTube-style lower third on a transparency checkerboard: a white card with Remotion's avatar, name, and 2.2K subscribers, beside a pill button.",
"palette": "A white card with a soft shadow, black and bright-blue pill buttons, a blue play-shaped avatar, and grey secondary text, on the grey-and-white checkerboard that stands for transparency.",
"type": "A YouTube-like sans-serif: the channel name in bold, the subscriber count in small grey, and white button labels.",
"composition": "A wide 16:9 frame left almost empty, with the card low and centered. In the first frame the card is cut off by the bottom edge, and in the last it is half faded.",
"structure": "The card cut off at the bottom edge, then in place with a black Subscribe button, then with a blue Subscribed button, and finally half faded."
},
"creator": {
"name": "@Remotion",
"url": "https://x.com/Remotion"
},
"source": {
"platform": "x",
"url": "https://x.com/Remotion/status/2017286966593642570",
"title": "New skill: Transparent videos!",
"posted": "2026-01-30",
"engagement": {
"comments": 6,
"likes": 451,
"reposts": 19,
"views": 35007
}
},
"video": {
"watch": "https://www.remotion.dev/prompts/transparent-call-to-action-overlay",
"hls": "https://stream.mux.com/00KwCg00hc01Ugk5UjXD02MuT47EuZSshmbIbRkeNoZyyaM.m3u8"
},
"media": {
"duration": 4.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/transparent-youtube-subscribe-lower/poster.webp",
"storyboard": "https://meetreference.com/media/transparent-youtube-subscribe-lower/storyboard.webp",
"frames": [
{
"t": 0.2,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f1.webp"
},
{
"t": 0.7,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f2.webp"
},
{
"t": 1.1,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f3.webp"
},
{
"t": 1.6,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f4.webp"
},
{
"t": 2,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f5.webp"
},
{
"t": 2.5,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f6.webp"
},
{
"t": 2.9,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f7.webp"
},
{
"t": 3.4,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f8.webp"
},
{
"t": 3.8,
"src": "https://meetreference.com/media/transparent-youtube-subscribe-lower/f9.webp"
}
]
}
},
{
"slug": "korean-stock-market-report-infographic",
"url": "https://meetreference.com/v/korean-stock-market-report-infographic/",
"brief": "https://meetreference.com/v/korean-stock-market-report-infographic.md",
"prompt_url": "https://meetreference.com/v/korean-stock-market-report-infographic/prompt.txt",
"title": "Vertical Korean stock-market briefing",
"summary": "A 3-minute vertical stock report for 29 January 2026: dark cards split each ticker into cause, phenomenon, result and future, with Korean captions, a TTS voice and music. An AI agent built it in Remotion from a JSON dataset and an analysis in seven prompts.",
"category": "news",
"styles": [
"infographic",
"finance",
"vertical",
"glassmorphism",
"korean",
"narrated",
"captions"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [],
"frameworks": [
"Remotion",
"Tailwind CSS"
],
"services": [
"edge-tts"
],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "2026-01-29.json 2026-01-29-analysis.md\n 이 주가 리포트 문서를 바탕으로 remotion skills를 활용하여 \n2026-01-29-analysis.md\n문서를 충분히 읽어줄 수 있을 만큼의 길이로 투자 분석 보고서 영상을 만들어줘! 한국어 설명 자막을 함께 넣어서 제작해줘!\n가독성이 높은 인포그래픽 형태의 리포트를 잘 만들어서 영상을 생성해줘!"
},
{
"label": "Follow-up 1",
"text": "주가 리포트를 앵커가 읽어주는 것처럼 한국어 설명 자막을 넣어줘"
},
{
"label": "Follow-up 2",
"text": "구글 TTS한국 여성 음성을 가져와서 자막 싱크와 맞춰서 자막을 읽어주는 음성을 만들고 영상에 추가해줘"
},
{
"label": "Follow-up 3",
"text": "TTS 음성을 한국 여성 음성으로 교체하고\nTTS 가 다 읽기 전에 영상이 전환되면서 TTS 음성이 겹쳐지고 있어 \nTTS 음성 속도를 1.5배속으로 올리고 TTS 음성이 겹치지 않게 영상길이를 재조정하고 자막과 TTS음성 싱크를 재조정해줘"
},
{
"label": "Follow-up 4",
"text": "주가 리포트 인포그래픽 디자인을 좀 더 눈에 잘 들어오게 글씨랑 이미지를 추가해서 가독성을 높이고 에쁘게 보이게 수정해줘"
},
{
"label": "Follow-up 5",
"text": "영상에 TTS 음성 간에 공백이 너무 많은데 공백이 거의 없도록 컷을 좀 편집해줘"
},
{
"label": "Follow-up 6",
"text": "주가 리포트 영상에 어울리는 무료 배경음악 BGM을 다운받아서 TTS 음성에 방해되지 않는 볼륨으로 잔잔하게 넣어줘"
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "Seven prompts, in Korean, sent in order: build the report video from the JSON file and the analysis doc, add anchor-style captions, add a Korean female TTS voice synced to the captions, replace the voice and speed it to 1.5x without overlaps, redesign the infographic, cut the gaps between lines, and add quiet free background music. The agent wrote scripts/generate_tts.py, which uses edge-tts with the ko-KR-SunHiNeural voice, although the prompt asks for Google TTS. The README suggests Antigravity, Claude Code, Codex, Cursor and others but doesn't say which one made this video. Its step-by-step guide shows edited versions of these prompts; PROMPT.md, used here, keeps the originals. The project was created with npx create-video@latest with agent skills turned on."
},
"requirements": [
"A Remotion project from npx create-video@latest (Blank template, TailwindCSS and agent skills turned on)",
"The repo's prompt/2026-01-29.json and prompt/2026-01-29-analysis.md, or your own data and analysis",
"Python with edge-tts for the voice script"
],
"remix": "Swap the two files named at the start of the first prompt (\"2026-01-29.json 2026-01-29-analysis.md\") for your own data and analysis. To change the language, edit \"한국어\" (Korean) in the caption prompts and \"한국 여성 음성\" (Korean female voice) in the voice prompts.",
"look": {
"summary": "One dark card per ticker in a vertical frame: the stock's name and daily change at the top, a quoted headline, a two-by-two grid labeled CAUSE, PHENOMENON, RESULT and FUTURE with one cell lit, and a LIVE · AI ANALYST BRIEFING caption bar at the bottom.",
"palette": "Deep navy and near-black, with glowing cell fills in blue, violet, amber and teal, and green, yellow or gray for the percentage change.",
"type": "Bold Korean sans-serif for ticker names and quotes, small bilingual cell labels such as 원인 (CAUSE) with tiny icons, a large percentage figure top right, and the quoted caption line in the bottom bar.",
"composition": "Each 9:16 frame is filled by one card: a header row, a centered quote, two rows of two cells, and the caption bar near the bottom edge.",
"sound": "A Korean female TTS voice reading the captions over quiet free background music, per the prompts; the agent-written script uses edge-tts.",
"structure": "Eight tickers in turn, from Samsung Electronics (+1.8%) and LG Energy Solution (+5.5%) to a KRX gold ETF and smaller names, each with a different cell lit, then a closing market-summary card (시장 요약)."
},
"creator": {
"name": "freelife1191",
"url": "https://github.com/freelife1191"
},
"source": {
"platform": "github",
"url": "https://github.com/freelife1191/remotion-skills-tutorial/blob/main/prompt/PROMPT.md",
"title": "AI Agent + Remotion Skills 비디오 생성 튜토리얼",
"posted": "2026-01-29"
},
"video": {
"watch": "https://github.com/freelife1191/remotion-skills-tutorial/blob/main/assets/StockReport-0129.mp4",
"mp4": "https://raw.githubusercontent.com/freelife1191/remotion-skills-tutorial/main/assets/StockReport-0129.mp4"
},
"media": {
"duration": 186.7,
"aspect": "9:16",
"poster": "https://meetreference.com/media/korean-stock-market-report-infographic/poster.webp",
"storyboard": "https://meetreference.com/media/korean-stock-market-report-infographic/storyboard.webp",
"frames": [
{
"t": 10.4,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f1.webp"
},
{
"t": 31.1,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f2.webp"
},
{
"t": 51.9,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f3.webp"
},
{
"t": 72.6,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f4.webp"
},
{
"t": 93.4,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f5.webp"
},
{
"t": 114.1,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f6.webp"
},
{
"t": 134.8,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f7.webp"
},
{
"t": 155.6,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f8.webp"
},
{
"t": 176.3,
"src": "https://meetreference.com/media/korean-stock-market-report-infographic/f9.webp"
}
]
}
},
{
"slug": "cursor-agent-skills-announcement-inside",
"url": "https://meetreference.com/v/cursor-agent-skills-announcement-inside/",
"brief": "https://meetreference.com/v/cursor-agent-skills-announcement-inside.md",
"prompt_url": "https://meetreference.com/v/cursor-agent-skills-announcement-inside/prompt.txt",
"title": "Cursor Agent Skills announcement",
"summary": "A 20-second, 60fps announcement for Cursor's Agent Skills: typewriter title cards, a screen recording with one continuous eased zoom, and Cursor's end card. Made in Cursor with Remotion skills and a brand-guidelines rule, one-shot in three minutes.",
"category": "product-promo",
"styles": [
"launch announcement",
"typewriter text",
"title cards",
"screen recording",
"zoom",
"minimal"
],
"made_with": {
"agents": [
"Cursor"
],
"models": [],
"frameworks": [
"Remotion"
],
"services": [],
"skills": [
"Remotion skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "Create a video project announcing Agent Skills, following Cursor brand rules. 1920×1080, 60fps. Typewriter text effect at about 1 character per frame, then hold for 3 seconds after typing on every title card. Line 1 types first, then line 2.\n\nCard 1: “Agent Skills are now available” on line 1 and “in Cursor” on line 2\nCard 2: “Skills let agents discover and run” and line 2 “specialized prompts and code.”\nThen play the skills.mp4 recording full-screen, framed top-aligned for first 2 seconds, then zoom in (with easing) to the top-left by about 125%. Should be continuous zoom!\nFinal card: “This video was made entirely in Cursor\" on line 1 and \"with Remotion skills.” on line 2, then hold;\nEnd with the existing end.mp4 animation full-screen.\n\nRender and open the file inside Cursor’s browser tool to let me see it here!\n\n# Notes:\n# 1. Uses an existing screen recording @ericzakariasson made.\n# 2. Uses our existing end card animation.\n# 3. Had a Cursor rule with our brand guidelines and colors."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"time": "About 3 minutes, including reviewing the plan",
"time_short": "3m",
"notes": "Uses an existing screen recording by @ericzakariasson and Cursor's existing end-card animation, with a Cursor rule holding the brand guidelines and colors. Cursor's browser played the render back and checked it against the brand guidelines."
},
"requirements": [
"Your own screen recording (skills.mp4) and end card (end.mp4)",
"A Cursor rule with your brand guidelines and colors",
"A Remotion project with Remotion's agent skills"
],
"remix": "Rewrite the card text (\"Agent Skills are now available\" and the lines after it) for your own launch, swap \"skills.mp4\" and \"end.mp4\" for your files, and point \"following Cursor brand rules\" at your own brand rule.",
"look": {
"summary": "A quiet launch sequence: centered sentences on off-white, a framed screen recording of Cursor running a skill, and Cursor's logo on black.",
"palette": "Off-white and warm grey with dark grey type. The recording is Cursor's light theme over a softly blurred landscape, and the end card is black with a white logo.",
"type": "A single light sans-serif, centered, two lines per card; one card shows the text cursor partway through a sentence.",
"composition": "Small centered text with wide empty margins. The recording sits in a window over the blurred backdrop and is framed tighter on its top left in later frames.",
"structure": "\"Agent Skills are now available / in Cursor\", \"Skills let agents discover and run / specialized prompts and code.\", the screen recording of a chat asking for a dashboard with SKILL.md open beside it, framed tighter on the top left, \"This video was made entirely in Cursor / with Remotion skills.\", then the Cursor cube logo on black."
},
"creator": {
"name": "@edwinarbus",
"url": "https://x.com/edwinarbus"
},
"source": {
"platform": "x",
"url": "https://x.com/edwinarbus/status/2015551101874118730",
"title": "Made this video with @cursor_ai + @Remotion skills.",
"posted": "2026-01-25",
"engagement": {
"comments": 25,
"likes": 423,
"reposts": 19,
"views": 65231
}
},
"video": {
"watch": "https://x.com/edwinarbus/status/2015551101874118730",
"mp4": "https://video.twimg.com/amplify_video/2015548245901033472/vid/avc1/1920x1080/7Jbg8ck6-34hqilV.mp4?tag=21"
},
"media": {
"duration": 20.2,
"aspect": "16:9",
"poster": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/poster.webp",
"storyboard": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/storyboard.webp",
"frames": [
{
"t": 1.1,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f1.webp"
},
{
"t": 3.4,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f2.webp"
},
{
"t": 5.6,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f3.webp"
},
{
"t": 7.9,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f4.webp"
},
{
"t": 10.1,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f5.webp"
},
{
"t": 12.4,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f6.webp"
},
{
"t": 14.6,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f7.webp"
},
{
"t": 16.9,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f8.webp"
},
{
"t": 19.1,
"src": "https://meetreference.com/media/cursor-agent-skills-announcement-inside/f9.webp"
}
]
}
},
{
"slug": "presscut-product-demo-video-elevenlabs",
"url": "https://meetreference.com/v/presscut-product-demo-video-elevenlabs/",
"brief": "https://meetreference.com/v/presscut-product-demo-video-elevenlabs.md",
"prompt_url": "https://meetreference.com/v/presscut-product-demo-video-elevenlabs/prompt.txt",
"title": "Newsletter app demo built from its own UI",
"summary": "An 84-second demo of the creator's newsletter app, Presscut, rebuilt in Remotion from the app's own React components. Claude Code planned the scenes, then used ElevenLabs through MCP for per-scene voiceover, background music, and UI sounds.",
"category": "product-promo",
"styles": [
"product demo",
"saas",
"ui animation",
"voiceover",
"remotion",
"sound design"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion",
"React"
],
"services": [
"ElevenLabs"
],
"skills": [
"Remotion skill",
"ElevenLabs MCP"
]
},
"prompts": [
{
"label": "Prompt",
"text": "𝙲𝚛𝚎𝚊𝚝𝚎 𝚊 𝚍𝚎𝚖𝚘 𝚟𝚒𝚍𝚎𝚘 𝚘𝚏 𝚝𝚑𝚎 𝙿𝚛𝚎𝚜𝚜𝚌𝚞𝚝 𝚊𝚙𝚙/𝚙𝚛𝚘𝚍𝚞𝚌𝚝 𝚞𝚜𝚒𝚗𝚐 𝚛𝚎𝚖𝚘𝚝𝚒𝚘𝚗. 𝚄𝚜𝚎 𝚛𝚎𝚊𝚌𝚝 𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚎𝚗𝚝𝚜 𝚝𝚘 𝚛𝚎𝚙𝚕𝚒𝚌𝚊𝚝𝚎 𝚄𝙸 𝚎𝚕𝚎𝚖𝚎𝚗𝚝𝚜 𝚊𝚗𝚍 𝚛𝚎𝚙𝚕𝚒𝚌𝚊𝚝𝚎 𝚝𝚑𝚎 𝚄𝙸 𝚘𝚏 𝚝𝚑𝚎 𝚊𝚙𝚙 𝚊𝚜 𝚌𝚕𝚘𝚜𝚎𝚕𝚢 𝚊𝚜 𝚙𝚘𝚜𝚜𝚒𝚋𝚕𝚎. 𝚃𝚑𝚎 𝚊𝚙𝚙 𝚑𝚊𝚜 𝚊 𝙻𝙾𝚃 𝚘𝚏 𝚏𝚎𝚊𝚝𝚞𝚛𝚎𝚜/𝚏𝚞𝚗𝚌𝚝𝚒𝚘𝚗𝚊𝚕𝚒𝚝𝚢, 𝚜𝚘 𝚝𝚊𝚔𝚎 𝚐𝚞𝚒𝚍𝚊𝚗𝚌𝚎 𝚏𝚛𝚘𝚖 𝚝𝚑𝚎 𝚖𝚊𝚛𝚔𝚎𝚝𝚒𝚗𝚐 𝚑𝚘𝚖𝚎 𝚙𝚊𝚐𝚎/𝚒𝚗𝚍𝚎𝚡 𝚏𝚘𝚛 𝚠𝚑𝚊𝚝 𝚝𝚘 𝚑𝚒𝚐𝚑𝚕𝚒𝚐𝚑𝚝, 𝚠𝚑𝚒𝚕𝚎 𝚔𝚎𝚎𝚙𝚒𝚗𝚐 𝚕𝚊𝚗𝚐𝚞𝚊𝚐𝚎 𝚜𝚒𝚖𝚙𝚕𝚎 𝚊𝚗𝚍 𝚝𝚘-𝚝𝚑𝚎-𝚙𝚘𝚒𝚗𝚝. 𝚁𝚎𝚊𝚕𝚕𝚢 𝚐𝚛𝚒𝚕𝚕 𝚖𝚎 𝚠𝚒𝚝𝚑 𝚚𝚞𝚎𝚜𝚝𝚒𝚘𝚗𝚜 𝚝𝚘 𝚗𝚊𝚒𝚕 𝚍𝚘𝚠𝚗 𝚎𝚡𝚊𝚌𝚝𝚕𝚢 𝚑𝚘𝚠 𝚝𝚑𝚎 𝚏𝚒𝚗𝚊𝚕 𝚟𝚒𝚍𝚎𝚘 𝚜𝚑𝚘𝚞𝚕𝚍 𝚕𝚘𝚘𝚔/𝚏𝚎𝚎𝚕 𝚊𝚗𝚍 𝚠𝚑𝚊𝚝 𝚌𝚘𝚗𝚝𝚎𝚗𝚝 𝚜𝚑𝚘𝚞𝚕𝚍 𝚋𝚎 𝚝𝚑𝚎𝚛𝚎. 𝚃𝚑𝚎 𝚞𝚕𝚝𝚒𝚖𝚊𝚝𝚎 𝚐𝚘𝚊𝚕 𝚘𝚏 𝚝𝚑𝚒𝚜 𝚒𝚜 𝚝𝚘 𝚛𝚎𝚙𝚕𝚒𝚌𝚊𝚝𝚎 𝚠𝚑𝚊𝚝 𝚖𝚎, 𝚝𝚑𝚎 𝚏𝚘𝚞𝚗𝚍𝚎𝚛, 𝚠𝚘𝚞𝚕𝚍 𝚋𝚎 𝚜𝚑𝚘𝚠𝚒𝚗𝚐/𝚍𝚘𝚒𝚗𝚐 𝚠𝚒𝚝𝚑 𝚊 𝚙𝚛𝚘𝚍𝚞𝚌𝚝 𝚍𝚎𝚖𝚘 𝚠𝚒𝚝𝚑 𝚊 𝚌𝚞𝚜𝚝𝚘𝚖𝚎𝚛."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"time": "About 2 to 3 hours",
"time_short": "2–3h",
"cost": "No extra Claude cost on a 20x Max plan; the creator puts it at about $700 of Opus 4.5 tokens at API prices. About 12,000 ElevenLabs credits for the voiceovers, music, and sound effects, including regenerations.",
"notes": "Started inside the Presscut codebase, so Claude reused the app's React components and needed no new art. It planned the timing, scenes, text, and graphics, then about an hour of back-and-forth followed (\"shorten the scene by 1.5 seconds\", \"move the app UI up by 12 pixels\"), none of it published. ElevenLabs, through its MCP server, made a separate voiceover clip per scene that Claude lined up, background music at the video's exact length, and click, typing, and success sounds. Asked how long the full video took to render, the creator replied \"about 5 seconds\". The creator posted the prompt in a monospace Unicode font (X has no code formatting), and it is kept exactly as posted. A plain-text copy with small transcription differences is on the Remotion prompt showcase."
},
"requirements": [
"Your product's codebase with its React components",
"Remotion's agent skill",
"An ElevenLabs API key and the ElevenLabs MCP server"
],
"remix": "Replace \"the Presscut app/product\" with yours and run it inside your own codebase. \"Really grill me with questions\" makes the agent interview you before it builds, so be ready to answer.",
"look": {
"summary": "A clean product walkthrough for a newsletter tool: the app's own screens in a browser window on an off-white ground with a faded halftone forest, each under a bold serif caption, ending on a red-orange brand card.",
"palette": "Off-white and pale grey with a faded halftone tree texture, the app's red-orange sidebar and buttons, and black type; the end card turns full red-orange.",
"type": "A heavy display serif for captions (\"Writing newsletter commentary takes forever.\", \"AI writes the first draft\", \"See what gets clicked\") with small grey sans-serif subtitles, plus the app's own UI type inside the window.",
"composition": "A browser window with traffic-light dots in the upper two-thirds and the caption centered below. The opening scatters source cards (TechCrunch, Hacker News, Paul Graham, The Verge) around a \"writing commentary\" card.",
"sound": "ElevenLabs voiceover made scene by scene, background music in an \"indie tech aesthetic\", and click, typing, and success sounds, according to the creator.",
"structure": "Scattered news-source cards over \"Writing newsletter commentary takes forever.\", a faded transition, the Create New Edition screen (\"AI writes the first draft\", shown twice as drafts fill in), Preview & Send (\"Pick a theme and send\"), Analytics (\"See what gets clicked\"), Subscribers (\"Manage your subscribers\"), Design & Branding (\"Customize your brand\"), and the end card \"Smarter curation. Faster publishing.\" with the Presscut logo and presscut.co."
},
"creator": {
"name": "@Shpigford",
"url": "https://x.com/Shpigford"
},
"source": {
"platform": "x",
"url": "https://x.com/Shpigford/status/2015250030815584647",
"title": "the /𝚛𝚎𝚖𝚘𝚝𝚒𝚘𝚗 skill in claude code is my new favorite ai tool.",
"posted": "2026-01-25",
"engagement": {
"comments": 46,
"likes": 916,
"reposts": 53,
"views": 75101
}
},
"video": {
"watch": "https://x.com/Shpigford/status/2015250030815584647",
"mp4": "https://video.twimg.com/amplify_video/2015246514205937665/vid/avc1/1920x1080/BiSiD5zbxUFaRFnn.mp4?tag=21"
},
"media": {
"duration": 84.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/poster.webp",
"storyboard": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/storyboard.webp",
"frames": [
{
"t": 4.7,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f1.webp"
},
{
"t": 14,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f2.webp"
},
{
"t": 23.4,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f3.webp"
},
{
"t": 32.7,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f4.webp"
},
{
"t": 42,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f5.webp"
},
{
"t": 51.4,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f6.webp"
},
{
"t": 60.7,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f7.webp"
},
{
"t": 70.1,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f8.webp"
},
{
"t": 79.4,
"src": "https://meetreference.com/media/presscut-product-demo-video-elevenlabs/f9.webp"
}
]
}
},
{
"slug": "countdown-10-biggest-airports-as-3d-map",
"url": "https://meetreference.com/v/countdown-10-biggest-airports-as-3d-map/",
"brief": "https://meetreference.com/v/countdown-10-biggest-airports-as-3d-map.md",
"prompt_url": "https://meetreference.com/v/countdown-10-biggest-airports-as-3d-map/prompt.txt",
"title": "The 10 biggest airports as a 3D map tour",
"summary": "A 60-second map animation that counts down from the 10th to the 1st biggest airport, zooming in and orbiting 360 degrees over 3D buildings at each, with a lower third for the name and passenger numbers. One-shot with Remotion's Maps skill and a Mapbox token.",
"category": "data-viz",
"styles": [
"map animation",
"3d buildings",
"countdown",
"lower third",
"aerial orbit",
"remotion"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [],
"frameworks": [
"Remotion"
],
"services": [
"Mapbox"
],
"skills": [
"Remotion Agent Skills"
]
},
"prompts": [
{
"label": "Prompt",
"text": "use remotion best practices. create a map animation where on each of the 10 biggest airports, you zoom in and rotate around the area by 360 degrees. then you zoom out and fly to the next one. when an airport is visible, show a lower third with the airport name and the passenger numbers. show 3d buildings. from from 10th place to 1st place."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"notes": "The third post in the creator's thread announcing a Maps skill for Remotion's agent skills, which needs a Mapbox token and a reinstall of the skills. The creator says the keyframes are not perfect, but unlike a video model the result is code you can keep iterating on. The thread doesn't name the agent or the model."
},
"requirements": [
"A Remotion project",
"Remotion Agent Skills, reinstalled to get the Maps skill (npx skills add remotion-dev/skills)",
"A Mapbox access token"
],
"remix": "Change \"the 10 biggest airports\" and what the lower third shows (\"the airport name and the passenger numbers\") for another ranked list of places. \"from from 10th place to 1st place\" sets the order; the doubled word is in the original.",
"look": {
"summary": "A pale aerial tour of ten airports on a light vector map, tilted over runways and terminals, with a dark lower-third card giving each airport's rank, code, and yearly passengers, from Paris Charles de Gaulle at #10 to Atlanta Hartsfield-Jackson at #1.",
"palette": "A light map style of lavender-gray runways and roads, pale green parks, sky-blue water, and off-white land, with a near-black lower third in white and bright blue.",
"type": "A dark rounded card with a blue edge: spaced blue capitals for the rank (\"#10 BUSIEST AIRPORT\"), the airport name in bold white sans-serif, and the code in blue beside the traffic in gray (\"CDG · 67.4M passengers/year\").",
"composition": "16:9 oblique aerial views tilted toward the horizon over runways and terminals, with the card in the bottom-left corner at each airport. Between airports come flatter overhead views of coastline, rivers, and farmland.",
"structure": "Paris Charles de Gaulle at #10, a terminal with parallel runways seen down their length, an overhead coastline and a stretch of farmland and river between stops, another airport's terminals, Dallas/Fort Worth's semicircular terminals at #4 (81.8M), Tokyo Haneda on the water at #3 (87.0M), Dubai International at #2 (87.0M), and Atlanta Hartsfield-Jackson at #1 (104.7M)."
},
"creator": {
"name": "@JNYBGR",
"url": "https://x.com/JNYBGR"
},
"source": {
"platform": "x",
"url": "https://x.com/JNYBGR/status/2015072207571943701",
"title": "OK, one more! This was one-shot:",
"posted": "2026-01-24",
"engagement": {
"comments": 4,
"likes": 55,
"reposts": 0,
"views": 4585
}
},
"video": {
"watch": "https://x.com/JNYBGR/status/2015072207571943701",
"mp4": "https://video.twimg.com/amplify_video/2015071179988504576/vid/avc1/1920x1080/z3KRhAgL-yJso1nr.mp4?tag=21"
},
"media": {
"duration": 60.1,
"aspect": "16:9",
"poster": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/poster.webp",
"storyboard": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/storyboard.webp",
"frames": [
{
"t": 3.3,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f1.webp"
},
{
"t": 10,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f2.webp"
},
{
"t": 16.7,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f3.webp"
},
{
"t": 23.4,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f4.webp"
},
{
"t": 30,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f5.webp"
},
{
"t": 36.7,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f6.webp"
},
{
"t": 43.4,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f7.webp"
},
{
"t": 50.1,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f8.webp"
},
{
"t": 56.8,
"src": "https://meetreference.com/media/countdown-10-biggest-airports-as-3d-map/f9.webp"
}
]
}
},
{
"slug": "remotion-agent-skills-now-available",
"url": "https://meetreference.com/v/remotion-agent-skills-now-available/",
"brief": "https://meetreference.com/v/remotion-agent-skills-now-available.md",
"prompt_url": "https://meetreference.com/v/remotion-agent-skills-now-available/prompt.txt",
"title": "Remotion's Agent Skills launch animation",
"summary": "The 8-second launch clip for Remotion's Agent Skills: a tilted macOS terminal types the install command, then gives way to a title and a Remotion, Claude Code and OpenCode logo lockup. The team published all 35 prompts from the Claude Code session.",
"category": "product-promo",
"styles": [
"product launch",
"terminal",
"typewriter",
"3d tilt",
"logo lockup",
"light theme",
"remotion"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus 4.5"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "we are creating a remotion animation for a new command \"npx skills add remotion-dev/remotion\". first start out by making a new composition,\n1280x1000px of a macos terminal window-like console that has an empty prompt in it. light theme"
},
{
"label": "Follow-up 1",
"text": "okay, nice. remove the background and the font size needs to be a lot bigger."
},
{
"label": "Follow-up 2",
"text": "add some margin nonetheless, but keep it transparent."
},
{
"label": "Follow-up 3",
"text": "make the terminal content a separate component in a new file. add a typewriter animation to it that types out \"npx skills add remotion-dev/skills\""
},
{
"label": "Follow-up 4",
"text": "keep the cursor in the end, and refactor it into it's own component in it's own file. keep it blinking while there is no typing."
},
{
"label": "Follow-up 5",
"text": "nice. increase the font size more, and make the composition a bit less smaller. mostly less tall"
},
{
"label": "Follow-up 6",
"text": "make the composition is a bit taller nonetheless"
},
{
"label": "Follow-up 7",
"text": "height of 700"
},
{
"label": "Follow-up 8",
"text": "ok, make a new master composition and and the current composition as a sequence. give the master composition a grayish background"
},
{
"label": "Follow-up 9",
"text": "use a sequence, not a series"
},
{
"label": "Follow-up 10",
"text": "add a 3d rotation to the temrinal. like 20 degree of x and y rotation."
},
{
"label": "Follow-up 11",
"text": "add the transform to the sequence, not the terminal itself"
},
{
"label": "Follow-up 12",
"text": "okay, over total length of the composition, slowly rotate Y axis from 20 to -20 degrees"
},
{
"label": "Follow-up 13",
"text": "run the command \"npx skills install remotion-dev/skills\" yourself. look at the output and add the beginning of the output as terminal content"
},
{
"label": "Follow-up 14",
"text": "can you add a bit more of the content?"
},
{
"label": "Follow-up 15",
"text": "stagger the lines, make one appear every 50ms"
},
{
"label": "Follow-up 16",
"text": "in the master composition, make the terminal jump in from the bottom using a fast spring animation, but no bounce"
},
{
"label": "Follow-up 17",
"text": "render it"
},
{
"label": "Follow-up 18",
"text": "make a new composition and add it to Root.tsx. it should display the remotion logo as an image (Without title (light mode) from\nhttps://remotion.dev/brand) as well as a \"+\" as well as a claude code logo and opencode logo"
},
{
"label": "Follow-up 19",
"text": "okay nice. remove the second plus and make the opencode combo quite a bit smaller."
},
{
"label": "Follow-up 20",
"text": "remove the background from this composition, and make the claude code logo also considerably smaller"
},
{
"label": "Follow-up 21",
"text": "make the claude code a bit bigger"
},
{
"label": "Follow-up 22",
"text": "the plus should be a bit darker"
},
{
"label": "Follow-up 23",
"text": "add this composition to the master composition as a sequence coming in after the terminal output is done. the logocombo should be behind the\nterminal. push the terminal down again when it is done with the output"
},
{
"label": "Follow-up 24",
"text": "make the background of the master composition the color #FFF"
},
{
"label": "Follow-up 25",
"text": "make it the color #f8fafc"
},
{
"label": "Follow-up 26",
"text": "the logomark should actually be a series of 2 sequences. first, for 2 seconds show text \"Agent Skills now available\" in GT Planar font, font size 80,\nmedium weight, only then show the logo"
},
{
"label": "Follow-up 27",
"text": "make the font only 60px but bolder"
},
{
"label": "Follow-up 28",
"text": "add a scale animation to the text, use an easing out curve and it half a second long"
},
{
"label": "Follow-up 29",
"text": "nice! almost done.\n\n- make the composition only 8 seconds long.\n- make the sequence holding the terminal a bit bigger using a scale transform. increase the scale transform very slightly over time"
},
{
"label": "Follow-up 30",
"text": "make the scale transform a bit 0.05 less"
},
{
"label": "Follow-up 31",
"text": "actually, we should decrease the scale more, to only 0.9 and it goes to 1\nbut we need to position the terminal 100px lower overall for it to look nice"
},
{
"label": "Follow-up 32",
"text": "the -20 to 20 degree rotation is a bit much. let's only do 10 to -10"
},
{
"label": "Follow-up 33",
"text": "ok, new idea! instead of pushing the terminal down, flip the terminal towards the camera by rotating the X axis. this might need a perspective on the\nparent and the transform origin needs to be at the bottom. maybe wrap it it another sequence to make it easier"
},
{
"label": "Follow-up 34",
"text": "boom! this is awesome! render the video"
}
],
"fidelity": "verbatim",
"process": {
"one_shot": false,
"notes": "Built by conversation in one Claude Code v2.1.12 session on Claude Max, with 35 short prompts and no spec up front. Claude ran the real install command itself and used the output as terminal text, fetched the Remotion brand page, and searched the web for the Claude Code and OpenCode logos. The prompts are the user turns of the exported terminal transcript: some line breaks are terminal wrapping, and the slash commands are left out. The first prompt says \"remotion-dev/remotion\"; later ones use \"remotion-dev/skills\". The reply that links the gist also carries a 74-second making-of video."
},
"requirements": [
"Node.js and a Remotion project (npx create-video)"
],
"remix": "Replace the command in the first prompt and the title text \"Agent Skills now available\" with your own, and point the logo prompt at your brand page instead of \"https://remotion.dev/brand\". The rest are small visual nudges you can reuse in order.",
"look": {
"summary": "A clean light-theme product clip: a white macOS terminal tilted in 3D with \"npx skills add remotion-dev/skills\" at the prompt and the install log under an ASCII \"SKILLS\" banner, followed by a title card and a logo lockup.",
"palette": "Near-white slate background, a white terminal with gray chrome and red, yellow and green window dots, dark gray type, and the Remotion blue and Claude orange in the closing logos.",
"type": "Monospace terminal text with a green prompt and block cursor, a chunky ASCII-art banner, and a bold geometric sans for \"Agent Skills now available\".",
"composition": "The terminal fills most of the frame at a slight 3D tilt; the title and then the logo row sit alone, centered on the plain background.",
"structure": "The command at three stages of typing, the SKILLS banner and install log, the title card \"Agent Skills now available\", and the Remotion + Claude Code and OpenCode logo lockup."
},
"creator": {
"name": "@Remotion",
"url": "https://x.com/Remotion"
},
"source": {
"platform": "x",
"url": "https://x.com/Remotion/status/2013626968386765291",
"title": "Remotion now has Agent Skills - make videos just with Claude Code!",
"posted": "2026-01-20",
"engagement": {
"comments": 794,
"likes": 21930,
"reposts": 1661,
"views": 18859459
}
},
"video": {
"watch": "https://x.com/Remotion/status/2013626968386765291",
"mp4": "https://video.twimg.com/amplify_video/2013626156570877952/vid/avc1/1080x700/uqJ_M_PNHHPt190d.mp4?tag=21"
},
"media": {
"duration": 8.1,
"aspect": "1080:700",
"poster": "https://meetreference.com/media/remotion-agent-skills-now-available/poster.webp",
"storyboard": "https://meetreference.com/media/remotion-agent-skills-now-available/storyboard.webp",
"frames": [
{
"t": 0.4,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f1.webp"
},
{
"t": 1.3,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f2.webp"
},
{
"t": 2.2,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f3.webp"
},
{
"t": 3.1,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f4.webp"
},
{
"t": 4,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f5.webp"
},
{
"t": 4.9,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f6.webp"
},
{
"t": 5.8,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f7.webp"
},
{
"t": 6.7,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f8.webp"
},
{
"t": 7.6,
"src": "https://meetreference.com/media/remotion-agent-skills-now-available/f9.webp"
}
]
}
},
{
"slug": "manim-walkthrough-chi-square-goodness",
"url": "https://meetreference.com/v/manim-walkthrough-chi-square-goodness/",
"brief": "https://meetreference.com/v/manim-walkthrough-chi-square-goodness.md",
"prompt_url": "https://meetreference.com/v/manim-walkthrough-chi-square-goodness/prompt.txt",
"title": "Chi-square goodness-of-fit test in Manim",
"summary": "A 38-second Manim animation that works a chi-square goodness-of-fit test on daily zoo visitors, from the hypotheses to the decision. Gemini wrote the script from a one-line request, and the creator, new to Manim, ran it on Windows and pasted any errors back.",
"category": "math-science",
"styles": [
"manim",
"statistics",
"step-by-step",
"equations",
"lesson",
"no narration"
],
"made_with": {
"agents": [
"Gemini"
],
"models": [],
"frameworks": [
"Manim",
"Python"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "manim script to show 6 big steps of solving a statistics chi-square goodness of fit test problem related to zoo visitor daily uniform distribution, also guide me how to run everything because i am a newbie to Manim"
}
],
"fidelity": "verbatim",
"process": {
"notes": "The creator's steps: install Python and Manim on Windows, get the script from Gemini with this prompt, save it as chi_square_test.py, and run manim -pql chi_square_test.py ChiSquareTestAnimation (a quick low-quality render). If it errors, paste the terminal error back into Gemini for a new full script. Whether that was needed here isn't stated, and neither is the Gemini version."
},
"requirements": [
"Python and Manim installed locally",
"Any Gemini chat to write the script"
],
"remix": "Change \"a statistics chi-square goodness of fit test problem related to zoo visitor daily uniform distribution\" to your own problem, and \"6 big steps\" to the number of steps. Drop the last clause if you already know how to run Manim.",
"look": {
"summary": "A plain Manim walkthrough on black that works a chi-square goodness-of-fit test on zoo visitors: hypotheses, expected frequencies with an observed-against-expected table for Monday to Friday, the test statistic and degrees of freedom, and the critical-value comparison and conclusion.",
"palette": "A black background with white text and table lines, yellow-green step headings, and a green underline arrow in the comparison.",
"type": "Manim's LaTeX serif throughout: a white title \"Chi-Square Goodness of Fit Test: Zoo Visitors\", yellow-green step headings (\"Step 2: Calculate Expected Frequencies (E)\"), and typeset math (\"E = N/k = 260/5 = 52\", \"χ² = 6.46\", \"df = k − 1 = 5 − 1 = 4\").",
"composition": "16:9 with everything left-aligned under the title at the top: a step heading, then lines of math stacked below it, and the table at the left edge. Most of the frame stays empty black.",
"structure": "The title on black, Step 1 with H₀ \"Visitors are uniformly distributed\", Hₐ, and α = 0.05, Step 2 with E = 260/5 = 52 and a table of observed counts (48, 55, 60, 42, 55) against 52 each, Step 3 with the χ² formula, χ² = 6.46, and df = 4, then \"Step 5 & 6: Find Critical Value and Make Decision\" (there is no Step 4 heading) with χ²crit = 9.488, \"6.46 < 9.488 ⇒ Fail to Reject H₀\", and \"Conclusion: Visitor distribution is Uniform.\""
},
"creator": {
"name": "Leony Tham",
"url": "https://www.youtube.com/@leonytham"
},
"source": {
"platform": "youtube",
"url": "https://www.youtube.com/watch?v=MOfi-MXjuio",
"title": "Statistics Chi Square Test Goodness of Fit Animation - using Manim + Python + Gemini in Windows 10",
"posted": "2025-12-10",
"engagement": {
"views": 8
}
},
"video": {
"watch": "https://www.youtube.com/watch?v=MOfi-MXjuio",
"youtube": "MOfi-MXjuio",
"thumbnail": "https://i.ytimg.com/vi/MOfi-MXjuio/sddefault.jpg"
},
"media": {
"duration": 0,
"aspect": "4:3",
"poster": "https://meetreference.com/media/manim-walkthrough-chi-square-goodness/poster.webp",
"frames": []
}
},
{
"slug": "cinematic-restaurant-ad-from-five-photos",
"url": "https://meetreference.com/v/cinematic-restaurant-ad-from-five-photos/",
"brief": "https://meetreference.com/v/cinematic-restaurant-ad-from-five-photos.md",
"prompt_url": "https://meetreference.com/v/cinematic-restaurant-ad-from-five-photos/prompt.txt",
"title": "Candlelit restaurant ad from five photos",
"summary": "A 17-second landscape social ad for an upscale restaurant: five photo scenes with slow Ken Burns zooms, dark overlays, serif headlines and a thin gold rule, ending on a Book Now button. Claude Code wrote it as one Remotion component from a single prompt.",
"category": "ad-social",
"styles": [
"ken burns",
"luxury",
"burgundy and gold",
"serif type",
"photo slideshow",
"social ad"
],
"made_with": {
"agents": [
"Claude Code"
],
"models": [
"Claude Opus"
],
"frameworks": [
"Remotion"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "I want to create a landscape Twitter/X social media video (1200x628px)\nfor my upscale restaurant targeting couples for a special night out.\n\nI am uploading 5 images in this order:\n- Image 1: A couple enjoying an intimate candlelit dinner\n- Image 2: My signature beef dish close-up\n- Image 3: Champagne or wine being poured\n- Image 4: My restaurant interior or dining room\n- Image 5: My salad or vegetarian signature dish\n\nBuild a cinematic TSX video component — landscape format (1200x628) —\nwith 5 animated scenes using these images.\n\nScene flow:\n1. Couple dining → \"SOME NIGHTS DESERVE MORE\" / \"For the ones you love\"\n2. Beef dish → \"CRAFTED WITH PASSION\" / \"Our signature for meat lovers\"\n3. Champagne pour → \"CELEBRATE IN STYLE\" / \"Every sip, unforgettable\"\n4. Dining room → \"THE STAGE IS SET\" / \"An evening like no other\"\n5. Salad dish → \"RESERVE YOUR TABLE TONIGHT\" / CTA button: \"Book Now →\"\n\nStyle: deep burgundy and gold accents, dark romantic overlays,\nelegant serif typography, slow cinematic Ken Burns transitions.\nFeels like a luxury magazine ad.\n\nEach scene: full-width image, dark gradient overlay, bold headline,\nitalic subtext in accent color, decorative gold line above headline.\nNo progress bar. No play/pause button.\n\nUse Remotion's useCurrentFrame() for all animation timing.\nSet FRAMES_PER_SCENE = 105 (3.5 seconds at 30fps).\nDrive Ken Burns zoom, fade-in, and text slide using Remotion's\ninterpolate() — no requestAnimationFrame, no useEffect timers.\nFixed dimensions: 1200x628px.\n\nEmbed all 5 images as base64 directly in the TSX.\nOutput a single self-contained .tsx file. No external dependencies."
}
],
"fidelity": "verbatim",
"process": {
"one_shot": true,
"time": "Under 10 minutes",
"time_short": "<10m",
"cost": "$0 beyond the Claude subscription, according to the post.",
"cost_short": "$0 extra",
"notes": "The only inputs were five iPhone photos and the prompt. Claude Code returned one self-contained .tsx file with the photos embedded as base64. The author then created a Remotion project with npx create-video@latest, registered the component at 1200x628, 30 fps and 525 frames, previewed it with npm run dev, and rendered it with npx remotion render. The post names the model only as Opus."
},
"requirements": [
"Five of your own photos, in the order the prompt lists them",
"A Remotion project (npx create-video@latest) to render the component"
],
"remix": "Rewrite the list after \"I am uploading 5 images in this order\" and the headline pairs under \"Scene flow\" for your business, and change \"deep burgundy and gold accents\" to your brand colors. Keep the Remotion lines (\"useCurrentFrame()\", \"FRAMES_PER_SCENE = 105\") so it renders cleanly.",
"look": {
"summary": "Five darkened photo scenes of an evening out, each with a headline block on the left: a laughing couple at a candlelit table, sliced steak with fried eggs, champagne being poured, a dining room under violet light, and a salad at a set table.",
"palette": "Dim candle amber and warm browns under a dark overlay, one violet-lit room, with white headlines and gold accents.",
"type": "White all-caps serif headlines (\"SOME NIGHTS DESERVE MORE\", \"THE STAGE IS SET\") under a short gold rule, each with a gold italic serif line below. The last scene adds \"Fresh. Seasonal. Unforgettable.\" and a gold-outlined BOOK NOW → button.",
"composition": "Each photo fills the 1200x628 frame, with the text block anchored left of center and the subject on the right.",
"structure": "Couple at dinner, the signature steak plate, a champagne pour, the dining room, then the salad and the booking button."
},
"creator": {
"name": "Meera Datey",
"url": "https://videotobe.com/blog"
},
"source": {
"platform": "blog",
"url": "https://videotobe.com/blog/create-video-with-claude-code",
"title": "How to Create a Cinematic Video with Claude Code",
"posted": "2025-06-01"
},
"video": {
"watch": "https://videotobe.com/blog/create-video-with-claude-code",
"mp4": "https://assets.videotobe.com/create-video-with-claude-code/restaurant_promo.mp4",
"poster_frame": 2
},
"media": {
"duration": 17.6,
"aspect": "1200:628",
"poster": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/poster.webp",
"storyboard": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/storyboard.webp",
"frames": [
{
"t": 1,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f1.webp"
},
{
"t": 2.9,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f2.webp"
},
{
"t": 4.9,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f3.webp"
},
{
"t": 6.8,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f4.webp"
},
{
"t": 8.8,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f5.webp"
},
{
"t": 10.7,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f6.webp"
},
{
"t": 12.7,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f7.webp"
},
{
"t": 14.6,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f8.webp"
},
{
"t": 16.6,
"src": "https://meetreference.com/media/cinematic-restaurant-ad-from-five-photos/f9.webp"
}
]
}
},
{
"slug": "forest-fire-spread-simulation-that-each",
"url": "https://meetreference.com/v/forest-fire-spread-simulation-that-each/",
"brief": "https://meetreference.com/v/forest-fire-spread-simulation-that-each.md",
"prompt_url": "https://meetreference.com/v/forest-fire-spread-simulation-that-each/prompt.txt",
"title": "Forest fire simulation by six models",
"summary": "A grid of six models' answers to one test: a single Python file that simulates wind-driven fire spreading through drawn trees, with flames and embers, then writes its own 30-second MP4 with OpenCV.",
"category": "math-science",
"styles": [
"physics simulation",
"fire",
"model comparison",
"python",
"2d side view",
"benchmark"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [
"Claude 3.7 Sonnet",
"DeepSeek R1",
"Gemini 2.5 Pro",
"Llama 4 Maverick",
"OpenAI o3",
"OpenAI o4-mini-high"
],
"frameworks": [
"Python",
"NumPy",
"OpenCV"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Write a Python program that simulates the spreading of a forest fire:\n- use complex shapes for the trees so that they are as realistic as possible. Color the trunk and branches brown and the leaves green.\n- use a side-view 2D approximation\n- use at least 10 trees to simulate the forest\n- color the fire as a dark orange\n- you must visibly show the flames as they propagate as well as any embers that move and light new trees on fire\n- the fire should start near the center of the trees and spread according to the wind\n- simulate a 20mph wind going from the left-to-right\n- make the initial conditions appropriate such that the fire propagates and burns at least 40% of the trees\n- Do not use the pygame library; implement all needed physics by yourself. The following Python libraries are allowed: tkinter, math, numpy, dataclasses, typing, sys, opencv-python\n- you MUST output an .mp4 video file with a resolution of 1280x720 of the simulation after it completes and adjust the speed of the video so that the video duration is exactly 30 seconds. Name the .mp4 file as *your_AI_name*.mp4\n- you will be judged on how accurate and visually appealing the simulation is so make it look amazing\n- all code should be put in a single Python file."
}
],
"fidelity": "verbatim",
"process": {
"notes": "Each model's script writes its own MP4, and the creator tiled six of them into a 3x2 grid. The grid is 1280x480, so each panel is scaled down from the 1280x720 the prompt asks for. The model names come from the labels on the grid. The creator made it as a harder, more visual follow-up to the spinning-heptagon test, and notes that results vary from run to run, so re-running several times and keeping the best is one option."
},
"requirements": [
"Python with NumPy and opencv-python to run the script the model writes"
],
"remix": "Swap the subject in \"simulates the spreading of a forest fire\" and rewrite the bullets for its rules. Keep the bullet that begins \"you MUST output an .mp4 video file\", which makes the script render its own video.",
"look": {
"summary": "A 3x2 grid of six flat side-view forests, each labelled with a model name, that shows how differently the models drew trees and fire: red branching trunks, small lollipop trees, black charred branches under orange embers, green circles on black, and rows of round canopies.",
"palette": "Sky-blue backgrounds over brown or green ground strips, green canopies, red-brown trunks, orange flames and embers, and charcoal-black burnt trees; one panel is all black with green circles on blue stems.",
"type": "A small white serif label centered at the top of each panel, written with underscores (\"Claude_Sonnet_3_7\", \"DeepSeekR1\", \"Gemini_2_5pro\", \"Llama4_Maverick\"), and a tiny time and wind readout in the Claude panel (\"Time: 4.0s\", \"Wind: 20 mph\").",
"composition": "A wide 1280x480 frame split into two rows of three equal panels, each a flat side view with the ground along the bottom and a line of trees across the middle.",
"structure": "The same grid throughout: Claude 3.7 Sonnet's red branching trees with one burning column, DeepSeek R1's small trees with a growing number of black stumps, Gemini 2.5 Pro's forest blackened under orange embers, Llama 4 Maverick's green circles on black with no fire visible, o3's round canopies with a few browned crowns and a spray of embers to the right, and o4-mini-high's row turning to dark shapes from the right."
},
"creator": {
"name": "u/jd_3d",
"url": "https://www.reddit.com/user/jd_3d/"
},
"source": {
"platform": "reddit",
"url": "https://www.reddit.com/r/LocalLLaMA/comments/1k1nle9/inspired_by_the_spinning_heptagon_test_i_created/",
"title": "Inspired by the spinning heptagon test I created the forest fire simulation test (prompt in comments)",
"community": "r/LocalLLaMA",
"posted": "2025-04-17",
"engagement": {
"upvotes": 219,
"comments": 39
}
},
"video": {
"watch": "https://www.reddit.com/r/LocalLLaMA/comments/1k1nle9/inspired_by_the_spinning_heptagon_test_i_created/",
"hls": "https://v.redd.it/eni76fldkgve1/HLSPlaylist.m3u8",
"embed": "https://embed.reddit.com/r/LocalLLaMA/comments/1k1nle9/inspired_by_the_spinning_heptagon_test_i_created/?embed=true&showmedia=true&showtitle=false"
},
"media": {
"duration": 28.4,
"aspect": "1280:480",
"poster": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/poster.webp",
"storyboard": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/storyboard.webp",
"frames": [
{
"t": 1.6,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f1.webp"
},
{
"t": 4.7,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f2.webp"
},
{
"t": 7.9,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f3.webp"
},
{
"t": 11,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f4.webp"
},
{
"t": 14.2,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f5.webp"
},
{
"t": 17.4,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f6.webp"
},
{
"t": 20.5,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f7.webp"
},
{
"t": 23.7,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f8.webp"
},
{
"t": 26.8,
"src": "https://meetreference.com/media/forest-fire-spread-simulation-that-each/f9.webp"
}
]
}
},
{
"slug": "20-numbered-balls-bouncing-inside",
"url": "https://meetreference.com/v/20-numbered-balls-bouncing-inside/",
"brief": "https://meetreference.com/v/20-numbered-balls-bouncing-inside.md",
"prompt_url": "https://meetreference.com/v/20-numbered-balls-bouncing-inside/prompt.txt",
"title": "Spinning heptagon test across 18 models",
"summary": "A grid of 18 models' answers to one strict prompt: a single Python file, no pygame, in which 20 numbered balls fall, spin, and collide inside a rotating heptagon. It is the creator's KCORES benchmark test, widely copied in 2025; the post has the full prompt.",
"category": "math-science",
"styles": [
"physics simulation",
"model comparison",
"python",
"benchmark",
"bouncing balls",
"grid"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [
"GPT-4.5 Preview",
"GPT-4.1",
"GPT-4.1 mini",
"GPT-4o",
"OpenAI o1",
"OpenAI o3-mini",
"Claude 3.7 Sonnet",
"Claude 3.7 Sonnet Thinking",
"Claude 3.5 Sonnet",
"Gemini 2.5 Pro",
"Gemini 2.0 Pro",
"Gemini 2.0 Flash-Lite",
"Gemini 2.0 Flash Thinking",
"DeepSeek R1",
"DeepSeek V3",
"DeepSeek V3 0324",
"Kimi k1.5 long-thinking",
"Gemma 3 27B"
],
"frameworks": [
"Python",
"Tkinter"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Write a Python program that shows 20 balls bouncing inside a spinning heptagon:\n- All balls have the same radius.\n- All balls have a number on it from 1 to 20.\n- All balls drop from the heptagon center when starting.\n- Colors are: #f8b862, #f6ad49, #f39800, #f08300, #ec6d51, #ee7948, #ed6d3d, #ec6800, #ec6800, #ee7800, #eb6238, #ea5506, #ea5506, #eb6101, #e49e61, #e45e32, #e17b34, #dd7a56, #db8449, #d66a35\n- The balls should be affected by gravity and friction, and they must bounce off the rotating walls realistically. There should also be collisions between balls.\n- The material of all the balls determines that their impact bounce height will not exceed the radius of the heptagon, but higher than ball radius.\n- All balls rotate with friction, the numbers on the ball can be used to indicate the spin of the ball.\n- The heptagon is spinning around its center, and the speed of spinning is 360 degrees per 5 seconds.\n- The heptagon size should be large enough to contain all the balls.\n- Do not use the pygame library; implement collision detection algorithms and collision response etc. by yourself. The following Python libraries are allowed: tkinter, math, numpy, dataclasses, typing, sys.\n- All codes should be put in a single Python file."
}
],
"fidelity": "verbatim",
"process": {
"notes": "Each model got the same prompt, and the creator recorded the programs side by side. The post says the grid shows the top 16 scores from the creator's KCORES LLM Arena, though 18 tiles appear; other models were tested and didn't make the cut. A comment links the full leaderboard and the benchmark repo. The model names come from the labels on the grid. The video has no sound."
},
"requirements": [
"Python with tkinter and NumPy to run the script the model writes",
"A screen recorder: the script draws to a window and doesn't write a video file"
],
"remix": "Change \"20 balls\" and \"a spinning heptagon\" for other objects and another container, and edit the hex list after \"Colors are:\". Keep the line that begins \"Do not use the pygame library\", which makes the model write its own collision code.",
"look": {
"summary": "A 6-by-3 grid of model outputs, each tile a heptagon outline with orange and amber numbered balls, labeled with the model's name, under a footer reading \"benchmark-ball-bouncing-inside-spinning-heptagon v20250415\".",
"palette": "Mostly white tiles with thin black outlines, a few black tiles and one pale-blue tile, and balls in the prompt's oranges, ambers, and rust reds.",
"type": "Monospace model labels above each tile and a monospace footer crediting karminski-牙医.",
"composition": "Tiles of equal size, each with a heptagon set at its own angle. Balls pile at the bottom in most tiles, float apart in Kimi k1.5's, cluster mid-air in Gemini 2.0 Flash-Lite's, and are missing in a few.",
"structure": "One continuous side-by-side recording of all 18 programs from the moment the balls drop from the center."
},
"creator": {
"name": "u/Dr_Karminski",
"url": "https://www.reddit.com/user/Dr_Karminski/"
},
"source": {
"platform": "reddit",
"url": "https://www.reddit.com/r/LocalLLaMA/comments/1jzexz7/added_gpt41_gemini25pro_deepseekv30324_etc/",
"title": "Added GPT-4.1, Gemini-2.5-Pro, DeepSeek-V3-0324 etc...",
"community": "r/LocalLLaMA",
"posted": "2025-04-15",
"engagement": {
"upvotes": 471,
"comments": 77
}
},
"video": {
"watch": "https://www.reddit.com/r/LocalLLaMA/comments/1jzexz7/added_gpt41_gemini25pro_deepseekv30324_etc/",
"mp4": "https://v.redd.it/4l29hha7bwue1/DASH_1080.mp4",
"hls": "https://v.redd.it/4l29hha7bwue1/HLSPlaylist.m3u8",
"embed": "https://embed.reddit.com/r/LocalLLaMA/comments/1jzexz7/added_gpt41_gemini25pro_deepseekv30324_etc/?embed=true&showmedia=true&showtitle=false"
},
"media": {
"duration": 56.2,
"aspect": "16:9",
"poster": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/poster.webp",
"storyboard": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/storyboard.webp",
"frames": [
{
"t": 3.1,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f1.webp"
},
{
"t": 9.4,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f2.webp"
},
{
"t": 15.6,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f3.webp"
},
{
"t": 21.9,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f4.webp"
},
{
"t": 28.1,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f5.webp"
},
{
"t": 34.3,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f6.webp"
},
{
"t": 40.6,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f7.webp"
},
{
"t": 46.8,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f8.webp"
},
{
"t": 53.1,
"src": "https://meetreference.com/media/20-numbered-balls-bouncing-inside/f9.webp"
}
]
}
},
{
"slug": "manim-visualization-spacetime-curvature",
"url": "https://meetreference.com/v/manim-visualization-spacetime-curvature/",
"brief": "https://meetreference.com/v/manim-visualization-spacetime-curvature.md",
"prompt_url": "https://meetreference.com/v/manim-visualization-spacetime-curvature/prompt.txt",
"title": "Spacetime curvature in 3D Manim",
"summary": "A 54-second 3D Manim animation: a grid warps under a central mass, followed by geodesics, bending light, Einstein's field equations, and a Newton-versus-relativity comparison. Claude 3.7 Sonnet wrote the script, reasoning off, from a prompt ChatGPT drafted.",
"category": "math-science",
"styles": [
"manim",
"3d",
"physics",
"general relativity",
"grid",
"3blue1brown-style"
],
"made_with": {
"agents": [
"Not stated"
],
"models": [
"Claude 3.7 Sonnet"
],
"frameworks": [
"Manim"
],
"services": [],
"skills": []
},
"prompts": [
{
"label": "Prompt",
"text": "Prompt:\nWrite a Manim script to visualize spacetime curvature caused by a massive object, such as a planet or star.\n\nAnimation Concept:\n• The animation should depict a 3D grid or a mesh plane representing spacetime.\n• A massive object (e.g., a sphere) is placed at the center of the grid.\n• The grid should warp downward around the object to simulate spacetime curvature.\n• Optionally, show test particles (small dots or spheres) moving around the curved space to demonstrate how objects follow geodesics.\n• The grid should smoothly animate from flat space to a curved surface as the mass is introduced.\n\nTechnical Details:\n• Use Manim’s 3D capabilities (ThreeDScene).\n• Implement a parametric surface to represent the warped spacetime.\n• Animate the gravitational well formation over time.\n• Use camera rotations to provide a clear perspective.\n• Optionally, add labels (e.g., \"Spacetime,\" \"Mass,\" \"Geodesics\") and vector arrows to indicate force or curvature.\n\nExtra Features (Optional):\n• Show multiple masses (binary stars or planets) and their combined spacetime effect.\n• Add light rays bending around the mass to demonstrate gravitational lensing.\n• Display Einstein’s field equations briefly before the visualization.\n• Animate the transition from Newtonian gravity (flat grid with attraction forces) to General Relativity (warped grid)."
}
],
"fidelity": "partial",
"process": {
"one_shot": false,
"notes": "ChatGPT wrote the prompt: the creator asked it for a prompt to make a Manim script explaining spacetime curvature, and it filled in the details. Claude 3.7 Sonnet ran with reasoning disabled. One error needed a second prompt, and Claude fixed it itself. The creator rendered the script with one Manim command. The prompt here was transcribed from a screenshot of ChatGPT's formatted reply, so its bold text is lost, and the screenshot may cut off more text below."
},
"requirements": [
"Manim Community Edition installed locally to render the script"
],
"remix": "Replace \"spacetime curvature caused by a massive object\" with your own concept, and rewrite the bullets under \"Animation Concept\" to describe what should appear. Keep \"Use Manim’s 3D capabilities (ThreeDScene)\" for a 3D scene.",
"look": {
"summary": "A teal checkered mesh on black, flat under a yellow sphere at first and then bent into a deep funnel, with white serif titles and a LaTeX field equation above.",
"palette": "Black background, a teal and pale-blue checkered mesh, a yellow sphere, coral-red orbit rings and dots, bright yellow light paths, and white text.",
"type": "White serif titles (\"Spacetime Curvature in General Relativity\", then \"Newtonian Gravity vs. General Relativity\"), a LaTeX field equation under the title, and small serif labels. Labels pile up in places: \"Curved Spacetime\" is partly erased, and \"Light Rays\" overlaps other captions.",
"composition": "The mesh fills the middle of the frame at a three-quarter angle, with the funnel running off the bottom edge. The title and equation stay fixed at the top. The comparison scene stacks the flat grid and sphere above the curved mesh.",
"structure": "Flat spacetime with the mass, the well under it, coral geodesic orbits around the well, yellow light rays curving through it, the Newton-versus-relativity comparison, and a closing line: \"Einstein's key insight: Gravity is not a force, but a manifestation of curved spacetime.\""
},
"creator": {
"name": "u/zebleck",
"url": "https://www.reddit.com/user/zebleck/"
},
"source": {
"platform": "reddit",
"url": "https://www.reddit.com/r/singularity/comments/1ixi1r8/claude_37_sonnet_can_generate_manim_code_heres_a/",
"title": "Claude 3.7 Sonnet can generate manim code. Here's a visualization of spacetime curvature. There was one error that it fixed by itself, so took two prompts.",
"community": "r/singularity",
"posted": "2025-02-25",
"engagement": {
"upvotes": 403,
"comments": 36
}
},
"video": {
"watch": "https://www.reddit.com/r/singularity/comments/1ixi1r8/claude_37_sonnet_can_generate_manim_code_heres_a/",
"hls": "https://v.redd.it/0brqp2jsl6le1/HLSPlaylist.m3u8",
"embed": "https://embed.reddit.com/r/singularity/comments/1ixi1r8/claude_37_sonnet_can_generate_manim_code_heres_a/?embed=true&showmedia=true&showtitle=false",
"poster_frame": 6
},
"media": {
"duration": 54,
"aspect": "16:9",
"poster": "https://meetreference.com/media/manim-visualization-spacetime-curvature/poster.webp",
"storyboard": "https://meetreference.com/media/manim-visualization-spacetime-curvature/storyboard.webp",
"frames": [
{
"t": 3,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f1.webp"
},
{
"t": 9,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f2.webp"
},
{
"t": 15,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f3.webp"
},
{
"t": 21,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f4.webp"
},
{
"t": 27,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f5.webp"
},
{
"t": 33,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f6.webp"
},
{
"t": 39,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f7.webp"
},
{
"t": 45,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f8.webp"
},
{
"t": 51,
"src": "https://meetreference.com/media/manim-visualization-spacetime-curvature/f9.webp"
}
]
}
}
]
}