DocseffectsMarquee

Marquee

An infinite marquee that loops seamlessly, fades its edges, pauses on hover and takes a palette accent.

Palette
Calamansi
BlinkPetPokeBlush
Spotlight cardTilt cardDockNumber tickerMarqueeCalamansi mascot
no fade · no pauseno fade · no pauseno fade · no pauseno fade · no pauseno fade · no pauseno fade · no pause

Hover a row to hold it in place. Move away and it carries on.

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/marquee

How to use

demo.tsx
import { Marquee } from "@/components/ui/marquee"
export function Demo() {
  return (
    <Marquee duration={24}>
      {["Blink", "Pet", "Poke", "Blush"].map((word) => (
        <span key={word} className="text-sm font-semibold">
          {word}
        </span>
      ))}
    </Marquee>
  )
}

Props

Options you can pass to customize this component.

  • children*required
    ReactNode

    The row to loop. Rendered twice for a seamless seam.

  • variantoptional
    whitecalamansislatecitrus

    Accent palette the row carries. The marquee stays bare, so this is the ink its items tint from rather than a surface; White is the neutral end, the page's own ink.

  • durationoptional
    number

    Seconds for one full loop.

  • reverseoptional
    boolean

    Scroll the other way.

  • pauseOnHoveroptional
    boolean

    Hold the loop while the pointer is over it.

  • fadeoptional
    boolean

    Fade the leading and trailing edges.

  • gapoptional
    number

    Space between items, in pixels.

  • repeatoptional
    number

    How many copies to render for a seamless continuous loop.

  • verticaloptional
    boolean

    Scroll vertically instead of horizontally.

  • classNameoptional
    string

    Extra classes merged onto the wrapper.

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousTilt card
NextNumber ticker