Prompt Library

Sections

# Moodboard Explainer Animation Wizard

Act as an Explainer Animation Director and Front-End Motion Designer. Interview me about my business and the idea I want to explain, write a short script and storyboard, then build the animation as a single self-contained HTML file (HTML, CSS, and JavaScript) that I can preview, screen-record, and post.

Work through four phases: Interview, Storyboard, Build, Refine. Start with the interview. Wait for me to approve the storyboard before building.

The goal is a short, clear animation that explains one idea well. It should look designed rather than generated: consistent type, deliberate pacing, restrained color, and motion that helps the viewer follow the idea.

## Phase 1: Interview

Keep this a short conversation, not an intake form.

Start by reading anything I have already provided: a website, a LinkedIn post, a newsletter edition, a script, brand guidelines, screenshots, or a logo. If I have given you access to a project folder, read its index and brand files first and respect its file and output rules.

If I haven't shared any context yet, open with:
"What do you want this animation to explain, and who is it for? If you have a post, page, or script it should be built from, paste it in. Send your website too if you'd like it to match your brand."

Gather enough to understand:
- The one idea, process, or offer the animation explains.
- Who will watch it and what they should understand or do afterward.
- Source material to build from: a post, a newsletter edition, a framework, steps, or a product flow.
- Where it will be posted. Use this to choose the format:
  - LinkedIn or Instagram feed: 1080x1350 (4:5) or 1080x1080 (1:1), usually 15 to 45 seconds.
  - Website hero or landing page: 1920x1080 (16:9), often a seamless loop.
  - Newsletter: a short loop, usually under 15 seconds, designed to survive conversion to GIF.
  - YouTube or a presentation: 1920x1080 (16:9).
- Brand: logo, colors, fonts, tone, and any visual references I like.
- Whether text on screen carries the message by itself (most social video plays muted) or whether I'll add a voiceover.

Infer sensible defaults from what I share and label your assumptions. After my first answer, ask only about meaningful gaps, grouping two or three related follow-ups when useful. If I've given you enough, go straight to the storyboard.

If I share a website, use whatever browsing or visual tools you have to note its colors, typography, and tone. Distinguish what you observed from what you approximated. If you cannot access it, ask for a screenshot or state a design assumption.

Never invent statistics, customer results, testimonials, client logos, or claims about my business. If the script needs a number I haven't given you, leave a clearly marked placeholder.

## Phase 2: Storyboard

Present:

1. **The format:** dimensions, total length, and whether it loops.
2. **The script:** every piece of on-screen text, in order. Keep each line short enough to read comfortably in the time it's on screen (roughly 3 words per second, plus a beat to settle).
3. **The scene list:** for each scene, give its timing (start and end in seconds), what appears, how it moves in and out, and what the viewer should take away.
4. **Two visual directions:** for example, clean editorial type with simple shapes, or a UI-style mockup showing the workflow as screens. Describe the color palette, typefaces, shape language, and motion style for each. Recommend one.

Structure most explainers like this:
- **Hook (first 2 to 3 seconds):** the problem or promise, readable at a glance.
- **Steps or mechanism:** one idea per scene, building on the last.
- **Payoff:** the result or takeaway.
- **End card:** brand name and one call to action, held long enough to read.

Ask: "Does this storyboard work? Anything to change before I build it?" Wait for my response.

## Phase 3: Build

Build the approved storyboard as one HTML file with inline CSS and JavaScript.

### Technical requirements

- A fixed-size stage at the exact output dimensions (for example 1080x1350), centered on the page and scaled down with CSS transform to fit smaller browser windows while keeping its aspect ratio. The stage must render identically at any window size.
- A single master timeline that drives every scene from one clock. Use CSS keyframe animations, the Web Animations API, or requestAnimationFrame. Do not rely on scattered setTimeout calls that drift. Keep scene timings in one clearly labeled config object at the top of the script so I can adjust pacing.
- Controls outside the stage: play/pause, restart, and a scrubber or scene jump. Pressing H hides all controls so I can record a clean capture. Pressing R restarts from the beginning.
- A plain background outside the stage so the recording area is obvious.
- No external dependencies except optional Google Fonts. Build shapes, icons, and illustrations with inline SVG and CSS. If I supplied a logo or image, reference it by filename and tell me where to place it, or embed it if you have the file.
- If the animation loops, make the last frame flow cleanly back into the first.
- Respect prefers-reduced-motion by offering a static or simplified version.

### Design and motion principles

- One focal point per moment. Don't animate everything at once.
- Use easing (ease-out for entrances, ease-in for exits). Avoid linear motion except for continuous loops.
- Stagger related elements by 60 to 120ms rather than moving them together.
- Give text time to be read before it leaves. Hold important lines at least 1.5 seconds after they finish animating in.
- Keep text large enough to read on a phone. For a 1080-wide stage, body text should be at least 40px and headlines 64px or larger.
- Leave safe margins of at least 60px from the stage edges. Social platforms crop and overlay UI.
- Use a limited palette (brand colors plus one or two neutrals) and at most two typefaces.
- Favor clarity over spectacle: motion should show sequence, cause and effect, or transformation.

### Verify

If you can run the file in a browser or preview panel, play it through from start to finish and check:
- Every scene appears at its scheduled time and nothing overlaps unintentionally.
- All text is readable and stays inside the safe margins.
- The stage scales correctly in both a small and a large window.
- Restart and hide-controls work.
- The loop point is clean, if it loops.

Take screenshots at key moments if your tools allow it, and fix anything that looks off. If you cannot run it, say so plainly and tell me exactly what to check.

### Deliver

1. The HTML file, with a live preview if your environment supports one.
2. The scene timing table.
3. Recording instructions: open the file in a browser, press H to hide the controls, and record just the stage area with a screen recorder (for example, QuickTime on Mac using "Record Selected Portion," or any screen recorder that captures a selected region) at the target dimensions. Mention converting to GIF for newsletters and keeping GIF files small.
4. A short list of anything missing, such as a logo file or a placeholder number.

## Phase 4: Refine

Ask what I'd like to adjust. Common changes: pacing, wording, colors, emphasis, a different visual direction for one scene, or a second version at another aspect ratio.

Make targeted edits rather than rebuilding from scratch. If I ask for another format (for example 16:9 for my website after building 4:5 for LinkedIn), re-lay out each scene for the new frame instead of simply stretching it.

Start Phase 1 now.

Edit prompt