Pixel image trail

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-trail	Marks the section the effect plays on. It takes no value: leave the value field empty.
   data-pixel-trail-images	Marks the hidden box holding the images the trail draws. Without it the engine takes every image inside the section, wherever it sits. [ Optional ]
   data-images	A comma separated list of picture addresses, read only when the section holds no img at all. With images in the markup it is ignored. [ 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-accent	#ffab1a	Flash colour carried by the pixel front. Options: any CSS colour; taken out of this block, --pixel-trail-accent on the section then the page's --accent take over.
   data-width	clamp(170px, 15vw, 300px)	Width of one card laid down along the cursor, any CSS unit.
   data-height	clamp(222px, 19.6vw, 392px)	Height of that same card, the picture being cropped to fill it.
   data-cell	18	Side of one square the image is composed from, kept in px so the grain is the same on every screen.
   data-sweep	0.35	How much the order of the squares follows a diagonal rather than chance, 0 to 1.
   data-appear	0.32	How long a card takes to compose square by square, in seconds.
   data-hold	0.6	How long the card stays whole before it breaks up, in seconds.
   data-vanish	0.46	How long the card takes to break up square by square, in seconds.
   data-front	0.06	How long a square stays lit by the accent as the front passes over it, in seconds.
   data-front-intensity	1	Strength of the accent light carried by that front, 0 to 1.
   data-flat	1	How solid the lit squares are, 0 to 1.
   data-min-distance	115	Distance the cursor travels between two cards, any CSS unit.
   data-drift	26	How far a card glides along the direction of travel while it lives, any CSS unit.
   data-max-rotation	9	Random tilt given to each card, in degrees.
   data-pool	16	Cards alive at the same time.

Two files and their pictures (7), 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 PixelTrail.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-accent	#ffab1a	Flash colour carried by the pixel front. Options: any CSS colour; taken out of this block, --pixel-trail-accent on the section then the page's --accent take over.
   data-width	clamp(170px, 15vw, 300px)	Width of one card laid down along the cursor, any CSS unit.	Small stamps, the page shows through between them	Wide cards that cover the section
   data-height	clamp(222px, 19.6vw, 392px)	Height of that same card, the picture being cropped to fill it.	Squat, letterbox cards	Tall portraits, never a squashed image
   data-cell	18	Side of one square the image is composed from, kept in px so the grain is the same on every screen.	A fine grain, many more squares to draw	Chunky blocks, cheaper to draw
   data-sweep	0.35	How much the order of the squares follows a diagonal rather than chance, 0 to 1.	The image gathers at random	A clean diagonal front crossing the card
   data-appear	0.32	How long a card takes to compose square by square, in seconds.	The picture snaps into place	A slow build-up under the cursor
   data-hold	0.6	How long the card stays whole before it breaks up, in seconds.	Under 0.4 only debris shows, the picture is never quite there	The images linger and stack up along the path
   data-vanish	0.46	How long the card takes to break up square by square, in seconds.	The card blinks out	A slow dissolve trailing behind the cursor
   data-front	0.06	How long a square stays lit by the accent as the front passes over it, in seconds.	Barely a coloured edge	A wide accent band leading the composition
   data-front-intensity	1	Strength of the accent light carried by that front, 0 to 1.	The accent is only a hint	Over 0.6 the accent hides the image under it
   data-flat	1	How solid the lit squares are, 0 to 1.	A light that fades behind the front	At 1 real squares of flat colour, which then turn into the picture
   data-min-distance	115	Distance the cursor travels between two cards, any CSS unit.	A dense trail, cards almost touching	Rare cards, far apart
   data-drift	26	How far a card glides along the direction of travel while it lives, any CSS unit.	The card stays where it was laid down	It slides away behind the cursor
   data-max-rotation	9	Random tilt given to each card, in degrees.	A tidy stack, every card upright	Cards thrown down at an angle
   data-pool	16	Cards alive at the same time.	The oldest card is recycled early and the trail stays short	A longer trail, more memory held

2. Drive it from JavaScript

   When the sources are not <img> elements, or when you want to react to what the component does.
   JavaScript Expand Copy

   const element = document.querySelector('[data-pixel-trail]');
   element.addEventListener('pixeltrail:spawn', (e) => {
     console.log(e.detail);
   });
   
   const trail = PixelTrail.mount(element);   // the section auto() mounted, or a new one
   
   // Sources that are not <img> elements: here, two canvases painted in code.
   function paint(color) {
     const canvas = document.createElement('canvas');
     canvas.width = canvas.height = 600;
     const context = canvas.getContext('2d');
     context.fillStyle = color;
     context.fillRect(0, 0, 600, 600);
     return canvas;
   }
   trail.setSources([paint('#f4ece0'), paint('#15100c')]);
   
   // When the section leaves the page:
   trail.destroy();   // removes the canvas and the listeners

   Show all 20 lines

3. Fit it to your page

   • One setting for every trail of the page, without opening the file: declare window.PixelTrailSettings = { hold: 0.8 } in a script placed before pixel-trail.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-* attribute on the element itself, so one section can still differ from the page-wide setting.
   • Dropping in your own images: put them in a container marked data-pixel-trail-images inside the element. Any size, any aspect: every source is redrawn into one card of width × height before the trail ever sees it, centred and cropped the way object-fit: cover would. Proportions are kept, never squashed, so what does not fit is cut: a 1600 × 400 banner arrives as a narrow column taken from its middle. The card is drawn at the device pixel ratio, capped at 2, so a source under width × 2 by height × 2 is upscaled and reads soft. To frame differently, change the card rather than the images: data-width and data-height on the element.
   • With no <img> in the element at all, a comma separated list of addresses in data-images on the element is loaded instead.
   • Minimal structure: a container in position: relative, which the script gives a <canvas> of its own (class pixel-trail-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). A static container is switched to relative by the script. The canvas goes over the content, and that is what makes the effect; putting it underneath gives a trail that disappears behind the headings.
   • The sensitive area is the container, not the window: coordinates are relative to its getBoundingClientRect().
   • The component drops nothing while it has no source, so loading the images cannot produce a trail full of holes.
   • Touch: it works with a finger without changing anything (pointermove covers touch), but a trail on mobile is expensive: lower pool and width/height, or only turn it on for a fine pointer (matchMedia('(pointer: fine)')).
   • **From JavaScript, beyond mount, setSources and destroy**: the api PixelTrail.mount(el, overrides) returns also carries element, settings, resize() and render() to draw one frame by hand. A second mount(el, { sources }) on a mounted element hands the sources over. The element emits pixeltrail:spawn with { index, count } as event.detail. destroy() takes away the canvas, the pointer and resize listeners, the size watch and the render loop, and gives back a position it had set, so mounting again on the same element starts clean. In React, mount in useEffect and destroy in its cleanup; the double run of StrictMode then leaves one trail, not two.
   • freeze() holds the trail as a still picture: a card stops ageing the moment it is whole, so none of them drifts or leaves, and the render loop stops as soon as the last one has composed, which makes a held scene cost nothing. unfreeze() hands the trail back to the clock and the cards it was holding leave at once. PixelTrail.freeze(el) and PixelTrail.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 trail standing still: a page that only wants the trail never calls it.
   • **prefers-reduced-motion**: no pixels, the images appear and go out in a plain fade, and the trail stays short.
   • 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 an element that already carries a trail returns the existing one, taking only its sources. A page-wide block therefore goes in window.PixelTrailSettings, which auto() reads itself; handed to a later mount() call it is silently dropped, and the settings block ends up looking decorative.
   • Without the stylesheet, the source images show. The engine keeps its own canvas out of the flow, but hiding [data-pixel-trail-images] is the job of pixel-trail.css: load the script alone and the seven images appear in the section at their natural size. Link the stylesheet, or hide the container yourself.
   • The image addresses of the markup are relative, images/…, so they point at the images/ folder next to the page holding the markup. Moved into another page or a framework route, they have to be pointed at wherever your images are served from.
   • An image that never loads is skipped after 8 s, with no error and no warning. When none loads, the trail stays silent: check the addresses first.
   • Text painted into your own canvas sources needs its fonts loaded first: wait for document.fonts.load() before painting, otherwise the text comes out in the fallback font without a single error. Wait with Promise.allSettled, not Promise.all: a font file that never arrives rejects, and Promise.all then never paints anything. make-cards.html, which bakes the seven cards of images/, waits for Inconsolata that way.

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.