Video Watch Page

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	number1 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

titlestring
Video title
Default"Introducing remocn 2.0"
channelPartial<WatchChannel>
Channel name, subscriber count and optional color
statsPartial<WatchStats>
Count-up ranges for likes, views and comments
srcstring
Poster image shown in the player
childrenReact.ReactNode
Custom player content, 836 by 470; overrides src
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters