--- title: "Vertical-Line Glyph Dither" description: "A slowly tumbling extruded glyph, raymarched and then re-rendered as vertical ASCII-style bars whose width tracks brightness — with a headline in front." canonical: "https://fx.statico.io/demos/coderabbit-dither" doc_version: "0.1.0" last_updated: "2026-07-27" date_modified: "2026-07-27T19:06:35-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Vertical-Line Glyph Dither A slowly tumbling extruded glyph, raymarched and then re-rendered as vertical ASCII-style bars whose width tracks brightness — with a headline in front. Seen on [CodeRabbit](https://app.coderabbit.ai/login) · credit CodeRabbit. ## How it works This is the background behind the headline on CodeRabbit's **login page**. On the real site it is a **Unicorn Studio** WebGL scene (embed `ruJTLONEQl9GIDv2uNaZ`, loaded from `assets.unicorn.studio`) rendered at `opacity: 0.10`. Its scene JSON is readable, so this is a faithful port of the **pipeline**, not a guess at the look. The scene is three layers. A flat **cut-out silhouette** is read as a signed distance field; that SDF is **extruded into a slab** (`opExtrusion`, half-thickness `0.17 × 0.5 = 0.085`) and **raymarched** while it slowly tumbles — using the captured base orientation `vec3(0.6876, 0.4381, 0.1917)`, object scale `0.396`, and a time spin at the layer's `speed: 0.44`. The lit render is then **pixelated onto a grid** (cell size `mix(0.05, 0.005, 0.678) ≈ 0.0195`, sample offset `(0.5225, 0.5120)`) and each cell's luminance — pushed through gamma `pow(3.0, 2.2) ≈ 11.21` — selects a sprite from a **"vertical_lines" glyph strip**, painted flat `#E4E4E7`. That bar-dither is the whole look: brighter cells get wider bars. Two assets can't ship as-is and are reproduced locally. **(1)** The real silhouette is CodeRabbit's own **rabbit artwork**, served as an MSDF PNG from their CDN; per this repo's rule (no external images, and don't lift another brand's art) the demo instead extrudes a **text glyph** whose SDF is built at load with a **Felzenszwalb exact distance transform** — change the `STRING` constant to extrude any mark. **(2)** Their glyph atlas is an external PNG that decodes to an exact rule (`360×40`, nine `40px` cells, each a centered bar of width `4 × index`), so it is **regenerated procedurally** here — a precise match, not an approximation. One deliberate change: the live site renders at `opacity: 0.10`, which is nearly invisible and would not survive a thumbnail; like this repo's `meshy-grid` demo it is lifted (here to `0.5`) so the shape reads standalone. All shader constants are otherwise kept as captured. The mouse-tracking uniforms in the original are all multiplied by `0.0` in the compiled shader, so the real scene is purely time-driven — reproduced faithfully as no interactivity. No CDN, fonts, or images — fully self-contained WebGL2. ## Code Copy this whole file. It is a complete, runnable HTML document — also served verbatim at . ```html Vertical-Line Glyph Dither

Vertical-Line Glyph Dither

A slowly tumbling extruded glyph, raymarched and then re-rendered as vertical ASCII-style bars whose width tracks brightness — with a headline in front.

How it works

This is the background behind the headline on CodeRabbit's login page. On the real site it is a Unicorn Studio WebGL scene (embed ruJTLONEQl9GIDv2uNaZ, loaded from assets.unicorn.studio) rendered at opacity: 0.10. Its scene JSON is readable, so this is a faithful port of the pipeline, not a guess at the look.

The scene is three layers. A flat cut-out silhouette is read as a signed distance field; that SDF is extruded into a slab (opExtrusion, half-thickness 0.17 × 0.5 = 0.085) and raymarched while it slowly tumbles — using the captured base orientation vec3(0.6876, 0.4381, 0.1917), object scale 0.396, and a time spin at the layer's speed: 0.44. The lit render is then pixelated onto a grid (cell size mix(0.05, 0.005, 0.678) ≈ 0.0195, sample offset (0.5225, 0.5120)) and each cell's luminance — pushed through gamma pow(3.0, 2.2) ≈ 11.21 — selects a sprite from a "vertical_lines" glyph strip, painted flat #E4E4E7. That bar-dither is the whole look: brighter cells get wider bars.

Two assets can't ship as-is and are reproduced locally. (1) The real silhouette is CodeRabbit's own rabbit artwork, served as an MSDF PNG from their CDN; per this repo's rule (no external images, and don't lift another brand's art) the demo instead extrudes a text glyph whose SDF is built at load with a Felzenszwalb exact distance transform — change the STRING constant to extrude any mark. (2) Their glyph atlas is an external PNG that decodes to an exact rule (360×40, nine 40px cells, each a centered bar of width 4 × index), so it is regenerated procedurally here — a precise match, not an approximation.

One deliberate change: the live site renders at opacity: 0.10, which is nearly invisible and would not survive a thumbnail; like this repo's meshy-grid demo it is lifted (here to 0.5) so the shape reads standalone. All shader constants are otherwise kept as captured. The mouse-tracking uniforms in the original are all multiplied by 0.0 in the compiled shader, so the real scene is purely time-driven — reproduced faithfully as no interactivity. No CDN, fonts, or images — fully self-contained WebGL2.

How to use this file

This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/coderabbit-dither.md. Full writeup and live preview: https://fx.statico.io/demos/coderabbit-dither.

Source and credit

Effect originally seen on CodeRabbit (https://app.coderabbit.ai/login) — credit to CodeRabbit. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

You’re one file away from shipping cooler code.

A raymarched slab, dithered into vertical bars.

no dependencies one HTML file
``` ## Source & credit Effect seen on — credit to CodeRabbit. This is an independent recreation of the effect built from scratch for educational use. No proprietary source code was copied. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups