Gravity Grid

A grid bends into a gravity well as a mass falls, and the logo lands at its bottom.

Installation

$ pnpm dlx shadcn@latest add @remocn/gravity-grid

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GravityGrid } from "@/components/remocn/gravity-grid";
 
const GravityGridScene = () => (
  <GravityGrid
    name="remocn"
    caption="Launch videos, in components."
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GravityGrid"
    component={GravityGridScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

A perspective grid recedes into the distance, a mass falls and bends it into a gravity well, and on impact the logo and name land at the bottom with caption beneath. Pass name or logo, and caption. Ships light and dark.

Props6

Prop	Type	Default
logo	React.ReactNode— Replaces the Remocn logo at the bottom of the well.
name	string"remocn" Name set beside the logo.
caption	string"Launch videos, in components." Small line under the name; empty hides it.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

logoReact.ReactNode
Replaces the Remocn logo at the bottom of the well.
namestring
Name set beside the logo.
Default"remocn"
captionstring
Small line under the name; empty hides it.
Default"Launch videos, in components."
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"