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-blog.vercel.app/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

className

Type
string
Default
-
Description
Additional classes merged onto the component.

reverse

Type
boolean
Default
false
Description
Whether to reverse the direction.

pauseOnHover

Type
boolean
Default
false
Description
Whether to pause on hover.

vertical

Type
boolean
Default
false
Description
Whether to animate vertically.

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

repeat

Type
number
Default
4
Description
How many times to repeat the content.

Reference

Reference Continuous Marquee