# ElevenLabs-Style Video Aesthetic

A premium SaaS promo video style characterized by dark backgrounds, gradient accents, smooth text reveals, floating particles, and confident motion. This guide provides complete implementation patterns for recreating this aesthetic in Remotion + remotion-bits.

## Visual DNA

### Color Palette

```tsx
// colors.ts — ElevenLabs-style palette
export const colors = {
  // Backgrounds
  bg: '#0a0a0a',
  bgAlt: '#111111',
  bgCard: 'rgba(255,255,255,0.05)',
  bgCardHover: 'rgba(255,255,255,0.08)',
  
  // Borders
  border: 'rgba(255,255,255,0.1)',
  borderFocus: 'rgba(255,255,255,0.2)',
  
  // Text
  text: '#ffffff',
  textMuted: 'rgba(255,255,255,0.6)',
  textSubtle: 'rgba(255,255,255,0.4)',
  
  // Accents
  purple: '#7c3aed',
  purpleLight: '#a78bfa',
  cyan: '#06b6d4',
  cyanLight: '#22d3ee',
  orange: '#f97316',
  
  // Glows
  glowPurple: 'rgba(124,58,237,0.3)',
  glowCyan: 'rgba(6,182,212,0.3)',
  
  // Gradients
  gradientPrimary: 'linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%)',
  gradientText: 'linear-gradient(90deg, #7c3aed, #06b6d4)',
};
```

### Typography

```tsx
// typography.ts
export const typography = {
  // Font family (use Inter, SF Pro, or similar geometric sans-serif)
  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
  
  // Weights
  heading: { fontWeight: 800 },
  subheading: { fontWeight: 700 },
  body: { fontWeight: 500 },
  caption: { fontWeight: 400 },
  
  // Sizes (for 1080p)
  hero: { fontSize: 96, lineHeight: 1.1 },
  title: { fontSize: 72, lineHeight: 1.15 },
  subtitle: { fontSize: 48, lineHeight: 1.2 },
  body: { fontSize: 32, lineHeight: 1.4 },
  small: { fontSize: 24, lineHeight: 1.5 },
};
```

### Motion Philosophy

```tsx
// motion.ts — Confident, smooth, never rushed
export const motion = {
  // Easing presets
  smooth: 'easeOutCubic',      // Default for most animations
  dramatic: 'easeInOutQuart',   // Scene transitions
  bounce: 'easeOutBack',        // Attention-grabbing elements
  
  // Timing (frames at 30fps)
  fast: 15,      // 0.5s — Quick micro-interactions
  normal: 30,    // 1.0s — Standard reveals
  slow: 45,      // 1.5s — Hero elements
  dramatic: 60,  // 2.0s — Scene transitions
  
  // Stagger delays
  tight: 2,      // Rapid succession
  normal: 4,     // Word-by-word reveals
  relaxed: 8,    // Card reveals
};
```

---

## Core Patterns

### 1. Word-by-Word Text Reveal (Signature Effect)

The quintessential ElevenLabs animation — text appearing word by word with blur and slide.

```tsx
import { AnimatedText } from 'remotion-bits';

export const HeroText: React.FC<{ text: string; delay?: number }> = ({ 
  text, 
  delay = 0 
}) => (
  <AnimatedText
    transition={{
      y: [60, 0],
      opacity: [0, 1],
      blur: [15, 0],
      split: 'word',
      splitStagger: 4,
      duration: 25,
      delay,
      easing: 'easeOutCubic',
    }}
    style={{
      fontSize: 96,
      fontWeight: 800,
      color: 'white',
      textAlign: 'center',
      lineHeight: 1.1,
    }}
  >
    {text}
  </AnimatedText>
);
```

### 2. Gradient Text Effect

```tsx
export const GradientText: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <AnimatedText
    transition={{
      y: [30, 0],
      opacity: [0, 1],
      duration: 20,
      easing: 'easeOutCubic',
    }}
    style={{
      fontSize: 32,
      fontWeight: 600,
      background: 'linear-gradient(90deg, #7c3aed, #06b6d4)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
    }}
  >
    {children}
  </AnimatedText>
);
```

### 3. Glow Background Effect

