信息短视频生成

Create production-quality short-form videos using Remotion with adaptive layouts, theme-aware visual templates, and optional background music. Default structure is Hook → Content → End Card, with orientation, pacing, typography, colors, motion style, and audio mood selected from the video topic.

Quick Start

When the user asks to create a short video, follow this sequence:

1. Confirm the topic, audience, brand, key messages, destination platform, and aspect ratio. Default to vertical 9:16 when the platform is unspecified. Infer from platform when known: TikTok/Reels/Shorts = 9:16, Bilibili/YouTube/X/LinkedIn = 16:9, feed card = 1:1 or 4:5.
2. Choose a visual style template from references/visual-style-templates.md based on topic/domain. For news, sports, finance, tech, education, lifestyle, culture, and event content, prefer the matching template before inventing a new look.
3. Choose the scene pattern from references/scene-templates.md. Use the default 3-scene formula unless the topic strongly needs a report-style, scoreboard-style, or market-brief layout.
4. Choose the background music strategy from references/audio-design.md: user-provided audio, licensed bundled track, or disabled audio slot.
5. Scaffold the project (or use existing) with the structure below
6. Copy the bundled assets/templates/aspect.tsx, effects.tsx, and the matching domain component file into src/components/
7. Build scenes with AspectProfile-aware safe areas, theme tokens, vertical-first stacked layouts, and optional background music
8. Render with npx remotion render src/index.ts ShortVideoVertical out/video-vertical.mp4
9. Run the QA checks in references/render-quality.md before considering the video done

Layout Density Rules

Never create sparse "information card" scenes where a small block of text floats over a mostly empty background. Every scene must have a clear visual anchor and purposeful use of space.

Required per scene:

• One dominant focal element: headline block, scoreboard, chart, media panel, diagram, timeline, product view, portrait/image, or strong CTA.
• One supporting information system: cards, lower third, stat row, ticker, source/date strip, step list, quote, or recap bar.
• One spatial anchor near the bottom or side: progress rail, ticker, footer, timeline, caption band, next item strip, or source/date metadata.

For vertical video, use roughly the top 20% for context, middle 50-60% for the main visual/information payload, and bottom 15-25% for progress, ticker, CTA, source, or recap. For horizontal video, fill both left/right zones intentionally. Do not leave more than about one third of a frame as unassigned empty space unless full-bleed media intentionally occupies it.

Render Stability Rules

Prevent flicker, black frames, and one-frame disappearances:

• Put persistent background, texture, ticker/footer, source/date strip, and long-lived overlays at the ShortVideo root, not inside individual scenes.
• Copy and use PersistentBackground from assets/templates/effects.tsx.
• Calculate the final scene duration from durationInFrames - endStart; never hardcode an end-card duration that can finish before the composition.
• Use one shared overlap constant for scene transitions.
• Ensure carousels and active-card layouts always have at least one visible item on every frame.
• Do not fade the entire visual scene to black at the end. Keep the final card visible and fade audio only.
• Avoid high-opacity scanlines/noise and ultra-thin animated lines in low-bitrate exports; they can shimmer.

Project Structure

src/
├── index.ts               # Entry: calls registerRoot(Root)
├── Root.tsx               # Composition definition (resolution, fps, duration, defaultProps)
├── ShortVideo.tsx         # Main composition: Sequence layout + shared overlays
├── themes.ts              # Optional: selected theme tokens and template metadata
└── components/
    ├── aspect.tsx          # Aspect profiles, safe areas, vertical/landscape layout helpers
    ├── effects.tsx         # Reusable components (glow, noise, grid, cards, badges)
    ├── audio.tsx           # Reusable background music config + fade component
    ├── news-components.tsx # Optional newsroom components for media/news clips
    ├── sports-components.tsx # Optional scoreboard/highlight components for sports clips
    ├── finance-components.tsx # Optional market/KPI/chart components for finance clips
    ├── tech-components.tsx # Optional product/workflow/module components for tech clips
    ├── education-components.tsx # Optional lesson/step/diagram components for learning clips
    ├── lifestyle-components.tsx # Optional editorial/image/caption components for creator clips
    ├── culture-components.tsx # Optional archive/timeline/citation components for culture clips
    ├── event-components.tsx # Optional agenda/speaker/countdown components for event clips
    ├── HookScene.tsx       # Scene 1: Hook/attention grabber
    ├── ContentScene.tsx    # Scene 2: Main content
    └── EndCardScene.tsx    # Scene 3: Call-to-action end card
