Word Gap Media

A video tile slots into the gap between "Launch all" and "of this"

Installation

$ pnpm dlx shadcn@latest add @remocn/word-gap-media

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WordGapMedia } from "@/components/remocn/word-gap-media";
 
const WordGapMediaScene = () => (
  <WordGapMedia before="Launch all" after="of this" images={["/shots/hero.jpg", "/shots/gallery.jpg"]} aspects={[0.8, 1.36]} captions={["Hero", "Gallery"]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WordGapMedia"
    component={WordGapMediaScene}
    durationInFrames={168}
    fps={30}
    width={1280}
    height={720}
  />
);

A sentence is split around a gap and a media tile opens inside it, cycling through your images with progress bars and captions. By default it uses staticFile images that only exist in the Remocn repo, so pass your own images (public paths or full URLs). It ships light and dark.

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

Props11

Prop	Type	Default
before	string"Launch all" Text before the gap.
after	string"of this" Text after the gap.
images	string[]DEFAULT_IMAGES Image paths or URLs cycled through the tile.
aspects	number[]DEFAULT_ASPECTS Aspect ratio (width over height) for each image.
captions	string[]DEFAULT_CAPTIONS Label shown for each image.
accent	string— Accent colour (any CSS colour).
ink	string— Text colour (any CSS colour).
background	string— Overrides the theme background colour.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
ground	GshPresetId— Gradient preset used for the backdrop.
groundParams	Partial<GradientParams>— Overrides for the gradient preset parameters.

beforestring
Text before the gap.
Default"Launch all"
afterstring
Text after the gap.
Default"of this"
imagesstring[]
Image paths or URLs cycled through the tile.
DefaultDEFAULT_IMAGES
aspectsnumber[]
Aspect ratio (width over height) for each image.
DefaultDEFAULT_ASPECTS
captionsstring[]
Label shown for each image.
DefaultDEFAULT_CAPTIONS
accentstring
Accent colour (any CSS colour).
inkstring
Text colour (any CSS colour).
backgroundstring
Overrides the theme background colour.
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
groundGshPresetId
Gradient preset used for the backdrop.
groundParamsPartial<GradientParams>
Overrides for the gradient preset parameters.