Marquee — Motion Blocks

Preview

Motion Blocks 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 motion-blocks add marquee

npx motion-blocks add marquee

bunx --bun motion-blocks add marquee

yarn dlx motion-blocks add marquee

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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`