Pixel wake

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

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. Tune it

   Custom attributes
   Select the section 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-pixel-wake	Marks the section the wake runs over. It takes no value: leave the value field empty. The canvas is laid over that section and sized from it, so the section needs a height of its own. Without it on any element of the page, the embed marks the section it was pasted into.
   data-pixel-wake-state	Written by the engine on the section: live while squares are on screen, idle at rest, still under reduced motion. Never written by hand. [ Optional ]

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

   Attribute	Default	What it is
   data-pixel-wake-color	#ffab1a	Colour of the squares, their tint and their flash, the amber #ffab1a by default. Options: any plain CSS colour; taken out of this block, --pixel-wake-color on the section takes over.
   data-pixel-wake-opacity	1	Opacity of the whole trail, 0 to 1, applied over tint and flash.
   data-pixel-wake-cell	15	Side of one square, kept in px so the grain is the same on every screen.
   data-pixel-wake-size	clamp(34px, 3.2vw, 54px)	Radius of the brush, any CSS unit, before the grain breaks its rim.
   data-pixel-wake-life	0.5	How long a square stays open once the brush has left it, in seconds, each square stretching or shortening it by its own spread.
   data-pixel-wake-tint	0.09	Share of colour in an open square, 0 to 1.
   data-pixel-wake-flash	0.5	Share of colour in the flash a square carries as it turns, open or shut, 0 to 1.
   data-pixel-wake-burst	2.2	Reach of the ripple a tap leaves on touch, in times size.

Two files, 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 PixelWake.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-pixel-wake-color	#ffab1a	Colour of the squares, their tint and their flash, the amber #ffab1a by default. Options: any plain CSS colour; taken out of this block, --pixel-wake-color on the section takes over.
   data-pixel-wake-opacity	1	Opacity of the whole trail, 0 to 1, applied over tint and flash.	A ghost of a wake	At 1 the tint and the flash show at their own strength
   data-pixel-wake-cell	15	Side of one square, kept in px so the grain is the same on every screen.	A fine grain, more squares to fill	Chunky blocks, a coarser wake
   data-pixel-wake-size	clamp(34px, 3.2vw, 54px)	Radius of the brush, any CSS unit, before the grain breaks its rim.	A thin line of squares	A wide band that covers the words it passes over
   data-pixel-wake-life	0.5	How long a square stays open once the brush has left it, in seconds, each square stretching or shortening it by its own spread.	A short wake that closes right behind the pointer	A long wake that lingers across the page
   data-pixel-wake-tint	0.09	Share of colour in an open square, 0 to 1.	Past 0.05 the body of the wake all but disappears, only the flashes show	Past 0.3 the wake reads as a solid band that hides the words under it
   data-pixel-wake-flash	0.5	Share of colour in the flash a square carries as it turns, open or shut, 0 to 1.	At 0 no front, a flat pale wake	At 1 the front and the closing squares blink at full strength
   data-pixel-wake-burst	2.2	Reach of the ripple a tap leaves on touch, in times size.	A small splash under the finger	A ripple that opens most of a phone screen

2. Drive it from JavaScript

   When something other than the pointer should open squares, or when the section changes size without the window doing so.
   JavaScript Copy

   const element = document.querySelector('[data-pixel-wake]');
   
   const wake = PixelWake.mount(element);   // the section auto() mounted, or a new one
   wake.burst(200, 120);   // a ripple of squares at 200, 120 in the section
   wake.resize();          // after the section changed size on its own
   
   // When the section leaves the page:
   wake.destroy();   // removes the canvas and the listeners

3. Fit it to your page

   • Structure: one element marked data-pixel-wake, usually a section. The script adds one canvas over it, pixel-wake-layer, that never takes a click, so links and buttons under the wake keep working. Anything inside the section is yours; the effect reads no class and no child.
   • The section needs a height of its own. The canvas is sized from the section, and an empty section is 0px tall and catches no pointer. The preview's section is min-height: 100vh.
   • One setting for every section of the page, without opening the file: declare window.PixelWakeSettings = { life: 0.8 } in a script placed before pixel-wake.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-pixel-wake-* attribute on the section itself (data-pixel-wake-life="0.8"), so one section can still differ from the page-wide setting.
   • The colour can also come from the stylesheet: without a color setting in the attributes or in the settings block, the custom property --pixel-wake-color on the section is read, then DEFAULTS.color. The engine writes its own copy of DEFAULTS into the Embed, so on a Webflow page the attribute is the way to change it per section.
   • What the script writes: data-pixel-wake-state on the section, live while squares are on screen, idle at rest, still under reduced motion. Nothing else: no inline size, no class on the section.
   • **From JavaScript, beyond mount, auto and destroy**: the api carries element, settings, resize(), burst(x, y) which opens a ripple at a point of the section, clear() which takes every square away at once, frames() and isRunning(), for a test that wants to see the loop sleep at rest, and freeze() and unfreeze(), which hold the wake as a still picture, for a thumbnail. The effect emits no event.
   • **destroy() leaves the section as it was**: the canvas removed, the listeners gone, the state attribute taken off, and the inline position: relative removed if the script set it.
   • Touch: a finger drag traces the wake, through touch events, so the page still scrolls under the finger and the wake stays where the finger passed. A short touch that barely moves (under 10px and 350ms) is a tap, and opens a ripple of squares, burst times size wide, that closes square by square like the wake.
   • **prefers-reduced-motion**: no wake at all, not even a still square. The pointer is the user's own, and a mark that follows it is motion by nature. The state reads still, and turning the preference off brings the effect back without a reload.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own words 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

   • The wake is drawn over the content, not under it. The canvas sits at z-index: 3 inside the section; an element of the section with a higher z-index of its own shows over the squares. Content that must stay above the wake takes position: relative and a z-index over 3.
   • **overflow: hidden on the section is not needed**: the canvas is the size of the section and never spills. A parent that clips does not clip the wake either.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a section that already carries the effect returns the existing one. A page-wide block goes in window.PixelWakeSettings, which auto() reads itself.
   • **The colour goes to a canvas, which cannot parse color-mix().** A colour written that way paints black without a word. Give it a plain colour, a hex or an rgb().
   • **On a dark section, raise tint.** The open square is a share of the ink over whatever is under the canvas; light squares on a dark ground need a light color and usually a stronger tint. At tint 1 and flash 1 the squares are solid ink.
   • A section taller than the screen costs its whole area. The canvas is one bitmap the size of the section, at up to twice the pixel density; the loop only runs while squares are on screen, but a section of several screens holds a large bitmap all the same.

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.