# Pill Button With Looping Marquee Label
A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/pill-button-with-looping-marquee-label).
- Page, with a live preview: https://shadcn.exchange/r/weinc/pill-button-with-looping-marquee-label
- Screenshot: https://shadcn.exchange/shot/weinc/pill-button-with-looping-marquee-label/light.png
- Registry item: https://we.inc/r/pill-button-with-looping-marquee-label.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/pill-button-with-looping-marquee-label.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Files
### `components/we-inc/pill-button-with-looping-marquee-label.tsx`
```tsx
import { useEffect, useRef, useState } from "react";
const LABEL = "Book a fitting";
const SPEED = 4; // seconds for the label to loop once while the button is lit
const IDLE_ON = 2600; // ms the idle demo keeps the button lit, then rests the same time
function Arrow() {
return (
);
}
export default function PillButtonWithLoopingMarqueeLabel() {
const root = useRef(null);
const [demo, setDemo] = useState(true);
const [live, setLive] = useState(false);
useEffect(() => {
const el = root.current;
if (!el || live) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setDemo(false); return; }
// idle demo: light the button now and then until a real pointer or focus arrives; only while visible
let timer = 0;
const io = new IntersectionObserver(([e]) => {
clearInterval(timer);
if (e.isIntersecting) timer = window.setInterval(() => setDemo((d) => !d), IDLE_ON);
});
io.observe(el);
const stop = () => setLive(true);
el.addEventListener("pointerenter", stop);
el.addEventListener("focusin", stop);
return () => { clearInterval(timer); io.disconnect(); el.removeEventListener("pointerenter", stop); el.removeEventListener("focusin", stop); };
}, [live]);
return (
Mercer Row Tailoring
A suit cut to you takes three fittings and about six weeks.
Bring a jacket you already love. We measure, choose cloth together and pin a first try-on the same afternoon.