Bug Dock

"Playing on every screen you ship." with a small broadcast logo bug docking at the bottom

Installation

$ pnpm dlx shadcn@latest add @remocn/bug-dock

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BugDock } from "@/components/remocn/bug-dock";
 
const BugDockScene = () => <BugDock name="remocn" headline="Playing on every screen you ship." highlight="every screen" />;
 
export const RemotionRoot = () => (
  <Composition
    id="BugDock"
    component={BugDockScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A large logo-and-name lockup fades in, its letters tuck away until only the mark remains, and the mark docks to the bottom corner like a broadcast bug while the headline appears with one phrase highlighted. Pass name ("remocn" uses the real logo), headline and highlight.

Props7

Prop	Type	Default
name	string"remocn" Brand name; "remocn" renders the real logo, anything else a wordmark.
headline	string"Playing on every screen you ship." Headline text shown after the brand docks.
highlight	string"every screen" Phrase in the headline set in the accent color.
accent	string— Color for the highlighted phrase; defaults to the theme accent.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
speed	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

namestring
Brand name; "remocn" renders the real logo, anything else a wordmark.
Default"remocn"
headlinestring
Headline text shown after the brand docks.
Default"Playing on every screen you ship."
highlightstring
Phrase in the headline set in the accent color.
Default"every screen"
accentstring
Color for the highlighted phrase; defaults to the theme accent.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"