# Bounce Logo
URL: https://remocn.dev/docs/logo-stings/bounce-logo

The wordmark bounces around the frame like an old DVD logo until it hits the corner and resolves.

- Install: `npx shadcn@latest add @remocn/bounce-logo`
- Vibe: playful
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bounce-logo
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BounceLogo } from "@/components/remocn/bounce-logo";

const BounceLogoScene = () => (
  <BounceLogo
    brand="remocn"
    line="Hit the corner."
    accent="#3B5BFD"
  />
);

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

The wordmark bounces off the frame edges on a path solved backwards so the final hit always lands in a corner, where it blooms, glides to the centre as the lockup and `line` rises beneath. Pass `brand` and `line`. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `brand` | `string` | `"remocn"` | Wordmark that bounces; Remocn renders the real logo. |
| `line` | `string` | `"Hit the corner."` | Line under the final lockup; empty hides it. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A playful, meme-aware sting for a casual product or community video.
- A tongue-in-cheek brand moment that ends on a clean lockup and a line.
- A longer sting that rewards the viewer when the logo hits the corner.

## Don't use when
- You need a serious, premium reveal — use `first-light`.
- The playful beat is a banner and stat, not a logo — use `play-of-the-game`.
- You want a short click instead of a long bounce — use `snap-click`.