Changelog Bite · remocn

Seamlessly looping square card showing a before/after diff with a frosted glass wipe and a pulsing New pill

Installation

$ pnpm dlx shadcn@latest add @remocn/changelog-bite

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ChangelogBite } from "@/components/remocn/changelog-bite";

const Bite = () => (
  <ChangelogBite
    label="New"
    title="Inline diff view"
    accent="#FFB38E"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ChangelogBite"
    component={Bite}
    durationInFrames={150}
    fps={30}
    width={1080}
    height={1080}
  />
);

Props

Prop	Type	Default	Description
`label`	`string`	`"New"`	Text shown inside the pulsing pill
`title`	`string`	`"Inline diff view"`	Caption rendered above the diff stage
`oldContent`	`ReactNode`	—	Custom before content. Defaults to a simple code panel.
`newContent`	`ReactNode`	—	Custom after content. Defaults to a polished code panel.
`format`	`"square" \| "portrait"`	`"square"`	Aspect ratio of the inner card. Set the matching `compositionWidth/compositionHeight` on your <Composition>.
`background`	`string`	`"#141318"`	Stage background color
`cardBackground`	`string`	`"rgba(20, 19, 24, 0.92)"`	Card fill color
`accent`	`string`	`"#FFB38E"`	Accent color for the pill, seam, and badges
`speed`	`number`	`1`	Playback speed multiplier
`className`	`string`	—	Optional className for the outer container