Spatial Push · remocn

A transition primitive with weight. Scene A shrinks, dims, and rounds its corners as if being pushed into the background, while Scene B drops in via a spring with overshoot, carrying a heavy directional drop shadow. The result feels kinetic — as if the incoming scene has real mass pressing against the outgoing one.

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.

Notes

Spring overshoot creates mass

The incoming scene uses a spring with mass: 1.2 and moderate damping so it overshoots its final position by a hair before settling. That tiny bounce — combined with the directional drop shadow — is what sells the illusion of physical weight pressing into the frame.