Frosted Clear

A frosted glass card clears outward from its center to show a large stat with a kicker

Installation

$ pnpm dlx shadcn@latest add @remocn/frosted-clear

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FrostedClear } from "@/components/remocn/frosted-clear";
 
const FrostedClearScene = () => <FrostedClear title="10×" kicker="Faster renders" />;
 
export const RemotionRoot = () => (
  <Composition
    id="FrostedClear"
    component={FrostedClearScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

A rounded frosted panel blurs a gradient scene and a big title behind it. A clear circle opens from the center of the panel with a glinting edge, the content settles and the panel border returns. Pass a short title (for example "10×") and a kicker. Ships dark and light via theme.

Props5

Prop	Type	Default
title	string"10×" Large stat or headline in the center.
kicker	string"Faster renders" Small label under the title.
accent	string"#3B5BFD" Color tint in the background ground.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
speed	number1 Playback speed multiplier for the whole timeline.

titlestring
Large stat or headline in the center.
Default"10×"
kickerstring
Small label under the title.
Default"Faster renders"
accentstring
Color tint in the background ground.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1