# Glyph Relay
URL: https://remocn.dev/docs/typography/glyph-relay

"Building a product" hands off between lines until a giant question mark resolves into "Launching it?"

- Install: `npx shadcn@latest add @remocn/glyph-relay`
- Vibe: premium
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glyph-relay
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlyphRelay } from "@/components/remocn/glyph-relay";

const GlyphRelayScene = () => (
  <GlyphRelay line1={["Building a", "product"]} line2={["is", "easy."]} line3="Launching it?" />
);

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

A phrase is handed off glyph by glyph between lines until a giant question mark resolves into the final line. Pass `line1`, `line2` (each a pair of text parts) and `line3`; it ships light and dark, over a gradient ground you can change with `ground`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `line1` | `[string, string]` | `["Building a", "product"]` | First line as a pair of text parts. |
| `line2` | `[string, string]` | `["is", "easy."]` | Second line as a pair of text parts. |
| `line3` | `string` | `"Launching it?"` | Final line the question mark resolves into. |
| `ground` | `GshPresetId` | — | Gradient preset used for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient preset parameters. |

## Use when
- A setup-and-twist story beat where a phrase hands off between lines and ends on a giant question mark.
- A rhetorical question that resolves into the product pitch.

## Don't use when
- You only need a simple question and answer swap — use `hook-uncurl`.
- You want a straight sequence of lines — use `slide-doors`.