Pixel ribbon
New Cursor AnimationsA ribbon of pixels trails the cursor on springs, then folds back into its head.
Pixel effects for Webflow.
Six effects built on one idea, a picture, a line of text or a button that arrives square by square. Each one pastes into Webflow, ships as plain JavaScript, or goes to your assistant as a prompt.
The whole library
Pixel wake
New Cursor AnimationsSquares open under the cursor with a flash of colour, then close behind it
Pixel swap
Cursor AnimationsThe cursor opens a pixel trail onto a second image, and each square closes again.
Pixel sweep reveal
Text AnimationsHeadings and paragraphs write themselves in, pixel block by pixel block.
Pixel image trail
Cursor AnimationsImages settle along the path of the cursor, then leave again.
Which one to pick
One grain, six uses.
Pixel image trailA hero or a showcase with several pictures to show. They build cell by cell along the path of the cursor, then leave the same way.Open
Pixel swapOne image box with a second picture under it: the other colourway of a product, the same view after dark. The cursor opens it square by square.Open
Pixel sweep revealHeadings and paragraphs that write themselves in as they scroll into view. The text stays real text, selectable and read by a search engine.Open
Pixel ribbonA cursor trail with no picture at all: a liquid ribbon of pixels follows the pointer on springs, over a section of your own.Open
Pixel wakeA background that answers the pointer. A grid of squares turns under the cursor with a flash of ink, then closes one by one.Open
Pixel buttonA call to action. Cells of colour light the button from the side the pointer came in, then go dark.Open
Open the effect, press Copy to Webflow and paste on the canvas: the structure and its code arrive together. The effect is carried by a custom attribute, data-pixel-trail for the image trail, and every setting is one more attribute on the same element, in the Settings panel.
Five of the six need no library at all: the image trail, the swap, the text reveal, the ribbon and the wake are drawn on a canvas in plain JavaScript. The pixel button uses GSAP, loaded from one CDN script tag that the Webflow paste and the zip both carry.
Yes. Each effect has a cell setting, the side of one square in pixels: data-pixel-swap-cell="24" gives a coarser grain, a lower number a finer one. The text reveal sizes its blocks from the font size unless you set one, and on the button the setting is called grain.
Each one reads prefers-reduced-motion and has a calm state for it. The text reveal never replaces the text with an image, and the cursor effects are drawn on a canvas that takes no part in the reading order.