Spatial Push · remocn

Installation

$ pnpm dlx shadcn@latest add @remocn/spatial-push

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { SpatialPush } from "@/components/remocn/spatial-push";

const SpatialPushScene = () => (
  <SpatialPush
    from={<SceneA />
);

export const RemotionRoot = () => (
  <Composition
    id="SpatialPush"
    component={SpatialPushScene}
    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.
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Direction the incoming scene enters from
`transitionStart`	`number`	`durationInFrames * 0.4`	Frame at which the push begins
`transitionDuration`	`number`	`30`	Easing window for Scene A's retreat, in frames
`className`	`string`	—	Optional className for the outer container