# Video Taste: ElevenLabs Premium SaaS Style

A sophisticated, dark-mode aesthetic for AI products, enterprise SaaS, and premium tech brands. Inspired by ElevenLabs, Vercel, Linear, and other modern tech companies.

## When to Apply

**Use this style for:**
- AI/ML product demos
- SaaS product promos
- Developer tools
- Enterprise software
- Tech announcements
- B2B marketing videos

**Trigger words from users:**
- "premium", "professional", "sophisticated"
- "SaaS", "enterprise", "B2B"
- "AI product", "tech", "modern"
- "dark mode", "like ElevenLabs", "like Vercel"
- "clean", "minimal but impactful"

---

## Visual Foundation

### Color Palette

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Near-black | `#0a0a0a` | Always. No exceptions. |
| Background Alt | Dark gray | `#111111` | Cards, subtle variation |
| Primary Accent | Purple | `#7c3aed` | Glows, gradients, highlights |
| Secondary Accent | Cyan | `#06b6d4` | Gradient endpoints, variety |
| Text Primary | White | `#ffffff` | Headlines, important text |
| Text Muted | White 60% | `rgba(255,255,255,0.6)` | Body, descriptions |
| Text Subtle | White 40% | `rgba(255,255,255,0.4)` | Captions, tertiary |
| Card Background | White 5% | `rgba(255,255,255,0.05)` | Glass cards |
| Card Border | White 10% | `rgba(255,255,255,0.1)` | Subtle edges |

### Typography

```tsx
// Font: Inter, SF Pro, or similar geometric sans-serif
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif"

// Weights
headline: 800  // Extra bold for impact
subhead: 700   // Bold
body: 500      // Medium
caption: 400   // Regular

// Sizes (1080p reference)
hero: 96px     // Main statement
title: 72px    // Section headers
subtitle: 48px // Supporting text
body: 32px     // Descriptions
small: 24px    // Captions

// Line height: Tight for headlines (1.1), relaxed for body (1.4)
```

---

## Signature Effects

### 1. Word-by-Word Text Reveal (THE signature move)

```tsx
<AnimatedText
  transition={{
    y: [60, 0],           // Slide up
    opacity: [0, 1],       // Fade in
    blur: [15, 0],         // Unblur
    split: "word",         // Word by word
    splitStagger: 4,       // 4 frames between words
    duration: 25,          // ~0.8 seconds per word
    easing: "easeOutCubic", // Smooth deceleration
  }}
>
```

**Why it works:** Creates anticipation, guides the eye, feels premium and intentional.

### 2. Animated Glow Orbs

```tsx
const GlowOrb = ({ color, x, y }) => {
  const frame = useCurrentFrame();
  const scale = interpolate(Math.sin(frame * 0.02), [-1, 1], [0.9, 1.1]);
  
  return (
    <div style={{
      position: "absolute",
      width: 600,
      height: 600,
      left: x,
      top: y,
      transform: `translate(-50%, -50%) scale(${scale})`,
      background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
      filter: "blur(80px)",
    }} />
  );
};
```

**Placement rules:**
- 1-2 orbs per scene maximum
- Position off-center (30%/70% splits work well)
- Purple for primary, cyan for secondary
- Never let them overlap the main content directly

### 3. Gradient Text Accents

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

**Use for:** Subheadings, taglines, accent phrases. Never for main headlines.

### 4. Glass Morphism Cards

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

**Stagger entrance:** 8-10 frames between cards, `staggerDirection: "forward"`

### 5. Gradient CTA Buttons

```tsx
style={{
  background: "linear-gradient(135deg, #7c3aed, #06b6d4)",
  color: "#0a0a0a",  // Dark text on light button
  padding: "18px 40px",
  borderRadius: 50,  // Pill shape
}}
```

**Animation:** Use `easeOutBack` for slight overshoot — feels clickable.

---

## Motion Philosophy

### Timing

| Element | Duration | Delay/Stagger |
|---------|----------|---------------|
| Logo reveal | 30 frames (1s) | — |
| Headline (word-by-word) | 25 frames per word | 4 frames stagger |
| Subtext entrance | 20 frames | 30-35 frames after headline |
| Card stagger | 30 frames | 8-10 frames between |
| CTA button | 20 frames | 25-30 frames after headline |

### Easing

| Use Case | Easing | Why |
|----------|--------|-----|
| Text reveals | `easeOutCubic` | Smooth, confident deceleration |
| Scene transitions | `easeInOutQuart` | Dramatic, purposeful |
| Buttons/CTAs | `easeOutBack` | Slight bounce = interactive feel |
| Particles | `linear` or custom | Organic, natural movement |

### Pacing

- **Never rush.** Premium feels unhurried.
- **Hold moments.** Let text breathe after it lands (15-20 frames).
- **Anticipation > Speed.** The blur-to-clear reveal creates anticipation.

---

## Scene Structure Template

```
[0-2s]   Logo/Brand reveal
[2-5s]   Hero statement (word-by-word)
[5-9s]   Feature showcase (staggered cards)
[9-12s]  Call to action
```

### Scene 1: Logo (60 frames)
- Single glow orb center
- Logo scales 0.8→1, blurs 20→0, fades 0→1
- Clean, simple, confident

### Scene 2: Hero (90 frames)
- Dual glow orbs (offset positions)
- Main headline word-by-word with blur
- Subtext enters 30 frames later with gradient

### Scene 3: Features (120 frames)
- Single large glow orb
- 3 glass cards with staggered entrance
- Icons + title + description format

### Scene 4: CTA (90 frames)
- Return to single glow orb
- Word-by-word headline
- Gradient pill button with bounce

---

## Quality Checklist

Before delivering an ElevenLabs-style video, verify:

- [ ] Background is `#0a0a0a` (not pure black, not gray)
- [ ] Text reveals use `blur` + `opacity` + `y` combined
- [ ] Word splits use `splitStagger: 4` (not too fast)
- [ ] Glow orbs breathe (scale animation)
- [ ] Glass cards have `backdropFilter: blur(20px)`
- [ ] Gradient goes purple→cyan (not reversed)
- [ ] Easing is `easeOutCubic` for reveals
- [ ] Nothing feels rushed or snappy
- [ ] Text has room to breathe after landing

---

## Anti-Patterns (What NOT to Do)

❌ **Don't use pure black** (`#000000`) — too harsh, use `#0a0a0a`

❌ **Don't rush text reveals** — if it feels fast, add more stagger

❌ **Don't overdo particles** — subtle ambient only, never distracting

❌ **Don't use sharp/linear easing** — always smooth curves

❌ **Don't center everything symmetrically** — offset glows, asymmetric layouts

❌ **Don't use rainbow gradients** — stick to purple↔cyan spectrum

❌ **Don't forget the blur** — text without blur reveal looks cheap

---

## Reference Examples

- `/skills/remotion/examples/elevenlabs-style-promo.tsx` — Full 12s promo
- `/skills/remotion/examples/elevenlabs-style-complete.tsx` — 20s with particles
- `/skills/remotion/examples/elevenlabs-style-simple.tsx` — Minimal starter

## Related Resources

- `/skills/remotion/rules/elevenlabs-style-aesthetic.md` — Component patterns
- `/skills/remotion/remotion-bits-reference.md` — Full API docs
