Marquee

Usage

A continuous logo cloud of customer brands. Hover anywhere to slow it down. Edges fade out to soften the loop.

import A3CIcon from '@jamie/icons/A3CIcon'
import AtaresIcon from '@jamie/icons/AtaresIcon'
import DraycottIcon from '@jamie/icons/DraycottIcon'
import ElvastonIcon from '@jamie/icons/ElvastonIcon'
import HunterIcon from '@jamie/icons/HunterIcon'
import NorddIcon from '@jamie/icons/NorddIcon'
import { Marquee } from '@jamie/ui/marquee'
 
const COMPANIES = [
  { name: 'Hunter', icon: <HunterIcon className="h-8 md:h-9.5" /> },
  { name: 'Nordd', icon: <NorddIcon className="h-8 md:h-10" /> },
  { name: 'Atares', icon: <AtaresIcon className="h-8 md:h-10" /> },
  { name: 'Draycott', icon: <DraycottIcon className="h-8 md:h-10" /> },
  { name: 'Elvaston', icon: <ElvastonIcon className="h-8 md:h-10" /> },
  { name: 'A3C', icon: <A3CIcon className="h-8 md:h-10" /> }
]
 
export function MarqueeDemo() {
  return (
    <div className="relative flex w-full items-center overflow-hidden">
      <Marquee slowOnHover className="[--duration:30s] [--gap:3rem]">
        {COMPANIES.map((company) => (
          <div
            key={company.name}
            className="flex items-center text-muted-foreground transition-colors hover:text-foreground"
          >
            {company.icon}
          </div>
        ))}
      </Marquee>
      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-linear-to-r from-background" />
      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-linear-to-l from-background" />
    </div>
  )
}

Drop it in

import { Marquee } from '@jamie/ui/marquee'
 
<Marquee>
  {items.map((item) => (
    <div key={item.id}>{item.icon}</div>
  ))}
</Marquee>

Tune speed and spacing

Override --duration and --gap per instance.

<Marquee className="[--duration:30s] [--gap:3rem]">{children}</Marquee>

Add edge fades

Wrap the marquee and overlay gradients on the left and right.

<div className="relative overflow-hidden">
  <Marquee>{children}</Marquee>
  <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background" />
  <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background" />
</div>

Slow on hover

Pass slowOnHover to ease the marquee to ~50% speed while the cursor is over it. Pure CSS, no jump — an inner wrapper transitions in the opposite direction over --duration, subtracting from the perceived row speed.

<Marquee slowOnHover>{children}</Marquee>

Direction

<Marquee reverse>{children}</Marquee>
<Marquee vertical>{children}</Marquee>

Props

Prop	Type	Default	Description
`reverse`	`boolean`	`false`	Reverse the scroll direction.
`vertical`	`boolean`	`false`	Scroll vertically instead of horizontally.
`slowOnHover`	`boolean`	`false`	Smoothly slow the marquee to ~50% speed on hover instead of pausing it.
`repeat`	`number`	`4`	How many times the children are repeated for the loop.