```tsx
import { useCurrentFrame, interpolate } from 'remotion';

export const GlowOrb: React.FC<{
  color?: string;
  size?: number;
  x?: string;
  y?: string;
  pulseSpeed?: number;
}> = ({ 
  color = 'rgba(124,58,237,0.3)', 
  size = 600,
  x = '50%',
  y = '50%',
  pulseSpeed = 0.02,
}) => {
  const frame = useCurrentFrame();
  
  // Subtle breathing animation
  const scale = interpolate(
    Math.sin(frame * pulseSpeed),
    [-1, 1],
    [0.9, 1.1]
  );
  
  const opacity = interpolate(
    Math.sin(frame * pulseSpeed + 0.5),
    [-1, 1],
    [0.7, 1]
  );

  return (
    <div
      style={{
        position: 'absolute',
        width: size,
        height: size,
        left: x,
        top: y,
        transform: `translate(-50%, -50%) scale(${scale})`,
        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
        filter: 'blur(80px)',
        opacity,
        pointerEvents: 'none',
      }}
    />
  );
};
```

### 4. Glass Morphism Card

```tsx
import { StaggeredMotion } from 'remotion-bits';

export const GlassCard: React.FC<{
  children: React.ReactNode;
  delay?: number;
}> = ({ children, delay = 0 }) => (
  <StaggeredMotion
    transition={{
      y: [80, 0],
      opacity: [0, 1],
      scale: [0.9, 1],
      duration: 25,
      delay,
      easing: 'easeOutCubic',
    }}
  >
    <div
      style={{
        padding: 40,
        background: 'rgba(255,255,255,0.05)',
        borderRadius: 24,
        border: '1px solid rgba(255,255,255,0.1)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
      }}
    >
      {children}
    </div>
  </StaggeredMotion>
);
```

### 5. Audio Waveform Visualization

```tsx
import { useCurrentFrame, interpolate } from 'remotion';

export const Waveform: React.FC<{
  bars?: number;
  color?: string;
  width?: number;
  height?: number;
}> = ({ 
  bars = 50, 
  color = 'linear-gradient(to top, #7c3aed, #06b6d4)',
  width = 6,
  height = 120,
}) => {
  const frame = useCurrentFrame();

  return (
    <div style={{ 
      display: 'flex', 
      gap: 4, 
      alignItems: 'center', 
      height,
    }}>
      {Array.from({ length: bars }).map((_, i) => {
        const phase = (frame * 0.1) + (i * 0.3);
        const barHeight = interpolate(
          Math.sin(phase) * Math.cos(phase * 0.5),
          [-1, 1],
          [20, height]
        );
        const opacity = interpolate(i, [0, bars/2, bars], [0.3, 1, 0.3]);

        return (
          <div
            key={i}
            style={{
              width,
              height: barHeight,
              borderRadius: width / 2,
              background: color,
              opacity,
            }}
          />
        );
      })}
    </div>
  );
};
```

### 6. Floating Particles Background

```tsx
import { Particles, Spawner, Behavior, useViewportRect } from 'remotion-bits';

export const ParticleBackground: React.FC<{ children: React.ReactNode }> = ({ 
  children 
}) => {
  const rect = useViewportRect();

  return (
    <div style={{ 
      position: 'absolute', 
      width: '100%', 
      height: '100%',
      background: '#0a0a0a',
      overflow: 'hidden',
    }}>
      {/* Ambient floating particles */}
      <Particles startFrame={0}>
        <Spawner
          rate={0.3}
          position={{ x: rect.width / 2, y: rect.height + 50 }}
          area={{ width: rect.width, height: 0 }}
          velocity={{ x: 0, y: -1.5, varianceX: 0.5, varianceY: 0.3 }}
          lifespan={300}
          max={50}
        >
          {/* Multiple particle variants */}
          <div style={{
            width: 8,
            height: 8,
            borderRadius: '50%',
            background: 'rgba(124, 58, 237, 0.4)',
          }} />
          <div style={{
            width: 6,
            height: 6,
            borderRadius: '50%',
            background: 'rgba(6, 182, 212, 0.4)',
          }} />
          <div style={{
            width: 4,
            height: 4,
            borderRadius: '50%',
            background: 'rgba(255, 255, 255, 0.3)',
          }} />
        </Spawner>

        <Behavior drag={0.995} />
        <Behavior
          handler={(p) => {
            // Gentle horizontal drift
            p.velocity.x += Math.sin(p.age * 0.02) * 0.02;
          }}
        />
        <Behavior opacity={[0, 0.6, 0.6, 0]} />
        <Behavior scale={[0.5, 1, 1, 0.5]} />
      </Particles>

      {/* Content layer */}
      {children}
    </div>
  );
};
```

