5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T90a,

A single-card vertical image carousel that scrolls through your images one at a time — perfect for showcasing icons, logos, avatars, or any visual in a compact, eye-catching space.

Key Features & Capabilities

Infinite Loop — Scrolls continuously without visible reset; images cycle seamlessly forever
3D Drum Roll — Optional rotateX tilt + scale depth effect during each scroll step, powered by requestAnimationFrame for buttery 60fps
Shuffle Order — Randomize image sequence on each page load for a fresh, dynamic feel
Random Stagger — Configurable pause range (min/max) and initial delay create organic, non-robotic timing
Auto-Pause — IntersectionObserver stops animation when the card is off-screen, saving CPU
High Performance — Direct DOM updates via refs, CSS containment, GPU-composited transforms — zero React re-renders during animation
Customizable Card — Border radius, border color, background color, and image height all adjustable from the property panel

Best For

Client logo strips, partner showcases, "trusted by" sections, team avatars, tech-stack badges, product icons, and any compact area where you want to display multiple visuals in a single card.

How to Set Up

Drop the component onto your Framer canvas and resize to your desired card dimensions
Open the property panel and add your images under Images
Set Images Count to choose how many images appear per cycle (2–6)
Adjust Scroll Duration, Pause Min/Max, and Initial Delay Max to fine-tune the rhythm
Toggle Infinite Loop on for seamless continuous scrolling
Optionally enable 3D Effect and tweak Rotate X and Perspective for the drum-roll motion
Style the card with Border Radius, Border Color, and Background Color

Options

Created by AliThemes.com · Powered by Framer

5a:[["$","$L5d",null,{"post":{"id":"019d50e8-3dad-7285-9e11-bd67c87ec031","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8234746c-39b5-463f-a016-4d51108fe035","name":"Ali Themes","slug":"ali-themes","avatar":"https://framerusercontent.com/avatars/users/8234746c-39b5-463f-a016-4d51108fe035/n_TmMn5t4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"yEQsJWB6h8ubikaMoef6","resolved":true,"title":"Infinite Image Spin","body":"$5e","bodyJson":null,"introduction":"Vertical logo carousel with 3D effects","slug":"infinite-image-spin","author":{"framerUserId":"8234746c-39b5-463f-a016-4d51108fe035","name":"Ali Themes","slug":"ali-themes","avatar":"https://framerusercontent.com/avatars/users/8234746c-39b5-463f-a016-4d51108fe035/n_TmMn5t4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/yEQsJWB6h8ubikaMoef6/infinite-image-spin-PJLPihs5FbRk9JTDBWKaiSEp33Mxqk","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-18T01:56:23.965Z","updatedAt":"2026-04-02T15:51:26.356Z","publishedAt":"2026-04-03T01:14:50.669Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/InfiniteImageSpin-Ww78sN.js@5GYhZblnvEGsresusfLC","previewUrl":"https://infinite-image-spin.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"5GYhZblnvEGsresusfLC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":42,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-03T01:14:50.669Z","updatedAt":"2026-04-03T01:14:50.669Z","reported":false}}],"$L5f"]

Suggested for you