Dialog

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: Dialog is a modal layer meant to compose over another scene, so it does not paint an opaque background. Unlike AlertDialog, Dialog is a generic (non-destructive) modal — its primary action uses the theme primary color, and it renders a close (X) button in the top-right corner of the popup card.

Installation

$ pnpm dlx shadcn@latest add @remocn/dialog

States

DialogState is:

type DialogState =
  | "opened"  // backdrop dims to 50% black, popup fades in and zooms from 0.95 → 1
  | "closed"  // panel hidden, backdrop clear (overlay opacity 0, popup opacity 0, scale 0.95)

opened reveals the backdrop dim (scales up to MAX_OVERLAY_ALPHA = 0.5) and fades the popup card in while zooming it from 0.95 to 1 and lifting it 8 px upward. closed hides the backdrop and the popup entirely.

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 { Dialog } from "@/components/remocn/dialog";

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

To drive state from the timeline, use useCurrentState:

import { useCurrentState } from "@/lib/remocn-ui";
import { Dialog } from "@/components/remocn/dialog";

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

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

Each at is a Sequence-local authored frame. State persists between steps: opened at frame 32 keeps the dialog 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 useDialogTransition from the copied use-dialog-transition.ts file. It reads the frame, interpolates between state presets, and returns a resolved DialogStyle — pass it to the style prop:

import { Dialog } from "@/components/remocn/dialog";
import { useDialogTransition } from "@/components/remocn/use-dialog-transition";

export const Scene = () => {
  const style = useDialogTransition([
    { at: 32, state: "opened", duration: 16 },
    { at: 92, state: "closed", duration: 12 },
  ]);
  return <Dialog 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-dialog-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