# Remotion Examples

Copy-paste ready examples for common video styles.

## ElevenLabs / Premium SaaS Style

Modern, dark-mode aesthetic perfect for AI products, SaaS, and enterprise software.

| Example | Description | Duration |
|---------|-------------|----------|
| [elevenlabs-style-simple.tsx](elevenlabs-style-simple.tsx) | Minimal starter — glow + headline + gradient text | 5s |
| [elevenlabs-style-promo.tsx](elevenlabs-style-promo.tsx) | **Recommended** — Product promo with all patterns | 12s |
| [elevenlabs-style-complete.tsx](elevenlabs-style-complete.tsx) | Full production example — all scenes + particles | 20s |

**Taste guide:** `/skills/taste-protocol/video-taste-elevenlabs-premium.md`

### Key Patterns

```tsx
// Word-by-word reveal (the signature effect)
<AnimatedText
  transition={{
    y: [60, 0],
    opacity: [0, 1],
    blur: [15, 0],
    split: "word",
    splitStagger: 4,
    duration: 25,
    easing: "easeOutCubic",
  }}
>
  Your Premium Text
</AnimatedText>

// Gradient text
style={{
  background: "linear-gradient(90deg, #7c3aed, #06b6d4)",
  WebkitBackgroundClip: "text",
  WebkitTextFillColor: "transparent",
}}

// Glass card
style={{
  background: "rgba(255,255,255,0.05)",
  backdropFilter: "blur(20px)",
  border: "1px solid rgba(255,255,255,0.1)",
  borderRadius: 24,
}}
```

## 3D Scenes

| Example | Description |
|---------|-------------|
| [scene3d-showcase.tsx](scene3d-showcase.tsx) | Scene3D with Steps and camera transitions |

## Style Quick Reference

| Style | Background | Accents | Motion |
|-------|------------|---------|--------|
| **ElevenLabs/SaaS** | `#0a0a0a` | Purple `#7c3aed` + Cyan `#06b6d4` | Smooth, confident |
| **Terminal/Hacker** | `#000000` | Green `#00ff00` | Sharp, digital |
| **Bright/Consumer** | Gradients | Vibrant rainbow | Bouncy, playful |
