Infinite Slider — 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.mdto its path. Before generating anything, show the person the options on the use-case page.
A row of logos glides sideways forever in a seamless loop
- Install:
npx motion-primitives@latest add infinite-slider - Registry: motion-primitives · Framework: react · License: MIT
- Docs and preview: https://motion-primitives.com/docs/infinite-slider
- Source: https://github.com/ibelick/motion-primitives/blob/main/components/core/infinite-slider.tsx
- Example: https://skills.varg.ai/previews/lib-motion-primitives-infinite-slider.mp4?v=33005 (Captured from the library’s own demo page (Motion Primitives))
- 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
Run a strip of client logos or product thumbnails across the frame with Motion Primitives' Infinite Slider (https://motion-primitives.com/docs/infinite-slider, MIT), as a band in the lower third or behind a title. Install with npx motion-primitives@latest add infinite-slider. It measures the content and animates translateX with Motion's animate() on repeat, so in Remotion set translateX to -((frame / fps × speed) mod contentWidth) after measuring once, and in HyperFrames loop the same tween on the paused timeline. Set gap, speed, direction (horizontal or vertical) and reverse, and leave speedOnHover off.
Used in
- Faceless narrated video
- Top-N listicle
- Meme format
- News explainer
- Year in review / Wrapped
- Scores & match recap
- Flashcards & language drills
- History timeline
More galleries & carousels
- Stamp Carousel —
git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/stamp-carousel && bash make.command - Circle Carousel 1 —
npx hyperframes add carousel-circle-1 - Circle Carousel 2 —
npx hyperframes add carousel-circle-2 - Circle Carousel 3 —
npx hyperframes add carousel-circle-3 - Circle Carousel 4 —
npx hyperframes add carousel-circle-4 - Circle Carousel 5 —
npx hyperframes add carousel-circle-5