### 7. Staggered Feature Cards

```tsx
import { StaggeredMotion } from 'remotion-bits';

interface Feature {
  icon: string;
  title: string;
  description: string;
}

export const FeatureCards: React.FC<{ features: Feature[] }> = ({ features }) => (
  <StaggeredMotion
    transition={{
      y: [80, 0],
      opacity: [0, 1],
      scale: [0.9, 1],
      stagger: 8,
      staggerDirection: 'forward',
      duration: 25,
      easing: 'easeOutCubic',
    }}
    style={{ display: 'flex', gap: 40 }}
  >
    {features.map((f, i) => (
      <div
        key={i}
        style={{
          width: 320,
          padding: 40,
          background: 'rgba(255,255,255,0.05)',
          borderRadius: 24,
          border: '1px solid rgba(255,255,255,0.1)',
          backdropFilter: 'blur(20px)',
        }}
      >
        <div style={{ fontSize: 48, marginBottom: 16 }}>{f.icon}</div>
        <div style={{ 
          fontSize: 24, 
          fontWeight: 700, 
          color: 'white', 
          marginBottom: 8 
        }}>
          {f.title}
        </div>
        <div style={{ 
          fontSize: 16, 
          color: 'rgba(255,255,255,0.6)' 
        }}>
          {f.description}
        </div>
      </div>
    ))}
  </StaggeredMotion>
);
```

### 8. 3D Phone/Device Mockup

```tsx
import { Scene3D, Step, Element3D } from 'remotion-bits';

export const PhoneMockup: React.FC = () => (
  <Scene3D
    perspective={1200}
    transitionDuration={40}
    easing="easeInOutCubic"
  >
    {/* Initial centered view */}
    <Step duration={90} z={0} rotateY={0}>
      <PhoneFrame>
        <ChatUI />
      </PhoneFrame>
    </Step>

    {/* Tilted perspective view */}
    <Step duration={90} z={-100} rotateY={15} x={100}>
      <PhoneFrame>
        <DashboardUI />
      </PhoneFrame>
    </Step>

    {/* Zoomed out view */}
    <Step duration={60} z={-300} scale={0.8}>
      <PhoneFrame>
        <SettingsUI />
      </PhoneFrame>
    </Step>
  </Scene3D>
);

const PhoneFrame: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div
    style={{
      width: 375,
      height: 812,
      background: '#1a1a1a',
      borderRadius: 40,
      border: '8px solid #333',
      overflow: 'hidden',
      boxShadow: '0 50px 100px rgba(0,0,0,0.5)',
    }}
  >
    {children}
  </div>
);
```

---

## Complete Scene Templates

### Scene: Logo Reveal

```tsx
import { AbsoluteFill, Sequence } from 'remotion';
import { AnimatedText } from 'remotion-bits';

export const LogoReveal: React.FC = () => (
  <AbsoluteFill style={{ background: '#0a0a0a' }}>
    {/* Background glow */}
    <GlowOrb color="rgba(124,58,237,0.25)" size={800} />
    
    {/* Logo */}
    <AbsoluteFill style={{ 
      justifyContent: 'center', 
      alignItems: 'center' 
    }}>
      <AnimatedText
        transition={{
          scale: [0.8, 1],
          opacity: [0, 1],
          blur: [20, 0],
          duration: 30,
          easing: 'easeOutCubic',
        }}
        style={{
          fontSize: 72,
          fontWeight: 700,
          color: 'white',
          letterSpacing: -2,
        }}
      >
        YourBrand
      </AnimatedText>
    </AbsoluteFill>
  </AbsoluteFill>
);
```

### Scene: Hero Statement

