# Webcore marquee box

A CSS marquee ticker in a retro box: a label key and endlessly scrolling news that pauses on hover\.

- Kind: element
- Category: badges
- Default background: light
- Use when: Site news, update logs, shout\-outs and now\-playing lines on Y2K homepages\.
- Avoid when: Anything people must read in full or act on; moving text is easy to miss\.
- Requires: Keep the second copy of the text with aria\-hidden="true"; it only makes the loop seamless\.; Set \-\-tv\-webcore\-marquee\-duration to change the speed \(default 18s\)\.
- Kit: [Webcore](https://thuvien.org/ui/kits/webcore.md)
- Credit: [Luna UI](https://thuvien.org/ui)
- License: MIT

## Variants

Add one variant class next to the root element's class.

- [Pink](https://thuvien.org/ui/elements/webcore-marquee?variant=pink): default, no extra class
- [Lilac](https://thuvien.org/ui/elements/webcore-marquee?variant=lilac): `tv-webcore-marquee--lilac`
- [Navy](https://thuvien.org/ui/elements/webcore-marquee?variant=navy): `tv-webcore-marquee--navy`

## HTML

```html
<div class="tv-webcore-marquee">
  <span class="tv-webcore-marquee-label">news</span>
  <div class="tv-webcore-marquee-window">
    <div class="tv-webcore-marquee-track">
      <p class="tv-webcore-marquee-text">✦ the guestbook is open ✦ new art in the gallery ✦ webring links updated ✦ thank you for visiting ♡</p>
      <p class="tv-webcore-marquee-text" aria-hidden="true">✦ the guestbook is open ✦ new art in the gallery ✦ webring links updated ✦ thank you for visiting ♡</p>
    </div>
  </div>
</div>
```

## CSS

```css
/* A marquee ticker without the marquee element: two copies of the text slide left in a loop. */
.tv-webcore-marquee {
  --tv-webcore-marquee-face: var(--tv-webcore-pink, #f7b5e4);
  --tv-webcore-marquee-ink: var(--tv-webcore-navy, #2c2b9f);
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--tv-webcore-navy, #2c2b9f);
  background: var(--tv-webcore-marquee-face, #f7b5e4);
  color: var(--tv-webcore-marquee-ink, #2c2b9f);
  font: 14px/1.2 "Lucida Console", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.05em;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--tv-webcore-navy, #2c2b9f) 25%, transparent);
}

.tv-webcore-marquee-label {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--tv-webcore-navy, #2c2b9f);
  background: var(--tv-webcore-navy, #2c2b9f);
  color: var(--tv-webcore-paper, #ffffff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tv-webcore-marquee-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 2px dotted color-mix(in srgb, var(--tv-webcore-marquee-ink, #2c2b9f) 45%, transparent);
  margin: 3px;
}

.tv-webcore-marquee-track {
  display: flex;
  width: max-content;
  animation-name: tv-webcore-marquee-scroll;
  animation-duration: var(--tv-webcore-marquee-duration, 18s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.tv-webcore-marquee-text {
  margin: 0;
  padding: 8px 2rem 8px 0;
  white-space: nowrap;
}

/* Hovering or focusing inside the box pauses the text so it can be read. */
.tv-webcore-marquee:hover .tv-webcore-marquee-track,
.tv-webcore-marquee:focus-within .tv-webcore-marquee-track {
  animation-play-state: paused;
}

@keyframes tv-webcore-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tv-webcore-marquee--lilac {
  --tv-webcore-marquee-face: var(--tv-webcore-lilac, #a49bf3);
}

.tv-webcore-marquee--navy {
  --tv-webcore-marquee-face: var(--tv-webcore-navy, #2c2b9f);
  --tv-webcore-marquee-ink: var(--tv-webcore-paper, #ffffff);
}

.tv-webcore-marquee--navy .tv-webcore-marquee-label {
  border-right-color: var(--tv-webcore-paper, #ffffff);
  background: var(--tv-webcore-pink, #f7b5e4);
  color: var(--tv-webcore-navy, #2c2b9f);
}

/* Still: the text sits in place and wraps, and the loop copy is hidden. */
@media (prefers-reduced-motion: reduce) {
  .tv-webcore-marquee-track {
    width: auto;
    animation: none;
  }

  .tv-webcore-marquee-text {
    white-space: normal;
  }

  .tv-webcore-marquee-text[aria-hidden="true"] {
    display: none;
  }
}
```