N° 0002SectionFree

Magnet Marquee

Rows of invented client logos drift between fine field lines, bend away from your pointer and spring back into rhythm.

This prompt is in review and opens with the next release. The preview, looks and source are live.

Open full page Live. Scroll inside the preview to play it.

Loading the layer

LooksShowing GraphiteEach look changes the colours of the live preview and goes into the prompt you copy.

Overview

Invented client logos drift between hairline field lines. The cursor, or a slow ghost cursor when there is none, parts them on springs.

Signature momentThe logos bending away from the pointer and snapping back into rhythm.

The field
One to three rows of logos move at a steady speed between 1 px field lines. Everything is DOM and SVG; there is no canvas.
The magnet
Each logo has a spring with its own stiffness. Inside the repel radius it pushes away from the pointer and tilts a few degrees.
The ghost
Without a pointer a ghost magnet crosses the field every few seconds so the motion still reads on touch screens.
Pause control
A visible pause button stops the marquee. It is wired to reduced motion as well.
Nine looks
Graphite, Paper, Signal, Single File, Gravity Well, Snap, Ember, Ledger and Billboard change speed, radius, stiffness, rows and palette.
Weight
About 35 KB of HTML, CSS and script, with no images.

Build details

Kind: Section
Plan: Free
Tone: Dark, Light
Industries: SaaS, Agency, Fintech
Technique: Physics, SVG, CSS only
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 35 KB, layer files only
Mobile performance: Measuring
Accessibility: 100
Fidelity Score: 99
Licence: Commercial, including client work. No redistribution. Read it
Version: 1, updated 2 November 2026
Released: 2 November 2026

Something wrong with this layer? Report a problem and we fix it in the next version.

The prompt

The prompt for this layer is being written to the same contract as the others and opens with the next release. The preview, looks and source are live now.

Original and rebuild

A fresh model was given the prompt and nothing else. Its build and the original were captured at the same scroll positions and pointer paths; the rows are the frame pairs.

Fidelity 99