Marquee Along SVG Path — 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.

A ribbon of colourful tiles snaking along a looping curve across the frame

Prompt that renders it frame-exact

Use Marquee Along SVG Path from Fancy Components (https://www.fancycomponents.dev/docs/components/blocks/marquee-along-svg-path, MIT). Install with npx shadcn add @fancy/marquee-along-svg-path with the @fancy registry in components.json. Send logos, product thumbnails, stickers or words along a custom curve (a loop, an S, a spiral) as a playful transition or a busy background layer. Set path, viewBox, baseVelocity, direction, repeat and enableRollingZIndex. Motion's useAnimationFrame advances the offset. Set the offset to (frame / fps) * baseVelocity, wrapped to the path length, and turn off draggable, slowdownOnHover and useScrollVelocity.

Used in

More galleries & carousels