public/
└── audio/                  # Optional licensed BGM files, one per visual template

Resolution & Timing

Default specs for short-form video:

• Vertical default: 1080×1920 (9:16)
• Portrait/feed: 1080×1440 (3:4) or 1080×1350 (4:5)
• Horizontal: 1920×1080 (16:9)
• Square: 1080×1080 (1:1)
• FPS: 30
• Duration: ~18 seconds (540 frames at 30fps)
• Scene allocation: Hook 25% → Content 55% → End Card 15% (with 5% for transitions)

Scene transitions overlap by 15 frames to create a smooth crossfade. Vertical is the default output mode. For horizontal videos, use the extra width for split layouts, side panels, lower thirds, tickers, scoreboards, or chart/asset zones rather than simply scaling up a vertical layout.

Vertical Adaptation Contract

Every generated project must copy and use assets/templates/aspect.tsx.

• Register at least one 9:16 composition (1080×1920) unless the user explicitly asks for another aspect only.
• Use AspectProfile from aspect.tsx and pass profile into scenes and domain components.
• For profile.layout !== "split", replace two-column and three-column layouts with stacked cards.
• Keep all important content inside profile.safeX and profile.safeY.
• Use vertical regions intentionally: top context/title, middle primary visual payload, bottom ticker/progress/source/CTA.
• Never build a vertical video by rendering a landscape composition and cropping or stretching it.

Color Scheme

Define a theme object at the composition level and pass it down. The default theme is suitable for tech/business explainers:

export const THEME = {
  id: "tech-dark",
  background: "#08090c",  // near-black base
  primary: "#f59e0b",     // warm accent (orange/amber)
  secondary: "#06b6d4",   // cool accent (cyan/blue)
  white: "#ffffff",
  gray: "#9ca3af",
  darkGray: "#1f2937",
};

// Keep this alias when using the bundled effects.tsx template.
export const COLORS = THEME;

Use the selected visual template to replace these tokens. Keep colors, typography, overlays, and motion consistent across all scenes.

Animation Patterns

Spring Configurations

Three preset spring configs for different animation feels:

const getSpringConfig = (type: "entrance" | "snappy" | "smooth") => {
  switch (type) {
    case "entrance": return { damping: 20, stiffness: 120, mass: 1 };
    case "snappy":  return { damping: 18, stiffness: 140, mass: 1 };
    case "smooth":  return { damping: 22, stiffness: 100, mass: 1 };
    default:        return { damping: 20, stiffness: 120, mass: 1 };
  }
};

Entrance Staggering

• Title elements: 8-12 frames delay between each
• Card/list items: 8 frames stagger per index (left/right alternating)
• CTA buttons: 12-15 frames stagger each
• Apply willChange: "transform, opacity" on animated elements for performance

Spring-then-hold pattern

const entrance = spring({ frame: frame - delay, fps, config: getSpringConfig("entrance") });
const translateX = interpolate(entrance, [0, 1], [-200, 0]);

Reusable Components

The effects.tsx file (available as assets/templates/effects.tsx) contains these components. Copy it into the project's src/components/ directory instead of reimplementing:

The aspect.tsx file contains ASPECT_PROFILES, useAspectProfile, sceneSafeAreaStyle, stackAwareGrid, repeatColumns, and responsiveFont. Copy it alongside effects.tsx for every short-video project.

GlowEffect — Large blurred circles for background ambient light:

<GlowEffect color={COLORS.primary} size={600} blur={100} x={-200} y={-100} delay={0} />

NoiseOverlay — SVG fractal noise at 2.5% opacity with mixBlendMode: "overlay" for film grain texture.

GridOverlay — 60px grid lines at 3% opacity using CSS backgroundImage (linear-gradient pattern).

ProgressBar — Horizontal progress bar with rounded corners:

<ProgressBar progress={0.5} color={COLORS.primary} height={4} />

Card — Animated container sliding in from left or right:

<Card delay={15} direction="left">content</Card>

TeamBadge — Pill badge with dot indicator and left-slide entrance:

<TeamBadge text="AI TEAM" delay={5} />

StatCard — Data display card with spring scale-up entrance (supports staggered children via index):

<StatCard label="成本降低" value="80%" delay={50} index={0} />

