Marquee
An endless row of logos whose ends dissolve into dithered pixels.
<piix-marquee>DOM + canvas<piix-marquee> <span class="logo">◆ Acme</span> <span class="logo">▲ Globex</span> <span class="logo">● Initech</span> <span class="logo">■ Umbrella</span> <span class="logo">✦ Hooli</span> <span class="logo">⬢ Vandelay</span> </piix-marquee>
Logos, words, anything: they slide past in a loop with no seam. Instead of a blurry fade the ends break up into a pixel dither. Hover to pause it.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just marquee (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/marquee.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-marquee>
<span className="logo">◆ Acme</span>
<span className="logo">▲ Globex</span>
<span className="logo">● Initech</span>
<span className="logo">■ Umbrella</span>
<span className="logo">✦ Hooli</span>
<span className="logo">⬢ Vandelay</span>
</piix-marquee>
);
}
Usage
<piix-marquee> <span class="logo">◆ Acme</span> <span class="logo">▲ Globex</span> <span class="logo">● Initech</span> <span class="logo">■ Umbrella</span> <span class="logo">✦ Hooli</span> <span class="logo">⬢ Vandelay</span> </piix-marquee>
Examples
Two rows, opposite ways
<piix-marquee speed="30">…</piix-marquee> <piix-marquee speed="30" reverse>…</piix-marquee>
API reference
| Attribute | What it does | Default |
|---|---|---|
speed | pixels a second | 40 |
gap | px between items | 48 |
fade | px of dithered fade at each end | 96 |
reverse | scroll the other way | – |
Accessibility
- The copies it makes for the loop are hidden from screen readers and can't be tabbed to.
- Holds still with reduced motion.
- Pauses while the pointer is over it.