# Tile Snake Loader
URL: https://remocn.dev/docs/product-scenes/tile-snake-loader

Media tiles snake across a loader and settle into a studio landing page with a hero video card.

- Install: `npx shadcn@latest add @remocn/tile-snake-loader`
- Vibe: tech
- Natural length: 176f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tile-snake-loader
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TileSnakeLoader } from "@/components/remocn/tile-snake-loader";

const TileSnakeLoaderScene = () => (
  <TileSnakeLoader
    name="Lumen Studio"
    url="lumen.studio"
    headline={"Launch films,\ncut in minutes."}
  />
);

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

A product name builds letter by letter on a loader while media tiles snake across and a percentage fills. The tiles retract, a skeleton grows, and the window settles into a landing page with a headline, sub line and a hero video card. Pass `name`, `product`, `headline` (use a newline for a line break), `sub` and `url`. The default `images` are files that only exist in the Remocn repo, so pass your own image URLs. Ships dark by default and light.

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"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `name` | `string` | `"Lumen Studio"` | Name typed out on the loader |
| `label` | `string` | `"Initializing"` | Small loader label, e.g. 'Initializing' |
| `images` | `string[]` | `DEFAULT_IMAGES` | Image URLs for the tiles; defaults exist only in the Remocn repo |
| `product` | `string` | `"Lumen Studio"` | Product name on the landing page |
| `url` | `string` | `"lumen.studio"` | Address shown in the landing page chrome |
| `headline` | `string` | `"Launch films,\ncut in minutes."` | Landing headline; use a newline for a line break |
| `sub` | `string` | `"Drop your screens in. Ship the film by Friday."` | Sub line under the headline |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A creative-tool or studio launch that needs a loading-into-a-polished-product reveal.
- A brand opener where media thumbnails are the identity.
- A beat that turns a loader into a landing page without a hard cut.

## Don't use when
- You want a gray wireframe that fills into the finished UI — use `wireframe-to-final`.
- You want file-by-file upload progress bars — use `file-dropzone`.
- You only need a small looping spinner — use `spinner`.