rdfitted/gemini-animation

This skill produces high-quality CSS/JS animations (product launches, feature demos, UI walkthroughs) by separating planning from building. Vague prompts like "animate this" produce chaotic results because animation requires spatial thinking that models aren't trained for. The fix: Claude interviews you, builds a structured scene-based prompt with explicit timing and UI state, then Gemini 3.1 Pro focuses purely on implementation.

Workflow

Step 1: Interview — Gather Animation Intent

Before writing any prompt, Claude MUST interview the user using AskUserQuestion to gather these details. Ask them in 1-2 focused rounds, not all at once.

Round 1 — Big Picture:

• What are we animating? (product launch, feature demo, UI walkthrough, explainer, landing hero)
• What's the product/feature? Brief description.
• Do you have existing HTML/UI to animate, or should we build from scratch?
• What's the target duration? (10s, 20s, 30s, 60s)
• What's the vibe/tone? (sleek/premium, playful/bouncy, dramatic/cinematic, minimal/clean)

Round 2 — Scene Details (after Round 1):

• Walk me through the user journey / story beats — what happens first, second, third?
• For each beat: What UI elements are on screen? What's the action?
• Any specific transitions? (zoom, pan, fade, morph, 3D rotate, slide)
• Cursor animation? (simulated clicks, typing, drag)
• Text/callout overlays? (feature labels, pricing, taglines)
• Color scheme or brand colors?
• Any reference videos or animations you like?

If the user provides a pasted HTML/UI component, note it — it will be included as the base element in the animation.

Step 2: Build the Scene-Based Animation Plan

From the interview answers, construct a structured scene plan. Present it to the user for approval before building.

Format:

## Animation Plan: [Title]
Duration: [total]s | Scenes: [N] | Style: [vibe]

