Marquee

A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

<script setup lang='ts'>
import Marquee from '@/components/marquee/Marquee.vue'
import ReviewCard from './ReviewCard.vue'

const reviews = [
  {
    name: 'Jack',
    username: '@jack',
    body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
    img: 'https://avatar.vercel.sh/jack',
  },
  {
    name: 'Jill',
    username: '@jill',
    body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
    img: 'https://avatar.vercel.sh/jill',
  },
  {
    name: 'John',
    username: '@john',
    body: 'I\'m at a loss for words. This is amazing. I love it.',
    img: 'https://avatar.vercel.sh/john',
  },
]

const firstRow = reviews.slice(0, reviews.length / 2)
const secondRow = reviews.slice(reviews.length / 2)
</script>

<template>
  <div class="relative flex h-[400px] w-[300px] lg:w-[800px] flex-col items-center justify-center overflow-hidden rounded-lg">
    <Marquee reverse class="[--duration:20s]">
      <div v-for="{ img, name, username, body } in firstRow" :key="username">
        <ReviewCard :key="username" :username="username" :img="img" :name="name" :body="body" />
      </div>
    </Marquee>
    <Marquee pause-on-hover class="[--duration:20s]">
      <div v-for="{ img, name, username, body } in secondRow" :key="username">
        <ReviewCard :key="username" :username="username" :img="img" :name="name" :body="body" />
      </div>
    </Marquee>
    <div class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background" />
    <div class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background" />
  </div>
</template>

Installation

Copy and paste the following code into your project:

Marquee.vueReviewCard.vue

vue

<script setup lang='ts'>
import { cn } from '@/lib/utils'

interface MarqueeProps {
  class?: string
  reverse?: boolean
  pauseOnHover?: boolean
  vertical?: boolean
  repeat?: number
  [key: string]: any
};

const props = withDefaults(defineProps<MarqueeProps>(), {
  pauseOnHover: false,
  vertical: false,
  repeat: 4,
})

const className = cn(
  'flex shrink-0 justify-around [gap:var(--gap)]',
  {
    'animate-marquee-vertical flex-col': props.vertical,
    'animate-marquee flex-row': !props.vertical,
    '[animation-direction:reverse]': props.reverse,
    'group-hover:[animation-play-state:paused]': props.pauseOnHover,
  },
)
</script>

<template>
  <div
    v-bind="props" :class="cn('group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',
                              {
                                'flex-row': !props.vertical,
                                'flex-col': props.vertical,
                              },
                              props.class,
    )"
  >
    <div v-for="i in Array(props.repeat).fill(0)" :key="i">
      <div :key="i" :class="className">
        <slot />
      </div>
    </div>
  </div>
</template>

vue

<script setup lang='ts'>
import { cn } from '@/lib/utils'

const props = defineProps<{
  img: string
  name: string
  username: string
  body: string
}>()
</script>

<template>
  <div
    :class="cn(
      'relative w-64 cursor-pointer overflow-hidden h-36 flex flex-col space-y-1 rounded-xl px-4',
      '  border-gray-950/[.1] bg-gray-950/[.01] border-parent hover:bg-gray-950/[.05]',
    )"
  >
    <div class="flex items-center space-x-2">
      <img class="rounded-full" width="32" height="32" :src="props.img">
      <p class="flex flex-col space-y-1">
        <span class="text-sm font-medium dark:text-white">
          {{ props.name }}
        </span>
        <span class="text-xs font-medium dark:text-white/40">
          {{ props.username }}
        </span>
      </p>
    </div>

    <div>
      <span leading-none class="text-sm font-medium  dark:text-white/40">
        {{ props.body }}
      </span>
    </div>
  </div>
</template>

<style scoped>
.border-parent {
  border: 1px solid #ecedee;
}
</style>

