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"] 5f:I[539959,["/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"],"CommentSection"] 5e:T657,

Showcase your agency’s process with this interactive 3-step progress card component. Designed for design and development studios, it visually represents your workflow from discovery to launch.

On desktop and tablet, three horizontal cards animate sequentially with a vertical progress bar. As each card completes, the next card automatically expands while the previous collapses, creating a smooth, story-like transition through your process.

Each card includes:

Step number (01, 02, 03)
Card title
Short description text
Optional tag or subtext
Image placeholder (project preview, mockup, or icon)

Once the third card completes, the loop restarts seamlessly from the first step.

On mobile, all three cards are displayed vertically, fully expanded, and without progress animation for an easy scroll experience.

Design or development agency process section
Project timeline or workflow showcase
Product or service journey visualization

Customizable Controls:

Card titles, descriptions, and images
Progress color and animation speed
Loop toggle
Text and background colors
Layout spacing and radius

Responsive Behavior:

Desktop & Tablet: 3 cards aligned horizontally with auto progress and expansion
Mobile: Cards stacked vertically, fully expanded

5a:[["$","$L5d",null,{"post":{"id":"0199c75b-c4c1-7b97-bdbd-250b2ea17830","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"eab89c57-f18e-429b-be30-4d49be42f4e5","name":"RaDe Creatives","slug":"ram-kumar-s","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/eab89c57-f18e-429b-be30-4d49be42f4e5/zgehbbjl","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"hbsXU3UvCVlr4Ur5MvSe","resolved":true,"title":"Progress Cards","body":"$5e","bodyJson":null,"introduction":"","slug":"progress-cards","author":{"framerUserId":"eab89c57-f18e-429b-be30-4d49be42f4e5","name":"RaDe Creatives","slug":"ram-kumar-s","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/eab89c57-f18e-429b-be30-4d49be42f4e5/zgehbbjl","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/hbsXU3UvCVlr4Ur5MvSe/progress-cards-W4UMEzA01HK6JPNuWPL9IdKGiK7EBI","metadata":{"tint":{"h":60,"s":17,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T09:40:32.883Z","updatedAt":"2025-10-09T05:09:06.436Z","publishedAt":"2025-10-09T05:05:04.193Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/CardShowcase-3qxj.js@1dwe9Z9NXC9obVzYe7mU","previewUrl":"https://cardexpandcoll.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"1dwe9Z9NXC9obVzYe7mU","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":241,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-09T05:05:04.193Z","updatedAt":"2025-10-09T05:05:04.193Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"0199c75b-c4c1-7b97-bdbd-250b2ea17830"},"postId":"0199c75b-c4c1-7b97-bdbd-250b2ea17830","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you