• 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.

Scanline Strip. One licence per project.

Create a free website with Framer, the website builder loved by startups, designers and agencies.