Turns one image into an animated landing page where a looping clip of the subject is redrawn live as ASCII, braille, halftone or pixel glyphs by a WebGL shader; the cursor splits photo from glyphs.
By Wu Chenmu @wcm Oct 5, 2026
# Glyph landing page One subject → one page. The subject loops (a Kling clip pinned so its last frame is its first); the shader draws it as glyphs over an animated backdrop. On the page: - **Hero:** cursor X splits *photo ← | → glyphs*; cursor Y sets the grid size; a ring and crosshair follow the cursor. The title — one word split in two — is drawn by the shader as the inverse of a blurred backdrop. Dense line art, some of it tracking the subject. - **Sections:** manifesto (a true fact with a turn), marquee, four specs, a closing CTA over the subject again. Scrolling dissolves the grid into big pixels and back. - **Series:** several pages share one engine and a page switcher; each page gets its own palette, background effect, glyph renderer, fonts, line art and copy. `assets/examples/pages/` holds five complete pages that show the range (astronaut on a night sky, a poppy on paper, the 1984 Mac as a blueprint, a cloud with halftone and isobars, jellyfish in neon braille). Read one or two before writing a page; never copy one wholesale — each page is designed fresh for its subject.
From Wu Chenmu's repo, under the MIT license.
Position Parameter Third argument (or position property in vars) controls placement: Absolute: 1 — start at 1 second. R…
Scope Apply only to a globe-like 3D particle visualization. Do not change full page layout, copy, or unrelated motion s…
A black landing-page hero with a rotatable 3D glass cuboid that refracts a huge background headline with chromatic disp…
Build 5 completely different scroll-based sections, decide the context & layout yourself.