Frosted Glass Wipe

Installation

$ pnpm dlx shadcn@latest add @remocn/frosted-glass-wipe

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { FrostedGlassWipe } from "@/components/remocn/frosted-glass-wipe";

const FrostedGlassWipeScene = () => (
  <FrostedGlassWipe
    from={<SceneA />
);

export const RemotionRoot = () => (
  <Composition
    id="FrostedGlassWipe"
    component={FrostedGlassWipeScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`from`	`ReactNode`	—	The outgoing scene. Falls back to a labeled colored panel.
`to`	`ReactNode`	—	The incoming scene. Falls back to a labeled colored panel.
`transitionStart`	`number`	`durationInFrames * 0.4`	Frame at which the wipe begins
`transitionDuration`	`number`	`30`	Length of the wipe in frames
`glassBlur`	`number`	`24`	Backdrop blur radius of the glass pane in pixels
`className`	`string`	—	Optional className for the outer container