Live Activity

$ pnpm dlx shadcn@latest add @remocn/live-activity

Usage

// src/Root.tsx
import { Composition } from "remotion";
import {
  LIVE_ACTIVITY_DELIVERY,
  LiveActivity,
} from "@/components/remocn/live-activity";
 
const LiveActivityScene = () => (
  <LiveActivity status={LIVE_ACTIVITY_DELIVERY} date="Tuesday, October 24" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LiveActivity"
    component={LiveActivityScene}
    durationInFrames={285}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone's island blooms into a compact pill, expands into a card with a countdown and a three-step progress bar, then collapses; the lock screen is pulled down where the activity completes with a check and a done line. Pass a status object (title, details, steps, seconds, format, glyph) to retell your own flow, or use the exported LIVE_ACTIVITY_RENDER and LIVE_ACTIVITY_DELIVERY presets. Ships dark by default and light.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.