Marquee

An infinite scrolling component that handles content loops effortlessly. Supports horizontal, vertical, and 3D perspective orientations.

Installation

npx raya-ui@latest add marquee

File Structure

your-project

components

marquee

Marquee.vue

API Reference

Props

reverse

boolean

false

Reverses the animation direction.

pauseOnHover

boolean

false

Pauses the animation when the mouse hovers over the container.

vertical

boolean

false

Changes orientation to vertical scrolling.

repeat

number

4

Number of times to duplicate the content for seamless looping.

class

string

Custom classes. Use [--duration:20s] or [--gap:1rem] here to customize speed and spacing.

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Settings

Example Variant

Duration20s

Pause on Hover

Reverse Direction

source-code.vue

<script setup lang="ts">
import { Marquee } from '@/components/ui/marquee'
</script>

<template>
  <div class="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background">
    <Marquee pause-on-hover class="[--duration:20s]">
      <!-- Review Cards (First Row) -->
    </Marquee>
    <Marquee reverse pause-on-hover class="[--duration:20s]">
      <!-- Review Cards (Second Row) -->
    </Marquee>

    <!-- Gradient Overlays -->
    <div class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-background"></div>
    <div class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-background"></div>
  </div>
</template>