### Scene 1: [Name] (0.0s – 3.0s)
**State**: [What's visible on screen — elements, layout, colors]
**Action**: [What happens — what moves, appears, transforms]
**Effects**: [Specific animation keywords — fade-in, scale-up, slide-from-left, blur-reveal, spring-bounce, 3D-perspective-tilt, staggered-delay, typewriter, cursor-click-ripple]
**Easing**: [ease-out, cubic-bezier, spring]
**Technical**: [CSS keyframes needed, transforms, clip-path, etc.]

### Scene 2: [Name] (3.0s – 7.0s)
...

### Scene N: [Name] — Outro
...

## Summary
- Total duration: Xs
- Key effects: [list]
- Looping: [yes/no]

Critical rules for the plan:

• Every scene has explicit start/end timestamps
• Every element has a defined state (position, opacity, scale, color)
• Transitions between scenes are explicit (not "then it animates")
• Special effects use concrete keywords, not vague descriptions
• Stagger delays are specified in ms

Present the plan and ask: "Does this look right? Want to adjust any scenes before I build it?"

Step 3: Call Gemini 3.1 Pro to Build the Animation

Once the user approves the plan, send it to Gemini via the Gemini CLI (gemini command).

CRITICAL: Use the Bash tool to execute the Gemini CLI in headless mode. Write the prompt to a temp file first to avoid shell escaping issues.

# 1. Write the prompt to a temp file
cat > /tmp/gemini-animation-prompt.txt << 'PROMPT_EOF'
You are an elite animation engineer. Build a production-quality CSS/JS animation from this scene plan.

## SCENE PLAN
{SCENE_PLAN}

## BASE UI (if provided)
{BASE_UI_HTML_OR_EMPTY}

## ANIMATION IMPLEMENTATION RULES

**Timing & Coordination:**
- Use CSS custom properties for all timing values (--scene1-start, --scene1-duration, etc.)
- Use animation-delay to sequence scenes precisely to the timestamps in the plan
- Use animation-fill-mode: both so elements hold state between scenes
- Stagger delays must match the plan exactly

**Motion Quality:**
- Use cubic-bezier easing for natural motion — not linear, not ease
- Spring-like bounces: cubic-bezier(0.34, 1.56, 0.64, 1) for overshoot
- Smooth deceleration: cubic-bezier(0.16, 1, 0.3, 1) for slide-ins
- Gentle ease-out: cubic-bezier(0.33, 1, 0.68, 1) for fades
- Add transform: translateZ(0) for GPU acceleration on animated elements

**Visual Effects Vocabulary:**
- fade-in: opacity 0→1
- scale-up: transform scale(0.8)→scale(1) with opacity
- slide-from-left/right/top/bottom: translate + opacity
- blur-reveal: filter blur(10px)→blur(0) with opacity
- 3D-perspective-tilt: perspective(1000px) rotateY/rotateX
- spring-bounce: scale with overshoot easing
- staggered-delay: each child += Nms delay
- typewriter: overflow + width animation or steps()
- cursor-click-ripple: pseudo-element scale + fade at click point
- morph: clip-path animation between shapes
- parallax-scroll: translateY at different rates per layer
- glow-pulse: box-shadow animation with color
- counter-roll: number counting animation with @property

**Cursor Simulation (if plan includes cursor):**
- Render as a div with pointer SVG or emoji
- Animate position with smooth cubic-bezier
- Add click effect: small scale bounce + ripple circle at click point
- Cursor movement should feel human — slight curve, not linear path

**Code Structure:**
- Single self-contained HTML file
- All CSS in a <style> block (no external dependencies except Google Fonts)
- Use @keyframes for every animation — no JS animation libraries
- JS only if needed for: triggering animation restart, dynamic counters, or complex sequencing
- Responsive: use vw/vh, clamp(), and relative units
- Dark background default unless plan specifies otherwise

**Quality Standards:**
- 60fps — no layout thrashing, only animate transform and opacity where possible
- Smooth scene transitions — no jarring jumps
- Every element in the plan must be animated as described
- If the plan says 20s total, the animation must be exactly 20s
- Add a subtle background (gradient, grain, or pattern) — never plain white

OUTPUT: Complete HTML file only. No explanation, no markdown fences. Start with <!DOCTYPE html>.
PROMPT_EOF

# 2. Pipe the prompt to Gemini CLI in headless mode
cat /tmp/gemini-animation-prompt.txt | gemini -m gemini-3.1-pro -p "" -y --output-format text

Notes on the Gemini CLI approach:

• -m gemini-3.1-pro selects the model
• -p "" enables headless (non-interactive) mode; the prompt comes from stdin
• -y auto-approves any tool use (YOLO mode)
• --output-format text gives clean text output
• Writing the prompt to a temp file avoids shell escaping hell with quotes and special chars
• The output will be the raw HTML — save it directly to a file

Step 4: Save, Review, and Refine

1. Save the output HTML to the user's Desktop or project directory
2. Open it — tell the user to open in browser to preview
3. Review the animation against the scene plan:
   • Are all scenes present with correct timing?
   • Do transitions feel smooth?
   • Are effects matching the plan keywords?
   • Is the total duration correct?
4. Ask the user what they'd like to adjust
5. Iterate — for fixes, either edit the HTML directly or re-call Gemini with an updated plan

Step 5: Polish Pass (Optional)

If the user wants refinement, Claude can directly edit the HTML to:

• Adjust timing/easing curves
• Fix alignment or spacing
• Add/remove elements
• Tweak colors or fonts
• Add sound sync points (commented markers)

---

Gemini CLI Configuration

| Parameter | Value | Rationale | |-----------|-------|-----------| | CLI | gemini (v0.29+) | Installed via npm globally | | Model | gemini-3.1-pro-preview via -m flag | Best for structured animation code | | Mode | Headless (-p "" with stdin) | Non-interactive, scriptable | | Approval | -y (YOLO mode) | Auto-approve tool use | | Output | --output-format text | Clean text, no formatting |

---

Animation Types This Skill Handles

| Type | Description | Typical Duration | |------|-------------|-----------------| | Product Launch | Showcase UI with cinematic reveals | 15-30s | | Feature Demo | Walk through a user journey with cursor | 20-45s | | UI Walkthrough | Highlight UI elements sequentially | 10-20s | | Hero Animation | Landing page eye-catcher, looped | 5-10s | | Explainer | Animated diagram or concept | 15-30s | | Before/After | Compare states with transition | 5-10s |

---

Example Usage

User: "Make a product launch video for our new dark mode feature"

Workflow:

1. Claude interviews: What app? What UI changes? What's the story arc? Duration?
2. User: "It's a dashboard. Start in light mode, user clicks toggle, everything morphs to dark. 15 seconds. Sleek/premium feel."
3. Claude builds scene plan: 4 scenes — hero intro, light mode showcase, toggle click with cursor, dark mode reveal with morph transitions
4. User approves plan
5. Gemini generates complete animated HTML
6. Claude saves to Desktop, user previews in browser
7. User: "The morph is too fast" → Claude adjusts timing directly

---

Why Interview First?

The video's key insight: the #1 reason AI-generated animations are bad is vague prompts. Animation is a spatial/temporal coordination problem. Models can't infer timing, sequencing, and state management from "make it look cool." By interviewing first and building a structured scene plan, we:

1. Remove spatial thinking burden from the model
2. Give explicit timing constraints (no guessing)
3. Define every UI state clearly (no ambiguity)
4. Specify effects with concrete keywords (no interpretation)
5. Let the model focus purely on code implementation

This consistently produces 2-3x better results than single-shot prompting.

Related Skills

• gemini-threejs-shader-hover — For interactive hover effects (not full animations), use this skill instead. It applies Three.js WebGL shader effects (distortion, wave, chromatic aberration, RGB split) to images/elements using Gemini for GLSL generation. Invoke via /shader-hover command.