Toast Notification

A micro-interaction primitive that drives a toast through three phases — spring()-based enter (translateY + opacity), a hold, and an interpolate-based exit. Position is anchored to the bottom-right of the frame and the variant controls the icon and accent.

Installation

$ pnpm dlx shadcn@latest add @remocn/toast-notification

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ToastNotification } from "@/components/remocn/toast-notification";

const ToastNotificationScene = () => (
  <ToastNotification
    title="Deployment successful"
    message="Your changes are live at remocn.dev"
    variant="success"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ToastNotification"
    component={ToastNotificationScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`title`	`string`	`"Deployment successful"`	Bold headline shown at the top of the toast.
`message`	`string`	`"Your changes are live at remocn.dev"`	Secondary message shown below the title.
`variant`	`"success" \| "error" \| "info" \| "warning"`	`"success"`	Controls the inline icon and accent color.
`background`	`string`	`"#fafafa"`	Frame background color.
`cardColor`	`string`	`"white"`	Toast card background color.
`textColor`	`string`	`"#171717"`	Color of the toast title.
`mutedColor`	`string`	`"#71717a"`	Color of the toast message.
`className`	`string`	—	Optional className passed to the toast card.

Notes

Phase timing is derived from durationInFrames

The toast reserves 15 frames for enter and 15 frames for exit, with the rest of the composition serving as the hold phase. Increase durationInFrames if you want the toast to linger longer.

Anchored absolutely

The toast is positioned with position: absolute at right: 32, bottom: 32. Make sure the parent composition fills the frame so it lands where you expect.