Photo Halo

A headline pops up among scattered photos, which gather into a halo of thumbnails beside the logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/photo-halo

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PhotoHalo } from "@/components/remocn/photo-halo";
 
const PhotoHaloScene = () => (
  <PhotoHalo
    words={["Launch", "films", "for", "everything", "you", "ship"]}
    accentWord={3}
    images={["https://example.com/a.jpg", "https://example.com/b.jpg"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PhotoHalo"
    component={PhotoHaloScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);

A line of words appears while photo cards pop around it, then the text drops away and the photos converge into a row of circular thumbnails with the logo landing beside them. Pass words, accentWord for the highlighted word, and images as URLs (the default photos only exist in the Remocn repo). 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.

Props9

Prop	Type	Default
words	string[]DEFAULT_WORDS Headline words shown before the photos converge.
accentWord	number3 Index of the word drawn in the accent colour.
images	string[]— Photo URLs; falls back to Remocn's demo photos when empty.
theme	"dark" \| "light""dark" Dark or light palette and ground.
background	string— Stage fill colour; overrides the theme background.
ink	string— Headline text colour.
blooms	string[]— Colours for the shader ground's light blooms.
ground	GshPresetId— Shader preset id for the gradients.sh background ground.
groundParams	Partial<GradientParams>— Custom shader parameters for the ground, used instead of the theme default.

wordsstring[]
Headline words shown before the photos converge.
DefaultDEFAULT_WORDS
accentWordnumber
Index of the word drawn in the accent colour.
Default3
imagesstring[]
Photo URLs; falls back to Remocn's demo photos when empty.
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
backgroundstring
Stage fill colour; overrides the theme background.
inkstring
Headline text colour.
bloomsstring[]
Colours for the shader ground's light blooms.
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.