Changelog Bite · remocn

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

A square (1080×1080) micro-loop built for changelog posts and social. A centered squircle card holds a before/after diff that's revealed by a frosted glass shutter sweeping left-to-right, with a pulsing "New" pill anchored top-right. The loop is gapless: the first 10 frames and the last 15 frames mirror each other (scale 0.95 → 1.0, opacity 0 → 1) so you can export straight to GIF/MP4 without a visible seam.

Pass any React node into oldContent and newContent to drop in your own before/after — the defaults render a simple code diff so the composition works out of the box.

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.

Notes

The loop is already seamless

The first 10 frames and the last 15 frames intentionally mirror each other so a flat loop never shows a seam. Don't add a separate fade-in / fade-out on top of the composition — you'll double up the envelope.

Portrait format

Setting format="portrait" only changes the inner card aspect. Your <Composition> still needs to declare compositionWidth: 1080, compositionHeight: 1350 to match.