Activity Rings

// src/Root.tsx
import { Composition } from "remotion";
import { ActivityRings } from "@/components/remocn/activity-rings";
 
const ActivityRingsScene = () => (
  <ActivityRings
    title="This quarter"
    rings={[
      { label: "Renders", value: 2400, goal: 1.2 },
      { label: "Templates", value: 64, goal: 1.1 },
      { label: "Hours saved", value: 420, unit: "h", goal: 1.05 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ActivityRings"
    component={ActivityRingsScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);