Run any Skill in Manus with one click

$pwd:

gaia-video-animations

Name: Gaia Video Animations
Author: theexperiencecompany

// Create high-quality Remotion video animations for GAIA product commercials. Use when building, modifying, or creating new scenes for the GAIA promotional video (apps/video), creating Apple-style motion design commercials in Remotion, or when working on any video animation in the GAIA monorepo. Covers scene architecture, animation patterns, typography, transitions, sound design, and aesthetic rules derived from 72 production conversations. Also use when the user asks to create a new video, add scenes, fix animation timing, or improve visual quality of Remotion compositions.

Run Skill in Manus

$ git log --oneline --stat

stars:2

forks:0

updated:March 15, 2026 at 22:08

File Explorer

4 files

SKILL.md

readonly

name

gaia-video-animations

description

Create high-quality Remotion video animations for GAIA product commercials. Use when building, modifying, or creating new scenes for the GAIA promotional video (apps/video), creating Apple-style motion design commercials in Remotion, or when working on any video animation in the GAIA monorepo. Covers scene architecture, animation patterns, typography, transitions, sound design, and aesthetic rules derived from 72 production conversations. Also use when the user asks to create a new video, add scenes, fix animation timing, or improve visual quality of Remotion compositions.

GAIA Video Animations

Production-grade Remotion animation skill for GAIA product videos. Every rule below was learned from real feedback over 72 creative direction sessions.

Quick Reference

Spec: 1920x1080 @ 30fps, ~90 seconds, dark theme
Stack: Remotion 4.x, React, TypeScript, TransitionSeries
Style: Apple/Notion commercial — fast, typographic, flat, real components
Aesthetic rules: See references/aesthetic-rules.md
Animation patterns: See references/animation-patterns.md
Scene architecture: See references/scene-architecture.md

Core Principles (Non-Negotiable)

It's a VIDEO, not a UI — everything 2x larger than web. Hero text 150-200px. Cards fill the screen.
Use REAL components from the GAIA codebase — never recreate. Import actual components with dummy data.
Fast-paced — no scene dwells. Cut durations 20-40% shorter than instinct says. Short scenes: 50-100 frames. Long scenes: max 255 frames.
Flat design — no outlines, no borders, no drop shadows, no glows (except subtle radial blooms on CTA scenes).
No italic text. Ever. No serif. No emojis — use gaia-icons (@theexperiencecompany/gaia-icons/solid-rounded).
Snap, don't bounce — text entrances use damping: 200 (instant snap). Only cards/icons get bouncy springs.
Seamless transitions — scenes overlap via TransitionSeries. No dead air between scenes.

Constants (Always Centralized)

Never hardcode colors, fonts, or spring configs. Use constants.ts:

export const COLORS = {
  bg: "#111111", bgLight: "#111111", secondaryBg: "#1a1a1a",
  surface: "#27272a", primary: "#00bbff", white: "#ffffff",
  textDark: "#ffffff", zinc400: "#a1a1aa", zinc500: "#71717a",
  zinc600: "#a1a1aa", zinc700: "#3f3f46", zinc800: "#27272a", zinc900: "#18181b",
} as const;

export const FONTS = {
  display: '"Aeonik", "Helvetica Neue", Helvetica, sans-serif',
  body: '"Inter", system-ui, sans-serif',
  mono: '"Anonymous Pro", "Cascadia Code", monospace',
} as const;

export const TRANSITIONS = { fast: 8, normal: 12, slow: 15, reveal: 20 } as const;

export const SPRINGS = {
  smooth: { damping: 200 },
  snappy: { damping: 20, stiffness: 200 },
  natural: { damping: 18, stiffness: 120 },
  bouncy: { damping: 8, stiffness: 180 },
  cinematic: { damping: 22, stiffness: 80 },
} as const;

Sound Design

export const SFX = {
  whoosh: "https://remotion.media/whoosh.wav",   // scene transitions (slide/wipe only)
  whip: "https://remotion.media/whip.wav",       // word beat slams
  uiSwitch: "https://remotion.media/switch.wav", // UI elements appearing
  mouseClick: "https://remotion.media/mouse-click.wav", // typing (sparingly)
} as const;

