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

# /video - Componentes e Templates Remotion

## Animações Prontas (Copy-Paste)

### Fade In com Scale

```tsx
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

```tsx
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)

```tsx
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)

```tsx
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)

```tsx
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)

```tsx
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
```tsx
const colors = {
  background: "#0f172a",
  primary: "#3b82f6",
  secondary: "#8b5cf6",
  text: "#f8fafc",
  accent: "#10b981",
}
```

### Energético/Marketing
```tsx
const colors = {
  background: "#ff006e",
  primary: "#ffbe0b",
  secondary: "#fb5607",
  text: "#ffffff",
  accent: "#8338ec",
}
```

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

---

## Tipografia para Vídeo

### Hierarquia de Tamanhos

```tsx
// 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

```tsx
// 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

```tsx
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

```tsx
// 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"
```