# Fluted Glass
URL: https://remocn.dev/docs/graphic-looks/fluted-glass

Fluted glass refracts a gradient orb and its headline, then slides away to bring them into focus

- Install: `npx shadcn@latest add @remocn/fluted-glass`
- Vibe: premium
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fluted-glass
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlutedGlass } from "@/components/remocn/fluted-glass";

const FlutedGlassScene = () => <FlutedGlass title="In focus." />;

export const RemotionRoot = () => (
  <Composition
    id="FlutedGlass"
    component={FlutedGlassScene}
    durationInFrames={145}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A sheet of vertical glass flutes covers the frame, refracting an orb and the `title` into stretched slivers while the backdrop drifts. The sheet then slides off to the right, leaving the sharp orb and headline. Pass a short `title`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"In focus."` | Headline shown beside the orb. |
| `accent` | `string` | `"#3B5BFD"` | Color tint on the orb rim. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A premium headline reveal that starts distorted and resolves to a sharp, clean title.
- A brand moment with a gradient orb and one short phrase, such as "In focus.".
- A transition-like beat that hides a title behind textured glass before showing it.

## Don't use when
- The reveal should be a frosted panel clearing around a stat — use `frosted-clear`.
- You want a lens that magnifies part of the frame — use `glass-lens`.
- A simple blur-to-sharp text entrance is enough — use `focus-blur-resolve`.