CTAButton — Circular icon button with bottom-up entrance for end cards:

<CTAButton icon={<LikeIcon />} label="点赞" delay={30} color={COLORS.primary} />

Copy assets/templates/audio.tsx into src/components/audio.tsx when the video needs background music.

For media organization, newsroom, breaking news, policy, public affairs, or other time-sensitive reporting videos, copy assets/templates/news-components.tsx into src/components/news-components.tsx. Use it for broadcast-specific components such as breaking banners, lower thirds, tickers, source badges, timestamps, fact stacks, quote cards, timelines, map panels, and recap strips.

For sports recaps, scores, match previews, player highlights, or tournament updates, copy assets/templates/sports-components.tsx into src/components/sports-components.tsx. Use it for scoreboard heroes, matchup cards, player stat bursts, highlight timelines, controversy callouts, sports tickers, next-game strips, and final-score end cards. Do not use generic text-card carousels for sports unless the user explicitly asks for a minimal text-only style.

For finance, tech, education, lifestyle, culture, and event videos, copy the matching domain component file before building scenes:

• finance-components.tsx: market headlines, KPI strips, chart panels, sector heat lists, capital-flow panels, ticker bands, risk footers, market recap cards.
• tech-components.tsx: product hero panels, workflow pipelines, feature module grids, before/after strips, tech recap cards.
• education-components.tsx: lesson boards, step stacks, diagram panels, checklist progress, key takeaway cards, recap cards.
• lifestyle-components.tsx: editorial hero frames, caption bands, tip collages, creator handle strips, routine timelines, lifestyle end cards.
• culture-components.tsx: archive frames, era labels, documentary timelines, object detail cards, citation footers, culture end cards.
• event-components.tsx: event heroes, speaker stacks, agenda timelines, countdown panels, venue info strips, event CTA cards.

If a topic maps to a domain template, use these dedicated components as the main visual structure and reserve generic Card/StatCard for secondary details only. A domain video should not look like a recolored generic text carousel.

Font Loading

Use @remotion/google-fonts — load at the composition level, pass font family strings as props:

import { loadFont } from "@remotion/google-fonts/Oswald";
const { fontFamily: oswaldFont } = loadFont("normal", { weights: ["400", "700"], subsets: ["latin"] });

For CJK text, use Inter as the primary system font fallback (Noto Sans/Serif SC may not be available in all @remotion/google-fonts versions).

Scene Construction

Detailed scene templates and the composition wiring pattern are in references/scene-templates.md. Read that file when implementing each scene.

For domain styling, read references/visual-style-templates.md before writing scene code. It contains topic-to-template mapping plus ready-to-use visual systems for news, sports, finance, tech, education, lifestyle, culture, and event videos.

For background music, read references/audio-design.md. Use it to select the audio mood, map visual templates to licensed audio files, and add smooth fade-in/fade-out. A 30-second audio file used in a 15-second composition will be truncated at 15 seconds by the render, so always fade out near the composition end.

For render QA, read references/render-quality.md. Use it to check black frames, flicker, contact sheets, ticker safe margins, and export bitrate.

Summary of the 3-scene formula:

1. Hook (25%) — Attention grabber. Vertical: centered title stack. Horizontal: headline + visual/media/stat panel.
2. Content (55%) — Main evidence or steps. Vertical: stacked cards. Horizontal: split screen, lower-third cards, ticker, scoreboard, or market panel.
3. End Card (15%) — Brand recall and CTA. Vertical: centered CTA. Horizontal: logo lockup + recap strip + CTA cluster.

Dependencies

{
  "@remotion/cli": "^4.0.0",
  "@remotion/google-fonts": "^4.0.0",
  "@remotion/transitions": "^4.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "remotion": "^4.0.0",
  "zod": "^4.0.0"
}

Render Command

npx remotion render src/index.ts ShortVideoVertical out/video-vertical.mp4

For production exports, avoid extremely low bitrate settings. For 1080×1920 or 1920×1080 sports/news videos, target roughly 4-8 Mbps for H.264 unless the delivery platform imposes a stricter limit.

After rendering, run a black-frame check:

ffmpeg -i out/video-vertical.mp4 -vf blackdetect=d=0.03:pix_th=0.08 -an -f null -

Repeated one-frame black segments or any mid-video black flash means the render needs fixing before delivery.

For preview during development:

npx remotion studio