Glyph reveal

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   Nothing hides the picture before the script runs: without JavaScript it is simply there. The glyphs are set in the family named by --glyph-reveal-font, Geist Mono here; give the property another mono family the page loads to change it.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-glyph-reveal	Marks a picture that arrives as glyphs. It takes no value: leave the value field empty. It goes on the Image itself; on a box instead, the script takes the first image inside it. The script lays a canvas over the picture, and the image stays in the page.
   data-glyph-reveal-state	Written by the engine on the picture: waiting while it is covered and out of view, glyphs while the glyph picture prints or stands, sweeping while the front crosses, done at rest, static under reduced motion. Never written by hand. [ Optional ]
   data-glyph-reveal-layer	Written by the engine on the canvas it lays over the picture, which the stylesheet finds by this attribute. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-glyph-reveal-color	#15100c	Colour of the glyphs, and of the inverted band at the front. Options: any plain CSS colour. Lighter than background, the picture is set the other way round, light parts in heavy glyphs, so it never reads as a negative.
   data-glyph-reveal-background	#f4ece0	Ground of the glyph stage, what covers the picture until a cell turns. Options: any plain CSS colour, usually the colour of the page behind the picture, so the glyphs seem printed on the page itself.
   data-glyph-reveal-glyphs	.:-=+*#%@	The characters the picture is set in, in any order: the script draws each one and sorts them by the ink they lay down. The space is always there, as the cell with no ink. Options: any string of characters, for instance 01, /-+ or .oO0. Few glyphs give a hard, posterised picture; many give finer shades.
   data-glyph-reveal-cell	12	Side of one glyph cell, kept in px so the grain is the same on every screen.
   data-glyph-reveal-hold	0.9	Time from the first glyph to the moment the front leaves, in seconds; the glyphs take 0.45 s of it to print themselves in.
   data-glyph-reveal-duration	1.4	Time the front takes to cross the picture, in seconds, eased at both ends.
   data-glyph-reveal-shuffle	0.5	How restless the standing glyphs are, 0 to 1: how often a glyph steps one notch up or down its ramp and back.
   data-glyph-reveal-direction	right	Way the front travels. Options: right, left, down, up, or center, which opens from the middle outwards.
   data-glyph-reveal-trigger	scroll	What plays the reveal. Options: scroll plays it once as the picture comes into view. hover leaves the picture as glyphs, crosses it while the pointer is on it and goes back when it leaves; on a touch screen it plays as scroll.
   data-glyph-reveal-replay	0	Whether the reveal plays again each time the picture comes back into view, 0 or 1. Read on scroll only.

Two files and their pictures (3), no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call GlyphReveal.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-glyph-reveal-color	#15100c	Colour of the glyphs, and of the inverted band at the front. Options: any plain CSS colour. Lighter than background, the picture is set the other way round, light parts in heavy glyphs, so it never reads as a negative.
   data-glyph-reveal-background	#f4ece0	Ground of the glyph stage, what covers the picture until a cell turns. Options: any plain CSS colour, usually the colour of the page behind the picture, so the glyphs seem printed on the page itself.
   data-glyph-reveal-glyphs	.:-=+*#%@	The characters the picture is set in, in any order: the script draws each one and sorts them by the ink they lay down. The space is always there, as the cell with no ink. Options: any string of characters, for instance 01, /-+ or .oO0. Few glyphs give a hard, posterised picture; many give finer shades.
   data-glyph-reveal-cell	12	Side of one glyph cell, kept in px so the grain is the same on every screen.	A fine picture, easier to read, more cells to draw	Chunky characters, a picture that only reads from afar
   data-glyph-reveal-hold	0.9	Time from the first glyph to the moment the front leaves, in seconds; the glyphs take 0.45 s of it to print themselves in.	Under 0.45 the front leaves while the glyphs are still printing	The glyph picture stands and stirs longer before it turns
   data-glyph-reveal-duration	1.4	Time the front takes to cross the picture, in seconds, eased at both ends.	A quick wipe	A slow crossing, the band of inverted cells easier to follow
   data-glyph-reveal-shuffle	0.5	How restless the standing glyphs are, 0 to 1: how often a glyph steps one notch up or down its ramp and back.	At 0 the glyph picture stands perfectly still	At 1 the whole picture shimmers
   data-glyph-reveal-direction	right	Way the front travels. Options: right, left, down, up, or center, which opens from the middle outwards.
   data-glyph-reveal-trigger	scroll	What plays the reveal. Options: scroll plays it once as the picture comes into view. hover leaves the picture as glyphs, crosses it while the pointer is on it and goes back when it leaves; on a touch screen it plays as scroll.
   data-glyph-reveal-replay	0	Whether the reveal plays again each time the picture comes back into view, 0 or 1. Read on scroll only.	At 0 it plays once	At 1 the picture is covered again once it has left the window whole, and plays on its way back

