Overview
Components
Text Animations
Text Marquee
Animated text marquee component with vertical scrolling.
sv-animations/
Magic
Spell
Aceternity
Luxe
Indie
Motion
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/text-marquee.json
Copy the Source Code
Copy and paste the following code into your project:
text-marquee.svelte
index.ts
Folder Structure
Folder Structure
Props
| Name | Type | Default | Description |
|---|---|---|---|
items | T[] | required | The ordered list of items to animate through vertically. |
children | Snippet<[T, number]> | required | Snippet used to render each animated row with the current item and index. |
prefix | Snippet | | Optional snippet rendered once before the animated viewport. |
speed | number | 1 | Scales the total loop duration; larger values make the marquee cycle more slowly. |
height | number | 200 | Sets the visible viewport height in pixels. |
itemHeight | number | 40 | Sets the height of each animated row in pixels. |
class | string | | Custom classes applied to the root wrapper. |
style | string | | Inline styles forwarded to the root wrapper. |