# Glass Capsule
URL: https://remocn.dev/docs/typography/glass-capsule

A glass capsule slides over the focus word of a two-line headline and magnifies it in italic.

- Install: `npx shadcn@latest add @remocn/glass-capsule`
- Vibe: premium
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glass-capsule
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlassCapsule } from "@/components/remocn/glass-capsule";

const GlassCapsuleScene = () => (
  <GlassCapsule lines={["Launch films", "that move."]} focus="move" accent="#3B5BFD" />
);

export const RemotionRoot = () => (
  <Composition
    id="GlassCapsule"
    component={GlassCapsuleScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The two lines rise in, then a glass capsule glides over `focus`, magnifies it and swaps it to a serif italic while the capsule glows. Pass `lines` and `focus` (a word that appears in them); it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Launch films", "that move."]` | Headline lines, shown top to bottom |
| `focus` | `string` | `"move"` | Word the glass capsule magnifies; must appear in lines |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A headline where one key word should be magnified and re-styled as the point.
- A premium title with a glass lens effect drawing attention to a single word.

## Don't use when
- You want a flat highlight instead of glass - use `marker-highlight`.
- You want the whole line to change - use `blur-out-up`.
- You want a simple underline - use `inline-highlight`.