2. Drive it from JavaScript

   When a picture arrives after the page has loaded, when it has to play again from code, or when the page reacts to it being whole.
   JavaScript Expand Copy

   const element = document.querySelector('[data-glyph-reveal]');
   element.addEventListener('glyph-reveal:done', (e) => {
     console.log(e.detail);
   });
   
   const reveal = GlyphReveal.mount(element);   // the picture auto() mounted, or a new one
   reveal.replay();    // covered again, then played if it is in view
   reveal.sampled();   // false when the picture could not be read (another origin, no CORS)
   
   element.addEventListener('glyph-reveal:done', (event) => {
     // the picture is whole
   });
   
   // Pictures added after the page loaded: mount everything marked inside it.
   GlyphReveal.auto(container);
   
   // When the picture leaves the page:
   reveal.destroy();   // removes the canvas, the listeners and the observers

   Show all 18 lines

3. Fit it to your page

   • One attribute, on the picture itself. Put data-glyph-reveal on the <img>; it takes no value. On a box instead, the script takes the first <img> inside it. In Webflow, select the Image, open the Settings panel and add the custom attribute data-glyph-reveal with an empty value.
   • **The <img> stays the picture.** The script adds one canvas right after it, data-glyph-reveal-layer, laid over the picture's box and never taking a click. The canvas only draws glyphs; a cell that has turned is a hole through which the real <img> shows. alt, srcset, the link around the picture and the right click all keep working. On scroll the canvas is removed once the picture is whole.
   • The crop is the page's. object-fit and object-position are read, so the glyphs set the picture as it is cropped in its box. The canvas takes the picture's border-radius.
   • The typeface of the glyphs is the custom property --glyph-reveal-font on the picture or any parent, Geist Mono in the stylesheet. Any family the page loads will do; the script waits for it up to 1.5 s.
   • One setting for every picture of the page, without opening the file: declare window.GlyphRevealSettings = { color: '#ffab1a' } in a script placed before glyph-reveal.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-glyph-reveal-* attribute on the picture itself (data-glyph-reveal-direction="down"), so one picture can still differ from the page-wide setting.
   • States, on the marked element, for a style or a test: data-glyph-reveal-state is waiting (covered, not yet in view), glyphs (the glyph picture printing or standing), sweeping (the front on its way), done, or static under reduced motion.
   • Events, both bubbling, detail { element, sampled }: glyph-reveal:start when the glyphs start to print, and on hover each time the pointer comes; glyph-reveal:done each time the picture is whole. sampled is false when the glyphs could not follow the picture (see the first pitfall).
   • From JavaScript: GlyphReveal.mount(el, overrides) returns the instance, which carries element, settings, state(), sampled(), isRunning(), play(), reset() (covered again, waiting), replay(), show() (the picture at once, no motion), resize() and destroy(). GlyphReveal.auto(root) mounts every marked picture inside root, GlyphReveal.replay(root) plays them again, GlyphReveal.destroy(root) takes them all back. In React, mount in useEffect and destroy in its cleanup.
   • **destroy() leaves the picture as it was**: the canvas removed, the listeners and observers gone, the state attribute taken off, and the loading attribute put back as it was written.
   • Touch: scroll plays the same on a phone. hover needs a pointer that hovers; on a touch screen it falls back to scroll, so the picture is never left as glyphs with nothing to turn it.
   • **prefers-reduced-motion**: no canvas at all. The picture is simply there, the state reads static, and no event fires.
   • At rest nothing runs. The loop only turns while a picture is printing, stirring or sweeping, never in a hidden tab, and a picture that is done costs nothing.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own words and pictures in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • A picture from another origin needs CORS, or the glyphs are random. Reading the brightness of a picture means reading its pixels, and a browser refuses that for a picture served from another origin without Access-Control-Allow-Origin: the canvas is tainted. The engine never throws on it. It first reads the <img> as it is; refused, it asks for the picture a second time with crossOrigin="anonymous", which a host that sends CORS headers answers (the Webflow CDN does, checked on 03/10/2026); refused again, it sets a random field of glyphs that follows no brightness, and the front still turns it into the picture. The event detail.sampled and sampled() say which one played. The browser itself writes one CORS line in the console for the refused second request; that line is not an error of the script. Serving the picture from the page's own origin, or adding the header on the host, gives the real glyph picture.
   • Before the script runs, the picture shows. Nothing hides it in the stylesheet, on purpose: without JavaScript the picture is simply there. A picture at the very top of a page can therefore show for a moment before the script covers it. Load the script in the head with defer, or keep the effect for pictures below the first screen, when that flash matters.
   • The canvas is placed from the picture's box. It follows a resize of the picture and of the window. A picture that moves without changing size while it is still covered (content inserted above it inside an absolutely positioned parent, for instance) keeps its cover where it was until the next resize: call resize() on the instance after such a change.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a picture that already carries the effect returns the existing one untouched. A page-wide block goes in window.GlyphRevealSettings, which auto() reads itself, or the picture is taken back with destroy() and mounted again.
   • **The colours go to a canvas, which cannot parse color-mix()** nor a custom property. Give color and background a plain colour, a hex or an rgb().
   • A transformed parent skews the placing. The canvas is placed by comparing two boxes on screen; under a parent scaled or rotated by a transform, the offset is measured in transformed pixels. Put the attribute on a picture whose parents are not transformed while it is covered.
   • A very large picture costs its whole area once. The first print and each resize draw every cell; after that a frame only draws the cells that changed. Under 6px, cell on a full-screen picture is tens of thousands of cells.
   • An animated GIF or a video poster is read once, at the frame the browser hands over when the picture is ready.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.