Play of the Game

A banner slices in, the logo slams in as the player, then a stat plate flashes with a gradient highlight.

Installation

$ pnpm dlx shadcn@latest add @remocn/play-of-the-game

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PlayOfTheGame } from "@/components/remocn/play-of-the-game";
 
const PlayOfTheGameScene = () => (
  <PlayOfTheGame
    title="Play of the game"
    role="Solo builder"
    stat="Shipped in 6 hours"
    highlight="6 hours"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PlayOfTheGame"
    component={PlayOfTheGameScene}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);

A banner with title slices in over the Remocn logo, which slams in as the player with a role label beneath. Then stat flashes on its own plate with highlight filled in the accent gradient and a final sweep. The player is always the Remocn logo. Ships light and dark.

Props7

Prop	Type	Default
title	string"Play of the game" Banner call that slices in first.
role	string"Solo builder" Small role label under the player.
stat	string"Shipped in 6 hours" Highlight stat flashed on its own plate.
highlight	string"6 hours" Part of the stat filled with the gradient; must appear in stat.
accent	string"#3B5BFD" Colour of the role tick and gradient.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

titlestring
Banner call that slices in first.
Default"Play of the game"
rolestring
Small role label under the player.
Default"Solo builder"
statstring
Highlight stat flashed on its own plate.
Default"Shipped in 6 hours"
highlightstring
Part of the stat filled with the gradient; must appear in stat.
Default"6 hours"
accentstring
Colour of the role tick and gradient.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1