AI CSS Animations

Glyph Shader Landing Page

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

Type
skill
Made with
Claude Code
Built in
Canvas
Topics
Landing page · Interactive · Photos

The skill

# 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.

Similar prompts