Design & Copywriting Standards

Visual Design Principles

When designing for the Agent Board, focus on high-impact, motion-first layouts. Since the output is rendered as video via Remotion, design decisions must prioritize frame-perfect consistency and readability at common video resolutions (typically 1280x720 or 1080x1080).

Animation & Motion

All visual elements MUST be driven by Remotion's frame-based system. This ensures that animations are deterministic and render correctly during the export process.

• Frame-Driven Logic: Never use CSS transitions or Tailwind animation classes. All movement must be calculated using the useCurrentFrame() hook and interpolation.
• Spring Physics: For natural movement, use the spring function rather than linear increments. This is especially effective for bar charts, scale-ins, and UI transitions.
• 3D Standards: When using 3D elements via @remotion/three, ensure all mesh rotations and positions are driven by useCurrentFrame(). Avoid the standard R3F useFrame() loop to prevent flickering.

// Correct: Frame-driven spring animation
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: { damping: 12 }
});

return <div style={{ transform: `scale(${scale})` }}>...</div>;

Typography & Layout

Readability is the primary goal for video copywriting. Text must be legible even on mobile screens.

• Safe Areas: Keep critical text and UI elements within the "action safe" area (inner 90% of the composition).
• Font Loading: Use the @remotion/google-fonts package to ensure fonts are fully loaded before rendering begins.
• Contrast: Maintain high contrast between text and backgrounds. Use overlays (e.g., AbsoluteFill with a semi-transparent background) when placing text over video or complex images.

Copywriting Guidelines

Copy for the Agent Board should be concise, persuasive, and timed for human reading speeds. Agents should generate content that feels dynamic and "broadcast-ready."

Voice and Tone

• Direct & Active: Use active verbs (e.g., "Discover," "Launch," "Analyze") rather than passive descriptions.
• Clear Hierarchy: Structure copy with a primary headline and brief supporting text.
• Context-Aware: Tailor the tone to the template. Marketing templates should be energetic; data reports should be professional and objective.

Writing for Motion

Copy on a video board isn't static; it has a temporal dimension.

• The "Typewriter" Effect: For longer sentences, use a typewriter animation to guide the viewer’s eye and keep them engaged.
• Word Highlighting: Use high-contrast highlights for keywords to emphasize the "core message" of a sentence.
• Timing: Aim for a reading speed of roughly 2.5 to 3 words per second. If a slide contains 15 words, the duration should be at least 5-6 seconds.

// Standard for word highlighting in copy
const FULL_TEXT = 'From prompt to motion graphics.';
const HIGHLIGHT_WORD = 'motion graphics';

// Use the Highlight component to draw attention to key takeaways
<Highlight
  word={HIGHLIGHT_WORD}
  color="#A7C7E7"
  delay={30}
  durationInFrames={18}
/>

Data Visualization Standards

Charts and graphs are core components of the Agent Board. They must be designed to tell a story through motion.

• Staggered Entry: Animate data points (bars, pie segments, or line dots) sequentially rather than all at once. This helps the viewer process the data scale.
• Dynamic Labels: Always include Y-axis scales and X-axis labels to provide context. Labels should fade in or scale up alongside the data they represent.
• Color Palettes: Use a consistent color language across charts (e.g., Gold #D4AF37 for primary metrics, Muted #888888 for secondary axes).

Asset Management

To ensure reliability across different environments, follow these asset standards:

• Local Assets: Place all images, SVGs, and audio files in the public/ folder.
• Referencing: Always use the staticFile() helper to reference local assets. This ensures correct path resolution during cloud rendering.
• Video Embeds: When using background videos, ensure they are decodable by the browser using the canDecode utility to prevent render failures.

import { Img, staticFile } from 'remotion';

// Correct asset reference
export const Logo = () => {
  return <Img src={staticFile('brand-logo.png')} />;
};