# Simple Marquee — component for galleries & carousels (react)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Rows of gradient tiles scrolling sideways at different speeds under a serif title

- **Install:** `npx shadcn add @fancy/simple-marquee`
- **Registry:** fancy · **Framework:** react · **License:** MIT
- **Docs and preview:** https://www.fancycomponents.dev/docs/components/blocks/simple-marquee
- **Source:** https://github.com/danielpetho/fancy/blob/main/src/fancy/components/blocks/simple-marquee.tsx
- **Example:** https://skills.varg.ai/previews/lib-fancy-simple-marquee.mp4?v=26524 (Captured from the library’s own demo page (Fancy Components))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Use Simple Marquee from Fancy Components (https://www.fancycomponents.dev/docs/components/blocks/simple-marquee, MIT). Install with `npx shadcn add @fancy/simple-marquee` after adding the @fancy registry to components.json. Use it for logo walls, a strip of product shots or a headline ticker, stacking two or three rows in opposite directions. Set direction ('left', 'right', 'up' or 'down'), baseVelocity, repeat and an easing for the speed curve. Motion's useAnimationFrame moves it. Compute the offset from (frame / fps) * baseVelocity, wrapped to one repeat width, and turn off draggable, slowdownOnHover and useScrollVelocity.

## Used in

- [Faceless narrated video](https://skills.varg.ai/video/faceless-explainer.md)
- [Top-N listicle](https://skills.varg.ai/video/listicle.md)
- [Meme format](https://skills.varg.ai/video/meme.md)
- [News explainer](https://skills.varg.ai/video/news-explainer.md)
- [Year in review / Wrapped](https://skills.varg.ai/video/wrapped.md)
- [Scores & match recap](https://skills.varg.ai/video/sports-recap.md)
- [Flashcards & language drills](https://skills.varg.ai/video/flashcards.md)
- [History timeline](https://skills.varg.ai/video/history-timeline.md)

## More galleries & carousels

- [Stamp Carousel](https://skills.varg.ai/component/varg.stamp-carousel.md) — `git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/stamp-carousel && bash make.command`
- [Circle Carousel 1](https://skills.varg.ai/component/hf.carousel-circle-1.md) — `npx hyperframes add carousel-circle-1`
- [Circle Carousel 2](https://skills.varg.ai/component/hf.carousel-circle-2.md) — `npx hyperframes add carousel-circle-2`
- [Circle Carousel 3](https://skills.varg.ai/component/hf.carousel-circle-3.md) — `npx hyperframes add carousel-circle-3`
- [Circle Carousel 4](https://skills.varg.ai/component/hf.carousel-circle-4.md) — `npx hyperframes add carousel-circle-4`
- [Circle Carousel 5](https://skills.varg.ai/component/hf.carousel-circle-5.md) — `npx hyperframes add carousel-circle-5`