Content Display

Continuous Marquee

텍스트, 이미지, 비디오를 끊김 없이 흘려보낼 수 있는 마키 컴포넌트입니다.

Preview

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.
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.
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.
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.
Jane

@jane

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

@jenny

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

@james

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

@jane

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

@jenny

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

@james

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

@jane

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

@jenny

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

@james

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

@jane

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

@jenny

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

@james

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

content motion

Continuous Marquee

hover to pause the rows

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/marquee.json

Code

typescript
Copied
1import { Marquee } from "@/components/marquee"23export default function Example() {4  return (5    <Marquee>6      <span>Next.js</span>7      <span>React</span>8      <span>TypeScript</span>9      <span>Tailwind CSS</span>10    </Marquee>11  )12}

Props

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
reversebooleanfalseWhether to reverse the direction.
pauseOnHoverbooleanfalseWhether to pause on hover.
verticalbooleanfalseWhether to animate vertically.
childrenReact.ReactNode-Content rendered inside the component.
repeatnumber4How many times to repeat the content.

Reference

Reference Continuous Marquee