Add the following animations to your tailwind.config.js file:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        'marquee': 'marquee var(--duration) linear infinite',
        'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
      },
      keyframes: {
        'marquee': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(calc(-100% - var(--gap)))' },
        },
        'marquee-vertical': {
          from: { transform: 'translateY(0)' },
          to: { transform: 'translateY(calc(-100% - var(--gap)))' },
        },
      },
    },
  },
}

Examples

Vertical Marquee

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jack@jack

I've never seen anything like this before. It's amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

Jill@jill

I don't know what to say. I'm speechless. This is amazing.

John@john

I'm at a loss for words. This is amazing. I love it.

<script setup lang='ts'>
import Marquee from '@/components/marquee/Marquee.vue'
import ReviewCard from './ReviewCard.vue'

const reviews = [
  {
    name: 'Jack',
    username: '@jack',
    body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
    img: 'https://avatar.vercel.sh/jack',
  },
  {
    name: 'Jill',
    username: '@jill',
    body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
    img: 'https://avatar.vercel.sh/jill',
  },
  {
    name: 'John',
    username: '@john',
    body: 'I\'m at a loss for words. This is amazing. I love it.',
    img: 'https://avatar.vercel.sh/john',
  },
]

const firstRow = reviews.slice(0, reviews.length / 2)
const secondRow = reviews.slice(reviews.length / 2)
</script>

<template>
  <div class="relative flex h-[400px] w-[300px] lg:w-[800px] flex-row items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
    <Marquee pause-on-hover vertical class="[--duration:20s]">
      <div v-for="{ img, name, username, body } in firstRow" :key="username">
        <ReviewCard :key="username" :username="username" :img="img" :name="name" :body="body" />
      </div>
    </Marquee>
    <Marquee reverse pause-on-hover vertical class="[--duration:20s]">
      <div v-for="{ img, name, username, body } in secondRow" :key="username">
        <ReviewCard :key="username" :username="username" :img="img" :name="name" :body="body" />
      </div>
    </Marquee>
    <div class="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white dark:from-background" />
    <div class="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white dark:from-background" />
  </div>
</template>

3D Marquee

<script setup lang='ts'>
import Marquee from '@/components/marquee/Marquee.vue'

const logos = [
  {
    name: 'Microsoft',
    img: 'https://picsum.photos/id/1/200/300',
  },
  {
    name: 'Apple',
    img: 'https://picsum.photos/id/2/200/300',
  },
  {
    name: 'Google',
    img: 'https://picsum.photos/id/3/200/300',
  },
  {
    name: 'Facebook',
    img: 'https://picsum.photos/id/4/200/300',
  },
  {
    name: 'LinkedIn',
    img: 'https://picsum.photos/id/5/200/300',
  },
  {
    name: 'Twitter',
    img: 'https://picsum.photos/id/6/200/300',
  },
]
</script>

<template>
  <div class="grid place-items-center min-h-screen w-full">
    <div
      class="relative flex h-[400px] w-[300px] lg:w-[800px] flex-row items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl"
    >
      <div class="flex flex-row gap-4">
        <Marquee
          vertical class="h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]" :style="{
            transform: 'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',
          }
          "
        >
          <div v-for="(logo, index) in logos" :key="index">
            <img
              :key="index" :src="logo.img" :alt="logo.name"
              class="mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300"
            >
          </div>
        </Marquee>
        <div
          class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
        />
        <div
          class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"
        />
      </div>
    </div>
  </div>
</template>

Props

Prop	Type	Default	Description
class	string		The class to apply to the component.
reverse	boolean	false	Whether or not to reverse the direction of the marquee.
pauseOnHover	boolean	false	Whether or not to pause the marquee when the user hovers over the component.
vertical	boolean	false	Whether or not to display the marquee vertically.
repeat	number	1	The number of times to repeat the content.

Marquee ​

Installation ​

Examples ​

Vertical Marquee ​

3D Marquee ​

Props ​

Marquee

Installation

Examples

Vertical Marquee

3D Marquee

Props