Kill Feed

A kill-feed of eliminations builds to a big gradient 'PENTA SHIP' banner

Installation

$ pnpm dlx shadcn@latest add @remocn/kill-feed

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { KillFeed } from "@/components/remocn/kill-feed";
 
const KillFeedScene = () => (
  <KillFeed kills={["Manual keyframes", "Render queue", "Stock templates"]} banner="Triple ship" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="KillFeed"
    component={KillFeedScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

Elimination lines drop into a game-style feed one by one with streak callouts, and the last kill fires a gradient banner with a caption. Pass kills, callouts, banner and caption; it ships light and dark.

Props7

Prop	Type	Default
kills	string[]— One feed line per elimination, in order. Remocn is always the one getting the kill.
callouts	string[]— The streak callout after each kill, bottom left. The last kill fires the banner instead.
banner	string"Penta ship" The multi-kill banner that slams across the middle after the last kill.
caption	string"5 / 5 eliminated" Small line under the banner, next to the logo.
accent	string"#3B5BFD" Small markers: the streak tick and the caption rule.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
speed	number1 Playback multiplier; above 1 plays faster.

killsstring[]
One feed line per elimination, in order. Remocn is always the one getting the kill.
calloutsstring[]
The streak callout after each kill, bottom left. The last kill fires the banner instead.
bannerstring
The multi-kill banner that slams across the middle after the last kill.
Default"Penta ship"
captionstring
Small line under the banner, next to the logo.
Default"5 / 5 eliminated"
accentstring
Small markers: the streak tick and the caption rule.
Default"#3B5BFD"
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
speednumber
Playback multiplier; above 1 plays faster.
Default1