# Gravity Grid
URL: https://remocn.dev/docs/logo-stings/gravity-grid

A grid bends into a gravity well as a mass falls, and the logo lands at its bottom.

- Install: `npx shadcn@latest add @remocn/gravity-grid`
- Vibe: tech
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/gravity-grid
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GravityGrid } from "@/components/remocn/gravity-grid";

const GravityGridScene = () => (
  <GravityGrid
    name="remocn"
    caption="Launch videos, in components."
    accent="#3B5BFD"
  />
);

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

A perspective grid recedes into the distance, a mass falls and bends it into a gravity well, and on impact the logo and `name` land at the bottom with `caption` beneath. Pass `name` or `logo`, and `caption`. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logo` | `React.ReactNode` | — | Replaces the Remocn logo at the bottom of the well. |
| `name` | `string` | `"remocn"` | Name set beside the logo. |
| `caption` | `string` | `"Launch videos, in components."` | Small line under the name; empty hides it. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A physics-flavoured reveal for a platform with weight and gravity as the metaphor.
- A 3D-feeling logo landing that stays a flat graphic.
- A tech launch where the logo needs a caption line beneath.

## Don't use when
- A calm, flat reveal is enough — use `first-light`.
- A dotted route should lead to the logo — use `paper-plane`.
- The logo should be built from nodes — use `neural-pulse`.