# Video Watch Page
URL: https://remocn.dev/docs/product-scenes/video-watch-page

A video watch page where the cursor subscribes and likes while view, like and subscriber counts climb.

- Install: `npx shadcn@latest add @remocn/video-watch-page`
- Vibe: social
- Natural length: 190f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/video-watch-page
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { VideoWatchPage } from "@/components/remocn/video-watch-page";

const VideoWatchPageScene = () => (
  <VideoWatchPage
    title="Introducing Acme 2.0"
    channel={{ name: "Acme", subscribers: 48200 }}
  />
);

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

A watch page shows the player with a title, channel and stat row; the cursor hovers the player, clicks Subscribe and then Like while the subscriber, like, view and comment counts count up. Pass `title`, `channel` (name, subscribers), `stats` (from and to values) and a poster `src`, or `children` for custom player content laid out at 836 by 470. 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 |
|---|---|---|---|
| `title` | `string` | `"Introducing remocn 2.0"` | Video title |
| `channel` | `Partial<WatchChannel>` | — | Channel name, subscriber count and optional color |
| `stats` | `Partial<WatchStats>` | — | Count-up ranges for likes, views and comments |
| `src` | `string` | — | Poster image shown in the player |
| `children` | `React.ReactNode` | — | Custom player content, 836 by 470; overrides src |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A video platform or creator-tool launch where social proof (views, likes, subscribers) is the payoff.
- A beat showing engagement growing from a normal number to a viral one.
- A scene that frames your own video as the featured content via `src` or `children`.

## Don't use when
- You want a vertical reels feed with a double-tap heart — use `reels-feed`.
- You want a live call with participants — use `video-call`.
- You want to show editing rather than watching — use `timeline-editor`.