Pixel ribbon

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-ribbon	Marks the section the ribbon runs over. It takes no value: leave the value field empty. That section is what the canvas is laid over, what catches the pointer and what carries the settings. Without it on any section of the page, the embed marks the section it was pasted into.
   data-pixel-ribbon-state	Written by the engine on the section: live while the ribbon is drawn, idle at rest, still under reduced motion, held for a frozen ribbon. 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-ribbon-color	#ffab1a	Colour of the pixels of the ribbon. Options: any CSS colour; taken out of this block, --pixel-ribbon-color on the section takes over, then the amber #ffab1a.
   data-pixel-ribbon-opacity	1	Opacity of the whole ribbon, 0 to 1.
   data-pixel-ribbon-cell	6	Side of one pixel of the grid the ribbon is drawn on, in px.
   data-pixel-ribbon-size	clamp(9px, 0.82vw, 14px)	Radius of the ribbon at its head, any CSS unit; the tail is thinner.
   data-pixel-ribbon-life	0.75	How long the ribbon takes to deflate once the pointer slows, in seconds.
   data-pixel-ribbon-burst	2.2	Reach of the drops a tap throws, 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 PixelRibbon.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-ribbon-color	#ffab1a	Colour of the pixels of the ribbon. Options: any CSS colour; taken out of this block, --pixel-ribbon-color on the section takes over, then the amber #ffab1a.
   data-pixel-ribbon-opacity	1	Opacity of the whole ribbon, 0 to 1.	A faint trace over the words	A solid ribbon that hides what it crosses
   data-pixel-ribbon-cell	6	Side of one pixel of the grid the ribbon is drawn on, in px.	A fine grain, the ribbon reads as a smooth stroke; more cells to fill each frame	Chunky blocks, the pixels show plainly and the rim steps
   data-pixel-ribbon-size	clamp(9px, 0.82vw, 14px)	Radius of the ribbon at its head, any CSS unit; the tail is thinner.	A thin thread; under about one cell nothing is drawn	A fat ribbon that swallows the words it crosses
   data-pixel-ribbon-life	0.75	How long the ribbon takes to deflate once the pointer slows, in seconds.	It thins out almost at once and stays short	It stays swollen and folds back slowly
   data-pixel-ribbon-burst	2.2	Reach of the drops a tap throws, in times size.	The drops barely leave the finger	The drops fly far before the springs pull them back

2. Drive it from JavaScript

   When the section arrives after load, when a tap has to be played from code, or when the ribbon has to be taken off at once.
   JavaScript Copy

   const element = document.querySelector('[data-pixel-ribbon]');
   
   const ribbon = PixelRibbon.mount(element);   // the section auto() mounted, or a new one
   ribbon.burst(240, 180);   // drops thrown from that point of the section
   ribbon.clear();           // and the ribbon taken off at once
   
   // When the section leaves the page:
   ribbon.destroy();   // removes the canvas and the listeners

3. Fit it to your page

   • One section, one attribute. Put data-pixel-ribbon on the section the ribbon runs over. The script adds a <canvas> of its own inside it (class pixel-ribbon-layer, position: absolute; inset: 0; pointer-events: none, written inline as well as in the stylesheet, so the canvas is out of the flow before the stylesheet arrives) and switches a static section to position: relative. The canvas goes over the content, which is what makes the effect, and never takes a click: links and buttons underneath keep working.
   • The sensitive area is the section, not the window: coordinates are relative to its getBoundingClientRect(). An empty section is 0px tall and catches no pointer; give it content or a height.
   • One setting for every ribbon of the page, without opening the file: declare window.PixelRibbonSettings = { size: '18px' } in a script placed before pixel-ribbon.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-pixel-ribbon-* attribute on the section itself (data-pixel-ribbon-cell="8"), so one section can still differ from the page-wide setting. The colour has one more level: without a color anywhere, the section's --pixel-ribbon-color is read.
   • Touch: a finger drag traces the ribbon too, through touch events, and the page still scrolls under it; the ribbon is drawn in section coordinates, so it stays where the finger passed. A short tap that barely moves throws the chain out from the point as drops, the springs slack at first, then firming up and pulling the drops back in.
   • **prefers-reduced-motion**: no ribbon at all, not even a still dot. The pointer is the user's own cursor, and a mark that follows it is motion by nature. The engine listens to the setting and stops or starts with it.
   • Cost at rest is nothing: the loop only runs while pixels are on screen, sleeps once the ribbon has deflated, and stops in a hidden tab. The section carries data-pixel-ribbon-state: live while the loop runs, idle at rest, still under reduced motion, held for a frozen ribbon.
   • From JavaScript: PixelRibbon.mount(el, overrides) returns the instance, which carries element, settings (the lengths in px), resize(), burst(x, y) (the drops of a tap at a point of the section), clear(), frames() and isRunning() (rendered frames since mount, and whether the loop runs, for a test that the loop sleeps), and destroy(). destroy() takes away the canvas, every listener, the size watch and the loop, and gives back a position it had set, so the markup is as it was and mounting again starts clean. PixelRibbon.destroy(el) does the same from the element. In React, mount in useEffect and destroy in its cleanup; the double run of StrictMode then leaves one ribbon, not two.
   • freeze() holds a ribbon as a still picture: what is on screen is taken off, then the next ribbon drawn is held a tenth of a second after the pointer pauses, lying on its path instead of folding in, and the loop stops, so a held ribbon costs nothing. unfreeze() takes the held ribbon off and lets the next one live out its normal life. PixelRibbon.freeze(el) and PixelRibbon.unfreeze(el) do the same from the element. It exists so a still image of the effect can be taken, a thumbnail that has to show a ribbon at rest: a page that only wants the ribbon never calls it.
   • The words of the markup are the preview's, and they ship as they are: pasted, the page reads the way the preview did. Put the user's own content in their place whenever they want, in the page's language.
   • 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

   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a section that already carries a ribbon returns the existing one untouched. A page-wide block therefore goes in window.PixelRibbonSettings, which auto() reads itself.
   • **Content stacked above z-index: 3 covers the ribbon.** The canvas sits at z-index: 3 inside the section. Content of the section with its own stacking context higher than that (a sticky header at z-index: 10, for one) is drawn over the ribbon, which then passes under it.
   • **Mouse and pen only for pointermove.** A touch pointer is ignored there on purpose, touch going through touch events; a page that fakes pointer events for a test has to give them pointerType: 'mouse'.
   • The ribbon is not a cursor. The system cursor stays where it is; hide it yourself with cursor: none on the section if the ribbon should be the only mark, and keep it on for links.

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.