Rules: whip for word slams, whoosh for transitions, uiSwitch for cards. Never play click sounds where nothing is clicked.

Common Pitfalls

Too small — if not readable on 4K TV from a couch, bigger
Elastic text — never bouncy springs on text. damping: 200 only
Emojis — use gaia-icons with style={{ color: X }} (not color prop)
Broken assets — always staticFile("images/..."). Verify file exists
Wrapper containers — no boxes around fullscreen content. Direct on AbsoluteFill
Grid/dot backgrounds — never
Scene too long — 50-100f for text, 100-180f for UI, max 255f
Italic/serif — never
Borders on cards — flat only, no border property
Dark SVG on dark bg — filter: invert(1)
Duration mismatch — Root.tsx durationInFrames = sum(scenes) - sum(transitions). Recalculate after every change.
Fade between word beats — use instant hard cuts (if (frame >= exitFrame) return null), not fades

related-skills.json

same repository

motion-design-videos.md

from "theexperiencecompany/skills"

Produce an Apple-keynote-quality motion-design video in HyperFrames (HTML + GSAP compositions) — kinetic typography plus real product UI, scored to a real music track, rendered at 4K. Use when asked to make a motion-design video, an Apple-style launch/product film, a feature-announcement video, a hype/promo reel or sizzle, ESPECIALLY in HyperFrames, or when porting motion-studio/Remotion components into a HyperFrames video. The engine is HyperFrames — `npx hyperframes` lint/inspect/render, one paused GSAP timeline on window.__timelines, sub-compositions, a reusable component library, and a 4K scale-stage. Covers the full pipeline — discovery, a binding creative brief, a music beat grid, an agent team (scriptwriter, reviewer, component porter, video builder, UX and craft auditors), faithful component porting, the Apple aesthetic and exact palette, sourcing a real royalty-free music track beat-matched to the edit, 4K export, frame-by-frame verification, and the hard-won pitfalls that cost real iterations.

2026-05-222

accurate-testing.md

from "theexperiencecompany/skills"

Write test cases that catch real bugs in production code instead of producing false confidence. Use when writing, reviewing, or planning tests for any codebase. Triggers on: "write tests", "add test coverage", "test this function", "create unit tests", "integration tests", "fix flaky tests", "improve test coverage", "review test quality", "are these tests good", "test plan", or any task involving pytest, vitest, jest, or other test frameworks. Prevents common AI testing pitfalls: over-mocking, testing frameworks instead of production code, fake implementations that bypass real logic, and assertion-free tests.

2026-03-312

creating-design-systems.md

from "theexperiencecompany/skills"

Use when reverse-engineering a codebase's implicit design system, creating a DESIGN.md style guide, documenting design tokens, or establishing visual language standards. Also use when asked to audit UI consistency, rationalize ad-hoc styling into a system, or prepare a design reference that enables one-shotting new components.

2026-03-262

landing-page.md

from "theexperiencecompany/skills"

1-shot high-quality landing pages and demos in GAIA's design system. Use when building any new marketing or landing page, feature showcase, persona page, or integration page for the GAIA web app.

2026-03-262

gaia-ui.md

from "theexperiencecompany/skills"

Design language and visual conventions for the GAIA web app (apps/web). Use when building new components, pages, tool call sections, chat bubbles, or any UI element in GAIA. Covers the design philosophy, color system, typography, spacing, icons, animations, and all patterns needed to make anything look native to GAIA.

2026-03-012

package.json

"author": "theexperiencecompany"

"repository": "theexperiencecompany/skills"

View GitHub Repository View Creator Repositories

$ install --global

$ download --local

Run Skill in Manus

$ useful --forSOC

Software DevelopersComputer and Mathematical Occupations15-1252L4

name

gaia-video-animations

description

GAIA Video Animations

Production-grade Remotion animation skill for GAIA product videos. Every rule below was learned from real feedback over 72 creative direction sessions.

