Glyph Block Decode

Blocky glyphs flicker and decode into a product name, then its URL decodes and is underlined.

Installation

$ pnpm dlx shadcn@latest add @remocn/glyph-block-decode

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GlyphBlockDecode } from "@/components/remocn/glyph-block-decode";
 
const GlyphBlockDecodeScene = () => (
  <GlyphBlockDecode
    name="Remocn Studio"
    url="remocn.dev/studio"
    images={["https://example.com/a.jpg", "https://example.com/b.jpg"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GlyphBlockDecode"
    component={GlyphBlockDecodeScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);

Blocky fragments, some filled with photos or flat colour, scramble and decode into name; the url decodes after it and a rule draws underneath. Pass name, url and, to use your own pictures, images (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.

Props11

Prop	Type	Default
name	string"Remocn Studio" Main text that decodes out of the blocks.
url	string"remocn.dev/studio" Second line that decodes after the name and is underlined.
images	string[]DEFAULT_IMAGES Photos shown inside the blocks; URLs or staticFile paths.
blockColors	string[]— Flat colours used for the non-photo blocks.
accent	string— Accent colour for the mark and highlights; any CSS colour.
ink	string— Colour of the decoded text.
theme	"dark" \| "light""dark" Dark or light palette and ground.
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.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
seed	number7 Number that changes the random block layout.

namestring
Main text that decodes out of the blocks.
Default"Remocn Studio"
urlstring
Second line that decodes after the name and is underlined.
Default"remocn.dev/studio"
imagesstring[]
Photos shown inside the blocks; URLs or staticFile paths.
DefaultDEFAULT_IMAGES
blockColorsstring[]
Flat colours used for the non-photo blocks.
accentstring
Accent colour for the mark and highlights; any CSS colour.
inkstring
Colour of the decoded text.
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
seednumber
Number that changes the random block layout.
Default7