Frosted Glass Wipe

A transition primitive that slides a pane of frosted glass across the screen between two scenes. The outgoing scene blurs beneath the glass; once the pane crosses the midpoint, the incoming scene is revealed in its place. Uses backdrop-filter for the glass and transform: translateX for movement so the browser stays on the compositor.

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.

Notes

Give the glass physical properties

The pane uses thin 1px white borders on its left and right edges so light catches as it slides over darker scenes. Keep the blur radius high enough (16-32px) for the glass to feel substantial rather than like a flat tint.