Tile Snake Loader

Media tiles snake across a loader and settle into a studio landing page with a hero video card.

Installation

$ pnpm dlx shadcn@latest add @remocn/tile-snake-loader

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TileSnakeLoader } from "@/components/remocn/tile-snake-loader";
 
const TileSnakeLoaderScene = () => (
  <TileSnakeLoader
    name="Lumen Studio"
    url="lumen.studio"
    headline={"Launch films,\ncut in minutes."}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TileSnakeLoader"
    component={TileSnakeLoaderScene}
    durationInFrames={178}
    fps={30}
    width={1280}
    height={720}
  />
);

A product name builds letter by letter on a loader while media tiles snake across and a percentage fills. The tiles retract, a skeleton grows, and the window settles into a landing page with a headline, sub line and a hero video card. Pass name, product, headline (use a newline for a line break), sub and url. The default images are files that only exist in the Remocn repo, so pass your own image URLs. Ships dark by default and light.

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
theme	"dark" \| "light""dark" Light or dark palette
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
name	string"Lumen Studio" Name typed out on the loader
label	string"Initializing" Small loader label, e.g. 'Initializing'
images	string[]DEFAULT_IMAGES Image URLs for the tiles; defaults exist only in the Remocn repo
product	string"Lumen Studio" Product name on the landing page
url	string"lumen.studio" Address shown in the landing page chrome
headline	string"Launch films,\ncut in minutes." Landing headline; use a newline for a line break
sub	string"Drop your screens in. Ship the film by Friday." Sub line under the headline
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

theme"dark" | "light"
Light or dark palette
Default"dark"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
namestring
Name typed out on the loader
Default"Lumen Studio"
labelstring
Small loader label, e.g. 'Initializing'
Default"Initializing"
imagesstring[]
Image URLs for the tiles; defaults exist only in the Remocn repo
DefaultDEFAULT_IMAGES
productstring
Product name on the landing page
Default"Lumen Studio"
urlstring
Address shown in the landing page chrome
Default"lumen.studio"
headlinestring
Landing headline; use a newline for a line break
Default"Launch films,\ncut in minutes."
substring
Sub line under the headline
Default"Drop your screens in. Ship the film by Friday."
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters