Figma
Framer
Affinity
VSCode
Supabase
Claude Code
Figma
Framer
Affinity
VSCode
Supabase
Claude Code

SCANLINE STRIP
A logo row that reads itself.
A scanner line travels the row. Whatever it touches is in colour, as a per-pixel mask, so the icon lights first and then each letter in turn. Nothing to click, nothing to configure.
1 · SWEEP
Figma
Framer
Affinity
VSCode
Supabase
Claude Code
The row is still and the line travels. Auto picks this whenever the row fits its container, measured rather than guessed from a breakpoint.
2 · MARQUEE, AND ONE PROPERTY TO RETHEME
Figma
Framer
Affinity
VSCode
Supabase
Claude Code
The row scrolls and the line holds at the centre. Auto picks this when the row does not fit. The accent is one value: 255 92 26. The scanner line follows it.
3 · LIGHT BACKGROUND
Figma
Framer
Affinity
VSCode
Supabase
Claude Code
Nothing is hardcoded to dark. Background, resting colour and hairline are properties. Bind them to Framer colour styles and the strip follows the site theme.
4 · EDGE TO EDGE
No frame, no max width. The strip spans the viewport and the mask still lands on the line.
Figma
Framer
Affinity
VSCode
Supabase
Claude Code
MEASURED
Mask edge lands within 0.6px of the line, including inside a scaled ancestor. 18 KB across two files.
Cloned rows and colour overlays are inert, so a linked logo never becomes a keyboard trap screen readers cannot announce.
Right to left supported. Reduced motion stops it and hides the line rather than parking it mid item.
Chrome 87, Firefox 66, Safari 14.1 and newer. No dependencies, no build step.