# Glyph Block Decode
URL: https://remocn.dev/docs/logo-stings/glyph-block-decode

Blocky glyphs flicker and decode into a product name, then its URL decodes and is underlined.

- Install: `npx shadcn@latest add @remocn/glyph-block-decode`
- Vibe: premium
- Natural length: 102f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glyph-block-decode
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlyphBlockDecode } from "@/components/remocn/glyph-block-decode";

const GlyphBlockDecodeScene = () => (
  <GlyphBlockDecode
    name="Remocn Studio"
    url="remocn.dev/studio"
    images={["https://example.com/a.jpg", "https://example.com/b.jpg"]}
  />
);

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

Blocky fragments, some filled with photos or flat colour, scramble and decode into `name`; the `url` decodes after it and a rule draws underneath. Pass `name`, `url` and, to use your own pictures, `images` (the default photos only exist in the Remocn repo). Ships light and dark.

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 |
|---|---|---|---|
| `name` | `string` | `"Remocn Studio"` | Main text that decodes out of the blocks. |
| `url` | `string` | `"remocn.dev/studio"` | Second line that decodes after the name and is underlined. |
| `images` | `string[]` | `DEFAULT_IMAGES` | Photos shown inside the blocks; URLs or staticFile paths. |
| `blockColors` | `string[]` | — | Flat colours used for the non-photo blocks. |
| `accent` | `string` | — | Accent colour for the mark and highlights; any CSS colour. |
| `ink` | `string` | — | Colour of the decoded text. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `ground` | `GshPresetId` | — | Shader preset id for the gradients.sh background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Custom shader parameters for the ground, used instead of the theme default. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `seed` | `number` | `7` | Number that changes the random block layout. |

## Use when
- A name reveal for a studio or product with a URL the viewer should remember.
- A tech-forward intro where text decodes out of colourful blocks and photos.
- A title card that must end on a clean underlined URL.

## Don't use when
- You want plain letters spelling out with no glitch — use `spell-out`.
- The reveal should be the actual logo, not typed text — use `title-converge`.
- You need many words cutting in at a fast rhythm — use `blink-cut`.