A slowly tumbling extruded glyph, raymarched and then re-rendered as vertical ASCII-style bars whose width tracks brightness — with a headline in front.
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.
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.
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.
Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.
A raymarched slab, dithered into vertical bars.