# Frosted Clear
URL: https://remocn.dev/docs/graphic-looks/frosted-clear

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

- Install: `npx shadcn@latest add @remocn/frosted-clear`
- Vibe: premium
- Natural length: 100f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- Revealing one headline number ("10x") with a short label after building suspense behind frosted glass.
- A premium stat beat that needs a glass surface and a subtle edge highlight.
- A feature announcement that starts unreadable and resolves into a clear message.

## Don't use when
- The reveal should use ribbed glass that slides away — use `fluted-glass`.
- You need several stats in a row — use `stat-sequence`.
- You want a plain big number with a small caption — use `compact-stat`.