Marquee — Motion Kit

Preview

Motion Kit Web Components GSAP Lit Astro Registry shadcn ScrollTrigger

Infinite Loop Velocity Boost Reversed Any HTML Framework-agnostic

Scroll the page to see the marquee speed up. Content is slotted. Drop any HTML inside.

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/marquee.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/marquee.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/marquee.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/marquee.json

Usage

---
import "@/components/motion-kit/marquee-element.ts";
---

<motion-marquee gap="32" duration="10">
  <img src="/logo-a.svg" alt="A" />
  <img src="/logo-b.svg" alt="B" />
</motion-marquee>

import "@/components/motion-kit/marquee-element.ts";

export default function Page() {
  return (
    <motion-marquee gap="32" duration="10">
      <img src="/logo-a.svg" alt="A" />
      <img src="/logo-b.svg" alt="B" />
    </motion-marquee>
  );
}

<script setup>
import "@/components/motion-kit/marquee-element.ts";
</script>

<template>
  <motion-marquee gap="32" duration="10">
    <img src="/logo-a.svg" alt="A" />
    <img src="/logo-b.svg" alt="B" />
  </motion-marquee>
</template>

<script>
  import "@/components/motion-kit/marquee-element.ts";
</script>

<motion-marquee gap="32" duration="10">
  <img src="/logo-a.svg" alt="A" />
  <img src="/logo-b.svg" alt="B" />
</motion-marquee>

<script type="module" src="/components/motion-kit/marquee-element.js"></script>

<motion-marquee gap="32" duration="10">
  <img src="/logo-a.svg" alt="A" />
  <img src="/logo-b.svg" alt="B" />
</motion-marquee>

API Reference

Attribute	Type	Default
`gap`	`number`	`32`
`duration`	`number`	`5`
`velocity`	`number`	`0.5`
`repeat`	`number`	`3`
`reversed`	`boolean`	`false`