Press Warp Dive

A send button is pressed, the frame pinches into it and dives through an orb into the result screen

Installation

$ pnpm dlx shadcn@latest add @remocn/press-warp-dive

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PressWarpDiveDemo } from "@/components/remocn/press-warp-dive";
 
const PressWarpDiveDemoScene = () => (
  <PressWarpDiveDemo
    prompt="A 30-second teaser for our new editor"
    headingB="Your teaser is ready"
    title="Editor teaser, v1"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PressWarpDiveDemo"
    component={PressWarpDiveDemoScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A is a prompt composer: a suggestion appears, the prompt types, and a cursor presses send. The press pinches the frame, an orb grows from the button, and the camera dives through it into scene B, a result screen with a heading, your image and a title. Pass heading, prompt, headingB and title for the copy and image for your own picture; it ships light and dark, and the transition itself is also exported as pressWarpDive() for a 30-frame linearTiming in your own TransitionSeries.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for both scenes
accent	string— Accent color; defaults to the theme accent
heading	string"What are we launching?" Headline above the prompt box in scene A
prompt	string"A 30-second launch film for our new editor" Text typed into the prompt box before the press
headingB	string"Your film is ready" Headline of the result scene
title	string"Launch film, v2" Title of the generated result in scene B
image	stringstaticFile("reel/reel-5.jpg") Image src for the result card; the default exists only in the Remocn repo
ground	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundParams	Partial<GradientParams>— Overrides for the scene A shader parameters
groundB	GshPresetId— Preset id for the scene B gradients.sh shader ground
groundParamsB	Partial<GradientParams>— Overrides for the scene B shader parameters
transition	PressWarpDiveProps— Overrides for the transition presentation props

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Accent color; defaults to the theme accent
headingstring
Headline above the prompt box in scene A
Default"What are we launching?"
promptstring
Text typed into the prompt box before the press
Default"A 30-second launch film for our new editor"
headingBstring
Headline of the result scene
Default"Your film is ready"
titlestring
Title of the generated result in scene B
Default"Launch film, v2"
imagestring
Image src for the result card; the default exists only in the Remocn repo
DefaultstaticFile("reel/reel-5.jpg")
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundParamsBPartial<GradientParams>
Overrides for the scene B shader parameters
transitionPressWarpDiveProps
Overrides for the transition presentation props