Quick Reference

Spec: 1920x1080 @ 30fps, ~90 seconds, dark theme
Stack: Remotion 4.x, React, TypeScript, TransitionSeries
Style: Apple/Notion commercial — fast, typographic, flat, real components
Aesthetic rules: See references/aesthetic-rules.md
Animation patterns: See references/animation-patterns.md
Scene architecture: See references/scene-architecture.md

Core Principles (Non-Negotiable)

It's a VIDEO, not a UI — everything 2x larger than web. Hero text 150-200px. Cards fill the screen.
Use REAL components from the GAIA codebase — never recreate. Import actual components with dummy data.
Fast-paced — no scene dwells. Cut durations 20-40% shorter than instinct says. Short scenes: 50-100 frames. Long scenes: max 255 frames.
Flat design — no outlines, no borders, no drop shadows, no glows (except subtle radial blooms on CTA scenes).
No italic text. Ever. No serif. No emojis — use gaia-icons (@theexperiencecompany/gaia-icons/solid-rounded).
Snap, don't bounce — text entrances use damping: 200 (instant snap). Only cards/icons get bouncy springs.
Seamless transitions — scenes overlap via TransitionSeries. No dead air between scenes.

Constants (Always Centralized)

Never hardcode colors, fonts, or spring configs. Use constants.ts:

export const COLORS = {
  bg: "#111111", bgLight: "#111111", secondaryBg: "#1a1a1a",
  surface: "#27272a", primary: "#00bbff", white: "#ffffff",
  textDark: "#ffffff", zinc400: "#a1a1aa", zinc500: "#71717a",
  zinc600: "#a1a1aa", zinc700: "#3f3f46", zinc800: "#27272a", zinc900: "#18181b",
} as const;

export const FONTS = {
  display: '"Aeonik", "Helvetica Neue", Helvetica, sans-serif',
  body: '"Inter", system-ui, sans-serif',
  mono: '"Anonymous Pro", "Cascadia Code", monospace',
} as const;

export const TRANSITIONS = { fast: 8, normal: 12, slow: 15, reveal: 20 } as const;

export const SPRINGS = {
  smooth: { damping: 200 },
  snappy: { damping: 20, stiffness: 200 },
  natural: { damping: 18, stiffness: 120 },
  bouncy: { damping: 8, stiffness: 180 },
  cinematic: { damping: 22, stiffness: 80 },
} as const;

Sound Design

export const SFX = {
  whoosh: "https://remotion.media/whoosh.wav",   // scene transitions (slide/wipe only)
  whip: "https://remotion.media/whip.wav",       // word beat slams
  uiSwitch: "https://remotion.media/switch.wav", // UI elements appearing
  mouseClick: "https://remotion.media/mouse-click.wav", // typing (sparingly)
} as const;

Rules: whip for word slams, whoosh for transitions, uiSwitch for cards. Never play click sounds where nothing is clicked.

Common Pitfalls

Too small — if not readable on 4K TV from a couch, bigger
Elastic text — never bouncy springs on text. damping: 200 only
Emojis — use gaia-icons with style={{ color: X }} (not color prop)
Broken assets — always staticFile("images/..."). Verify file exists
Wrapper containers — no boxes around fullscreen content. Direct on AbsoluteFill
Grid/dot backgrounds — never
Scene too long — 50-100f for text, 100-180f for UI, max 255f
Italic/serif — never
Borders on cards — flat only, no border property
Dark SVG on dark bg — filter: invert(1)
Duration mismatch — Root.tsx durationInFrames = sum(scenes) - sum(transitions). Recalculate after every change.
Fade between word beats — use instant hard cuts (if (frame >= exitFrame) return null), not fades

gaia-video-animations

GAIA Video Animations

Quick Reference

Core Principles (Non-Negotiable)

Constants (Always Centralized)

Sound Design

Common Pitfalls

More from this repository

GAIA Video Animations

Quick Reference

Core Principles (Non-Negotiable)

Constants (Always Centralized)

Sound Design

Common Pitfalls

More from this repository