Drawer

A state atom whose appearance (closed, opened) is a pure function of the state prop. Pass a state directly or drive it from the Remotion timeline via useCurrentState. The component reads no frame — only the state value you give it. The wrapper is transparent by design: Drawer is a modal layer meant to compose over another scene, so it does not paint an opaque background. The panel is anchored to the bottom edge and slides up into view: it has rounded top corners, a drag-handle pill at the top, and no close (X) button — the handle stands in for the dismiss affordance.

Installation

$ pnpm dlx shadcn@latest add @remocn/drawer

States

DrawerState is:

type DrawerState =
  | "opened"  // backdrop dims to 50% black, panel slides up from the bottom edge and fades in
  | "closed"  // panel hidden off-screen below the bottom edge, backdrop clear (overlay opacity 0, panel opacity 0)

opened reveals the backdrop dim (scales up to MAX_OVERLAY_ALPHA = 0.5) and slides the panel up from off-screen — its panelTranslateY animates from DRAWER_HEIGHT (= 320, fully below the bottom edge) to 0 (resting) while fading in. closed hides the backdrop and parks the panel below the bottom edge.

Snap usage

Pass state directly — the component snaps instantly to that visual. Useful for static previews or when you drive state from your own logic:

import { Drawer } from "@/components/remocn/drawer";

export const Scene = () => <Drawer state="opened" />;

To drive state from the timeline, use useCurrentState:

import { useCurrentState } from "@/lib/remocn-ui";
import { Drawer } from "@/components/remocn/drawer";

export const Scene = () => {
  const state = useCurrentState(
    [
      { at: 32, state: "opened" },
      { at: 92, state: "closed" },
    ],
    "closed",
  );

  return <Drawer title="Edit profile" state={state} />;
};

Each at is a Sequence-local authored frame. State persists between steps: opened at frame 32 keeps the drawer visible until closed fires at frame 92. See Concepts for the full useCurrentState API.

Smooth transitions

State changes via state snap with no cross-fade. For animated transitions, use useDrawerTransition from the copied use-drawer-transition.ts file. It reads the frame, interpolates between state presets, and returns a resolved DrawerStyle — pass it to the style prop:

import { Drawer } from "@/components/remocn/drawer";
import { useDrawerTransition } from "@/components/remocn/use-drawer-transition";

export const Scene = () => {
  const style = useDrawerTransition([
    { at: 32, state: "opened", duration: 16 },
    { at: 92, state: "closed", duration: 12 },
  ]);
  return <Drawer title="Edit profile" style={style} />;
};

The duration field on each step overrides the file's DEFAULT_DURATION (= 12) for that specific transition. To globally tune timing and easing, edit use-drawer-transition.ts directly in your project — that file is yours (shadcn "own your code" philosophy).

style takes precedence over state when both are provided.

Props