A looping image card carousel with 10 slots, 13 animations, and full timing & style controls. Perfect for showcases, heroes, and portfolios.
Made with Workshop
Build your own component with AI
LoopCycleCards is a lightweight, highly–tunable card rotator. It displays one image card at a time and cycles through your set with smooth, customizable transitions. Control the speed and rhythm, choose from multiple animation styles, and tailor the card size, rounding, and background to match any layout.
Shows one card at a time, automatically cycles through your images.
In / hold / out timeline gives you precise control over the cadence.
Supports shuffle order and pause on hover for user control.
Works great in fixed-size frames or responsive sections.
Choose one of these in the Animation control:Pop, Slide Left, Slide Up, Slide Down, Zoom, Rotate, Flip, Bounce, Elastic, Glitch, Fade, Spiral, Wave, Morph.
Images
Image 1 … Image 10 — up to 10 image slots.
Timing & Playback
Speed — global playback multiplier.
Delay Between — gap before starting the next card.
In Duration — time for the entrance animation.
Hold Duration — how long the card stays visible.
Out Duration — time for the exit animation.
Loop (Yes/No) — repeat the sequence.
Shuffle Order (Yes/No) — randomize the card order each cycle.
Pause on Hover (Yes/No) — stop cycling while hovered.
Appearance
Card Width — e.g., 360px.
Card Height — e.g., 480px.
Border Radius — e.g., 20px rounded corners.
Background — card background color (shown under images).
Animation — pick from the list above.
Drop-in simple: add images, pick an animation, done.
Art-direction friendly: fine-tune timing and rhythm for the mood you want.
Versatile: from product spotlights and testimonials to editorial features.
Performance-conscious: only one card animates at a time.
Homepage heroes and above-the-fold highlights
Case study covers / portfolio teasers
Product features or testimonials running in a loop
Event or announcement visuals with motion