Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luigitemu/pikante-landing/llms.txt

Use this file to discover all available pages before exploring further.

The Marquee component is a full-width horizontally scrolling ticker that sits between the Hero and Products sections. It reinforces brand identity with a vivid fire-orange background (var(--accent)) and an infinite looping scroll of brand phrases rendered in the Anton display typeface — no JavaScript required.

​
How it works

The component contains a single .marquee-track flex row whose width is set to max-content. The track holds six text <span> items separated by circular dot dividers. The CSS @keyframes scroll rule translates the track to translateX(-50%), which works because the track’s natural max-content width extends well beyond the viewport — the animation simply slides the strip leftward continuously at 20s linear infinite.

Pure CSS animation

A single @keyframes scroll rule drives the loop. No scroll listeners, no JavaScript timers.

Decorative only

The outer wrapper carries aria-hidden="true", so screen readers skip it entirely.

Accent background

Background is var(--accent) — oklch(65% 0.21 35deg), the same fire orange-red used throughout the brand.

Anton typeface

Text is set in Anton at 34px, uppercase, white — matching the site’s display heading style.

​
Content items

The ticker contains the following labels in order, separated by dot dividers:
#Text
1PIKANTÉ
2Hecho en Honduras
3Michemix
4Hecho en Honduras
5Sabor auténtico
6Micheladas
Each dot is a <span class="dot"> — a 10 × 10 px white circle with a subtle box-shadow glow.

​
CSS animation

The animation keyframe simply translates the track to the left by half its total width: 
@keyframes scroll {
  to { transform: translateX(-50%); }
}
The track is animated continuously at 20s linear infinite, which means the full loop completes once every 20 seconds at constant speed. Because the track width is max-content and items are written to fill two visual lengths, the –50% endpoint aligns perfectly with the starting position, giving an invisible seam. 
/* ============ MARQUEE ============ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
  background: var(--accent); /* fire orange-red */
}

.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  width: max-content; /* lets the flex row grow beyond the viewport */
}

.marquee span {
  font-family: 'Anton', sans-serif;
  font-size: 34px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  user-select: none;
}

.marquee .dot {
  align-self: center;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px rgba(255,255,255,.4);
}

@keyframes scroll {
  to { transform: translateX(-50%); }
}
To change the scroll speed, adjust the 20s duration on the .marquee-track animation rule in global.css. A lower value (e.g. 12s) makes the ticker faster; a higher value (e.g. 35s) slows it down. The seamless loop is purely geometric — changing the duration never breaks the repeat.
The marquee animation is automatically disabled for users who have prefers-reduced-motion: reduce set in their OS accessibility preferences. The global CSS rule @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } stops the motion while still displaying the ticker content statically.

​
Full component source

<div class="marquee" aria-hidden="true">
  <div class="marquee-track">
    <span>PIKANTÉ</span><span class="dot"></span>
    <span>Hecho en Honduras</span><span class="dot"></span>
    <span>Michemix</span><span class="dot"></span>
    <span>Hecho en Honduras</span><span class="dot"></span>
    <span>Sabor auténtico</span><span class="dot"></span>
    <span>Micheladas</span><span class="dot"></span>
  </div>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us