claude-plugins/marketing/skills/video/references/components.md

/video - Componentes e Templates Remotion

Animações Prontas (Copy-Paste)

Fade In com Scale

import { interpolate, useCurrentFrame } from "remotion"

export function FadeInScale({ children }: { children: React.ReactNode }) {
  const frame = useCurrentFrame()

  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" })
  const scale = interpolate(frame, [0, 30], [0.8, 1], { extrapolateRight: "clamp" })

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>
      {children}
    </div>
  )
}

Slide Up

export function SlideUp({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
  const frame = useCurrentFrame()

  const y = interpolate(frame, [delay, delay + 20], [50, 0], { extrapolateRight: "clamp" })
  const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" })

  return (
    <div style={{ opacity, transform: `translateY(${y}px)` }}>
      {children}
    </div>
  )
}

Bounce In (Spring)

import { spring, useCurrentFrame, useVideoConfig } from "remotion"

export function BounceIn({ children }: { children: React.ReactNode }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  const scale = spring({
    frame,
    fps,
    config: { damping: 10, stiffness: 200, mass: 0.5 },
  })

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

Text Reveal (Linha por Linha)

export function TextReveal({ lines }: { lines: string[] }) {
  const frame = useCurrentFrame()

  return (
    <div className="space-y-2">
      {lines.map((line, i) => {
        const delay = i * 15
        const opacity = interpolate(frame, [delay, delay + 10], [0, 1], { extrapolateRight: "clamp" })
        return (
          <div key={i} style={{ opacity }}>{line}</div>
        )
      })}
    </div>
  )
}

---

Templates Prontos

Logo Intro (5s)

import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"

export function LogoIntro({ logoSrc }: { logoSrc: string }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  const logoScale = spring({
    frame: frame - 10,
    fps,
    config: { damping: 12, stiffness: 200 }
  })

  const taglineY = interpolate(frame, [60, 90], [50, 0], { extrapolateRight: "clamp" })
  const taglineOpacity = interpolate(frame, [60, 90], [0, 1], { extrapolateRight: "clamp" })

  return (
    <AbsoluteFill style={{ backgroundColor: "#0f172a", justifyContent: "center", alignItems: "center" }}>
      <div style={{ transform: `scale(${logoScale})` }}>
        <Img src={logoSrc} style={{ width: "300px" }} />
      </div>
      <div style={{
        position: "absolute", bottom: "150px", fontSize: "48px",
        color: "#f8fafc", fontWeight: 600,
        transform: `translateY(${taglineY}px)`, opacity: taglineOpacity,
      }}>
        Crescimento Digital
      </div>
    </AbsoluteFill>
  )
}

Stats Highlight (3s)

export function StatsHighlight({ stat, label }: { stat: string; label: string }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  const scale = spring({ frame, fps, config: { damping: 10, mass: 0.5, stiffness: 200 } })
  const labelOpacity = interpolate(frame, [30, 45], [0, 1], { extrapolateRight: "clamp" })

  return (
    <AbsoluteFill style={{ backgroundColor: "#3b82f6", justifyContent: "center", alignItems: "center" }}>
      <div style={{ fontSize: "180px", fontWeight: 900, color: "#ffffff", transform: `scale(${scale})` }}>
        {stat}
      </div>
      <div style={{ fontSize: "40px", color: "#dbeafe", marginTop: "20px", opacity: labelOpacity }}>
        {label}
      </div>
    </AbsoluteFill>
  )
}

---

Paletas de Cores

Corporativo Profissional

const colors = {
  background: "#0f172a",
  primary: "#3b82f6",
  secondary: "#8b5cf6",
  text: "#f8fafc",
  accent: "#10b981",
}

Energético/Marketing

const colors = {
  background: "#ff006e",
  primary: "#ffbe0b",
  secondary: "#fb5607",
  text: "#ffffff",
  accent: "#8338ec",
}

Minimalista/Elegante

const colors = {
  background: "#fafafa",
  primary: "#18181b",
  secondary: "#71717a",
  text: "#18181b",
  accent: "#a855f7",
}

---

Tipografia para Vídeo

Hierarquia de Tamanhos

// Remotion 1920x1080
const textSizes = {
  hero: "120px",
  h1: "80px",
  h2: "60px",
  h3: "40px",
  body: "32px",
  caption: "24px",
}

// Remotion 1080x1920 (Vertical)
const textSizesVertical = {
  hero: "80px",
  h1: "56px",
  h2: "40px",
  h3: "32px",
  body: "24px",
  caption: "18px",
}

Font Pairings

// Moderno Tech
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');
`}</style>

// Editorial Elegante
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
`}</style>

---

Motion Design Guidelines

Duração de Animações

Tipo	Frames (30fps)	Duração
Micro (hover, toggle)	3-6	100-200ms
Rápida (fade, slide)	12-18	400-600ms
Normal (entrada cena)	24-30	800-1000ms
Lenta (transição cena)	45-60	1.5-2s

Easing Curves

import { Easing } from "remotion"

const easeOut = Easing.bezier(0, 0, 0.2, 1)
const easeIn = Easing.bezier(0.4, 0, 1, 1)
const easeInOut = Easing.bezier(0.4, 0, 0.2, 1)

const y = interpolate(frame, [0, 30], [100, 0], {
  easing: easeOut,
  extrapolateRight: "clamp"
})

Princípios de Motion

1. Staging - Um movimento de cada vez
2. Anticipation - Preparação antes do movimento
3. Follow Through - Overshooting ligeiro
4. Timing - Velocidade comunica peso/importância
5. Exaggeration - Amplificar para ênfase

---

Acessibilidade

// Contraste mínimo 4.5:1
const good = { color: "#1f2937", background: "#ffffff" } // Ratio 15.8:1

// Tamanho mínimo de texto
const minSize1080p = "28px"
const minSize4k = "56px"