Marquee for Solid

Logos or cards leave one edge and come back on the other, with no next button.

Use it on a marketing page when the motion is decoration and the items can repeat. If someone should stop on a specific slide, use a Carousel. In Solid, Ark UI runs the loop, holds it while someone points at it or tabs into it, and keeps it still for people who ask for reduced motion.

Installation

Anatomy

Marquee
├── MarqueeContent
│   └── MarqueeViewport
├── MarqueeEdge
└── MarqueeItem

Usage

import { AppleIcon } from "@/components/icons/apple";
import { ChatGptIcon } from "@/components/icons/chat-gpt";
import { ClaudeIcon } from "@/components/icons/claude";
import { GoogleIcon } from "@/components/icons/google";
import { NextIcon } from "@/components/icons/next";
import { ReactIcon } from "@/components/icons/react";
import { ViteIcon } from "@/components/icons/vite";
import { VueIcon } from "@/components/icons/vue";
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee, MarqueeContent, MarqueeItem,
} from "@/components/ui/marquee";

const MarqueeDemo = () => (
  <Marquee>
    <MarqueeContent>
      {items.map((Icon, index) => (
        <MarqueeItem key={index}>
          <Card class="[--space:--spacing(8)]">
            <CardContent>
              <Icon class="size-10" />
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

const items = [
  GoogleIcon,
  AppleIcon,
  NextIcon,
  ChatGptIcon,
  ClaudeIcon,
  ViteIcon,
  VueIcon,
  ReactIcon,
];

Accessibility

The loop holds while the pointer is over it or focus is inside it, and runs again once both have left; pauseOnInteraction is on by default. With reduced motion on, nothing moves: the items stay in place, the edge fades go, and a row longer than the frame scrolls instead. The copies that make the loop are hidden from screen readers and inert, so each item is read and tabbed to once.

Demos

Autofill

A short logo list leaves a gap before the loop comes around, so autoFill copies items until the track is full. This row also runs at a speed of 100, twice the default of 50 pixels a second, which is a lot for words and reasonable for logos. Use autofill whenever the set is shorter than the frame, or the seam shows.

Custom Speed

speed counts pixels per second, defaulting to 50. This row uses 10, slow enough that a name could be read, which is what you want for words and too sleepy for a logo wall. Set it on Marquee, not on each card, and leave the gap alone, because spacing is a different prop.

Fade

The ends fade out unless showEdges is off. The first row clips logos hard at the frame, and the second keeps the fade while reverse runs them the other way, so the soft edge is easier to see against the motion. The fade is a mask on the marquee itself, not a band of colour, so it dissolves into whatever is behind: the page, a card, a tinted band or a photo.

Orientation Horizontal

Sideways travel is the default. Setting orientation to horizontal only makes that obvious, which helps when a vertical strip is on the same page or the value is controlled. The cards move in a row and the height follows them. A page with one logo bar can omit the prop and get this direction anyway.

Orientation Vertical

orientation set to vertical stacks the cards and moves them up. The column is narrow and height-capped, because a vertical loop with no limit has nowhere to scroll, which suits a sidebar better than a hero. The edge fade stays at the top and bottom unless you turn it off.

Pause On Hover

pauseOnInteraction is on by default, and this demo sets it only to show the prop: the loop holds while the pointer is over the strip or focus is inside, then resumes on the way out. Keep it on when a logo is a link or a name has to be read, because a moving target is a poor place to click. Turn it off only when something else can stop the strip, such as a button that sets paused.

Reverse

reverse sends the cards the other way, which is how a second strip under a forward one reads as two bands instead of one belt. Speed and the original order of the items stay as they are. Use the flip for that paired layout, or when the motion should follow the reading direction, without inventing a negative duration yourself.

Spacing

spacing is a CSS length for the gap between cards and between the copies that form the loop. The default is 16px, and this row uses 40px; hover it to hold the loop and look at the gap instead of watching it fly past. Widen it when logos feel stuck together, and do not fake the distance with a gap class on the item.

FAQ

API Reference