Fluted Glass

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

Installation

$ pnpm dlx 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.

Props4

Prop	Type	Default
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	number1 Playback speed multiplier for the whole timeline.

titlestring
Headline shown beside the orb.
Default"In focus."
accentstring
Color tint on the orb rim.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1