🎠

Tools marquee (scrolling icons)

What it does

A "Tools I work with" section for the Home page, styled after the threadandstack.com logo strip. A slow, seamless left-scrolling marquee of flat grey tool icons with soft fade-out edges. Pauses on hover, respects reduced-motion settings, tightens spacing on mobile. No external dependencies: every logo is inlined in the one HTML file, so nothing loads from a CDN.
Icons included (12): Notion, Notion Calendar, Slack, Google, Microsoft, Trello, WhatsApp, Beeper, Buffer, Claude, Gemini, Zapier.

Files

tools-marquee.html: the full snippet (markup + CSS + inline SVG logos).

How to install

  1. Open tools-marquee.html in a text editor and copy the entire contents.
  2. In Bullet, add an HTML block on the Home page where the strip should sit (between the hero and the next section works well) and paste it in.
  3. Publish and check the live page.
Easy tweaks at the top of the file:
  • Heading text: change Tools I work with in the first line of markup.
  • Speed: animation: nn-tools-scroll 55s, raise the number for slower.
  • Icon colour and size: set directly on each icon as attributes (width="30" height="30" fill="#8a8f98"), so they survive any builder that drops class-based CSS.
  • Remove a tool: delete its <span class="nn-tool">...</span> line, and delete the same line in the duplicate set below it (the set appears twice for the seamless loop).

Change log

  • Sep 13, 2026 v1.1: icon size and colour moved from CSS classes to inline attributes. Fixes icons rendering at full width when the style block or classes are not applied by the site builder.
  • Sep 13, 2026 v1.0: initial build. Simple Icons SVGs inlined, Beeper logo recoloured from the official favicon, custom Notion Calendar glyph drawn to match.