Noise Forge Sting

A seam of light forges the wordmark out of hot noise, then it cools beneath a tagline.

Installation

$ pnpm dlx shadcn@latest add @remocn/noise-forge-sting

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NoiseForgeSting } from "@/components/remocn/noise-forge-sting";
 
const NoiseForgeStingScene = () => (
  <NoiseForgeSting
    tagline="Launch videos, built from parts."
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NoiseForgeSting"
    component={NoiseForgeStingScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

A spark opens a seam of light, glyph slices forge the wordmark in a hot colour, then it cools to the ink colour and the tagline fades in word by word. Pass tagline; recolour with hot, ink and accent. The wordmark is the baked-in Remocn logo. 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.

Props7

Prop	Type	Default
theme	"dark" \| "light""dark" Dark or light palette and ground.
accent	string— Colour the R mark settles into once cooled.
ink	string— Colour the letters settle into once cooled.
hot	string— Glowing colour of the wordmark while it forges.
tagline	string"Launch videos, built from parts." Line that fades in word by word under the logo.
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.

theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
accentstring
Colour the R mark settles into once cooled.
inkstring
Colour the letters settle into once cooled.
hotstring
Glowing colour of the wordmark while it forges.
taglinestring
Line that fades in word by word under the logo.
Default"Launch videos, built from parts."
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.