Glyph Relay

"Building a product" hands off between lines until a giant question mark resolves into "Launching it?"

Installation

$ pnpm dlx shadcn@latest add @remocn/glyph-relay

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GlyphRelay } from "@/components/remocn/glyph-relay";
 
const GlyphRelayScene = () => (
  <GlyphRelay line1={["Building a", "product"]} line2={["is", "easy."]} line3="Launching it?" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GlyphRelay"
    component={GlyphRelayScene}
    durationInFrames={146}
    fps={30}
    width={1280}
    height={720}
  />
);

A phrase is handed off glyph by glyph between lines until a giant question mark resolves into the final line. Pass line1, line2 (each a pair of text parts) and line3; it ships light and dark, over a gradient ground you can change with ground.

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

Props7

Prop	Type	Default
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
accent	string"#3B5BFD" Accent colour (any CSS colour).
line1	[string, string]["Building a", "product"] First line as a pair of text parts.
line2	[string, string]["is", "easy."] Second line as a pair of text parts.
line3	string"Launching it?" Final line the question mark resolves into.
ground	GshPresetId— Gradient preset used for the backdrop.
groundParams	Partial<GradientParams>— Overrides for the gradient preset parameters.

theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
line1[string, string]
First line as a pair of text parts.
Default["Building a", "product"]
line2[string, string]
Second line as a pair of text parts.
Default["is", "easy."]
line3string
Final line the question mark resolves into.
Default"Launching it?"
groundGshPresetId
Gradient preset used for the backdrop.
groundParamsPartial<GradientParams>
Overrides for the gradient preset parameters.