```tsx
export const HeroStatement: React.FC = () => (
  <AbsoluteFill style={{ 
    background: '#0a0a0a',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    gap: 24,
  }}>
    {/* Main headline */}
    <AnimatedText
      transition={{
        y: [60, 0],
        opacity: [0, 1],
        blur: [15, 0],
        split: 'word',
        splitStagger: 4,
        duration: 25,
        easing: 'easeOutCubic',
      }}
      style={{
        fontSize: 96,
        fontWeight: 800,
        color: 'white',
        textAlign: 'center',
      }}
    >
      The Future of Voice
    </AnimatedText>

    {/* Subheadline with gradient */}
    <Sequence from={30}>
      <GradientText>
        Powered by AI
      </GradientText>
    </Sequence>
  </AbsoluteFill>
);
```

### Scene: Feature Showcase

```tsx
export const FeatureShowcase: React.FC = () => {
  const features = [
    { icon: '⚡', title: 'Ultra-Fast', description: 'Sub-300ms latency' },
    { icon: '🌍', title: 'Global', description: '32 languages supported' },
    { icon: '🎛️', title: 'Customizable', description: 'Full API control' },
  ];

  return (
    <AbsoluteFill style={{
      background: '#0a0a0a',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <GlowOrb color="rgba(6,182,212,0.2)" x="30%" y="40%" />
      <GlowOrb color="rgba(124,58,237,0.2)" x="70%" y="60%" />
      
      <FeatureCards features={features} />
    </AbsoluteFill>
  );
};
```

---

## Full Composition Example

```tsx
import { AbsoluteFill, Sequence } from 'remotion';

export const ElevenLabsStyleVideo: React.FC = () => (
  <ParticleBackground>
    {/* Scene 1: Logo Reveal (0-2s) */}
    <Sequence from={0} durationInFrames={60}>
      <LogoReveal />
    </Sequence>

    {/* Scene 2: Hero Statement (2-5s) */}
    <Sequence from={60} durationInFrames={90}>
      <HeroStatement />
    </Sequence>

    {/* Scene 3: Waveform Demo (5-8s) */}
    <Sequence from={150} durationInFrames={90}>
      <WaveformScene />
    </Sequence>

    {/* Scene 4: Feature Cards (8-12s) */}
    <Sequence from={240} durationInFrames={120}>
      <FeatureShowcase />
    </Sequence>

    {/* Scene 5: Phone Mockup (12-18s) */}
    <Sequence from={360} durationInFrames={180}>
      <PhoneMockup />
    </Sequence>

    {/* Scene 6: CTA (18-20s) */}
    <Sequence from={540} durationInFrames={60}>
      <CTAScene />
    </Sequence>
  </ParticleBackground>
);

export default ElevenLabsStyleVideo;

<!-- CONFIG: {"durationInFrames": 600, "fps": 30, "width": 1920, "height": 1080} -->
```

---

## Quick Reference

### When to Use This Style

✅ **Perfect for:**
- SaaS product promos
- AI/ML product demos
- Developer tools
- Enterprise software
- Tech announcements

❌ **Avoid for:**
- Consumer lifestyle brands
- Playful/fun products
- Children's content
- Budget-conscious brands

### Key Principles

1. **Dark background is essential** — Always `#0a0a0a` or similar
2. **Text reveals are slow and confident** — No snappy or rushed animations
3. **Gradients are subtle** — Used as accents, not overwhelming
4. **Particles are ambient** — Background texture, never distracting
5. **Glass effects for UI** — Frosted blur + subtle borders
6. **Professional easing** — `easeOutCubic` for reveals, `easeInOutQuart` for transitions

### Component Checklist

| Effect | Component | Key Props |
|--------|-----------|-----------|
| Word reveal | `AnimatedText` | `split="word"`, `splitStagger`, `blur` |
| Staggered items | `StaggeredMotion` | `stagger`, `staggerDirection` |
| Gradient bg | `GradientTransition` | `gradient`, `easing` |
| Particles | `Particles` + `Spawner` | `rate`, `lifespan`, `Behavior` |
| 3D mockups | `Scene3D` + `Step` | `perspective`, `rotateY`, `z` |
| Typing | `TypeWriter` | `typeSpeed`, `cursor` |
