# Glass Lens
URL: https://remocn.dev/docs/effects/glass-lens

A glass lens drop magnifies a headline word, glides to a clip and flattens into a call-to-action pill

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

## Installation

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

## Usage

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

const GlassLensScene = () => (
  <GlassLens
    lines={["Every frame,", "composed."]}
    focus={{ line: 0, word: 1 }}
    cta="Start building"
    src="/images/product.png"
  />
);

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

Headline lines rise in on the left and a glass drop slides in, settling on the `focus` word to magnify it. The drop then glides to the highlighted clip in the product pane, travels down to the call-to-action slot, flattens into a pill and fills with the accent, and the `cta` label and arrow land at frame 180. Pass `lines`, `cta` and your own `src` or `children` for the pane; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Every frame,", "composed."]` | Headline lines, set large on the left |
| `italicLast` | `boolean` | `true` | Set the last headline line in italic |
| `focus` | `{ line: number; word: number }` | `{ line: 0, word: 1 }` | Line and word index the lens stops on first |
| `cta` | `string` | `"Start with remocn"` | Label inside the pill the lens becomes |
| `logo` | `React.ReactNode` | — | Replaces the Remocn logo above the headline |
| `src` | `string` | — | Screenshot for the product pane |
| `children` | `React.ReactNode` | — | Custom product pane content; wins over src |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the pill and highlights |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette |

## Use when
- A launch video that moves from a headline to a product screen to a call to action in one continuous motion.
- Drawing attention to a key word in a headline before pointing at a specific clip or feature.
- A closing beat that turns a glass drop into the final button.

## Don't use when
- You only need the magnified word in a headline — use `glass-capsule`.
- You want a product screen revealed with a hairline of light, not a lens — use `slit-reveal`.
- You need a longer walk through several regions of a screenshot — use `screenshot-tour`.