FlowCraft Logo Marquee
Two marquees run below: client logos scrolling right to left, and project cards scrolling the other way. Hover over either to pause it. This demo runs the same app.js that comes with the paid component.
Fictional brands. The six logos are placeholder brands made for this demo, not HaveInsights clients. You replace them with your own clients' logos, and nothing you enter here is saved or sent.
Try it
- Watch the loop. The strip never jumps or leaves a gap, on any screen width.
- Hover to pause. It also pauses on keyboard focus, and the round button stops it for good.
- Not just logos. The second strip uses image cards and runs the other way, a little slower.
Our clients
Brands we've built websites for
Sample logos. Hover over the strip to pause it.
Recent projects
Websites we've launched lately
A second marquee with website screenshots, running the other way.
Copies, measured to the pixel
A seamless loop needs the same logos several times in a row, and a slide of exactly one set's width. app.js does the measuring and copying for you, with every step explained in comments.
- Measure one setThe width from the first logo to the end of the last, spacing included.
- Add just enough copiesEnough to cover the screen plus one, so a wide monitor never sees a gap. Screen readers read each logo once.
- Slide one set, repeatWhen the strip has moved exactly one set, the first copy sits where the original started, so the restart can't be seen.
Constant speed: duration = distance ÷ speed. A 1,500px set at 40 pixels per second loops every 37.5 seconds, so adding logos doesn't make the strip race.
<section data-marquee
data-speed="40"
data-direction="left"
data-pause-on-hover="true">
…
<li data-marquee-item>
<img src="client-logo.svg" alt="Client">
</li>What the full version includes
Delivered as a ZIP download through Payhip.
-
index.htmlLogo strip, project-card strip and quote form, styled with Tailwind CSS -
app.jsSeamless copying, speed, pausing, resizing and the quote form, heavily commented -
style.cssThe loop animation, edge fades, grey-to-colour logos and pause states -
assets/images/Six sample website screenshots and six inline-SVG placeholder logos, plusREADME.txtand an optional.htaccess
Requirements
- Any web host, or none. The page also works when
index.htmlis opened directly from your computer. - Your clients' logos, with their permission. SVG or PNG files, or paste the SVG code straight in.
- A form endpoint to receive leads (optional). Any service that accepts a JSON
POST, for example Formspree, Make or Zapier. Until you add one, the quote form sends nothing and says so. - An internet connection for visitors. Tailwind CSS loads from its public CDN. No npm install or build step.
Get the Logo Marquee
Start with the free static shell to check the layout, or get the full version with the working marquee you just tried.
Free
Free Static HTML Shell
The layout: logo strip, project-card strip, sample logos and images and the quote form, so you can review the design and markup.
- Complete visual layout with sample logos and images
- Sample structure and markup
- Does not include the scrolling loop or form logic
Opens the free download on Payhip.
Full version
Full Logo Marquee — $47
The working marquee you just tried, ready for your own logos.
- Truly seamless infinite loop at a constant speed, on any screen width
- Pauses on hover, on keyboard focus, off-screen, and with a pause button
- Works with logos, images or cards, in either direction
- Quote form sends each visitor's email and the project they picked to your form service
Checkout and download are handled by Payhip.
Back to the FlowCraft catalogue to see the other components.