51:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:Tce6,

Full Description:

FlowSteps is a step-based carousel component for Framer that creates engaging, animated presentations of sequential content. Display processes, features, testimonials, or onboarding steps with elegant stacked card animations and complete design control.

Perfect for product tours, feature highlights, onboarding flows, and storytelling experiences with both manual navigation and automatic cycling.

Instructions:

Copy and paste FlowSteps into your Framer project
Add content using the Steps control (title, description, optional image)
Customize appearance: dimensions, radius, shadow, transitions, padding, fonts, colors
Enable Autoplay for automatic progression
Toggle Pause on Hover for user control

How it Works:

Steps Array: Add unlimited steps displayed as stacked cards
3D Stack Effect: Background cards scale and dim for depth
Navigation: Arrow buttons or keyboard arrows (left/right)
Autoplay Mode: Auto-cycles through steps at set intervals
Responsive Images: Full background image support with positioning
Performance: Only visible cards render and animate

Features:

Step-based navigation for tutorials and onboarding
Smooth card animations with customizable speed
Autoplay with adjustable intervals
3D layered stack effect for visual depth
Framer font picker integration
Keyboard accessible navigation
No code required—fully configurable in property panel

Properties:

Content: Steps array (title, description, image) Card Styling: Width, height, radius, shadow Animation: Transition speed, dim scale, dim opacity Layout: Arrows gap, padding (top/right/bottom/left) Typography: Font family, text color, title/desc sizes Autoplay: Enable/disable, interval, pause on hover

Use Cases:

Onboarding flows for product walkthroughs
Process explanations and workflows
Feature showcases with visuals
Testimonial carousels and case studies
Product tours and storytelling
Educational tutorials and courses
Portfolio project presentations
Service offerings and packages

Perfect For:

SaaS websites • Landing pages • Educational platforms • Agency portfolios • E-commerce sites • App marketing • Course platforms

Details:

Built with React and Framer Motion for smooth 60fps animations. Fully responsive, keyboard accessible, and performance-optimized. No coding required—configure everything through Framer's property panel.

Support:

Have questions or need custom components? Reach out at buildwithmohanhq@gmail.com

Made with ❤️ by Mohan

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-9e412565-9494-492c-be0a-54ddb43a4f58-all:/unified/creator/9e412565-9494-492c-be0a-54ddb43a4f58/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:9e412565-9494-492c-be0a-54ddb43a4f58:/unified/posts/?creator=9e412565-9494-492c-be0a-54ddb43a4f58&with=reposts":[{"data":[{"id":"019bdc7c-1491-7c7f-a1bd-7880b50aa4d9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"9e412565-9494-492c-be0a-54ddb43a4f58","name":"Mohan","slug":"buildwithmohanhq","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/431169/avatar-ckGy3TUUxHSpCQsmXWMFiZGZyJsvHJ.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"vIxlxxNrD7yGuw835w7K","resolved":true,"title":"Step Carousel","body":"$52","bodyJson":null,"introduction":"Animated step-based carousel component","slug":"stepcarousel","author":{"framerUserId":"9e412565-9494-492c-be0a-54ddb43a4f58","name":"Mohan","slug":"buildwithmohanhq","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/431169/avatar-ckGy3TUUxHSpCQsmXWMFiZGZyJsvHJ.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vIxlxxNrD7yGuw835w7K/stepcarousel-gvYl5EmEspOhhyMBatCj3mipW6mYwu","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-02T18:55:24.686Z","updatedAt":"2026-01-23T13:43:35.648Z","publishedAt":"2026-01-20T17:37:57.905Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Step-card-1-1-giYB.js@sX2XebwG0v3tLohNADfe","previewUrl":"https://flowsteps.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"sX2XebwG0v3tLohNADfe","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":33,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-20T17:37:57.905Z","updatedAt":"2026-01-20T17:37:57.905Z"},{"id":"019b4c13-4d68-73cc-8bbd-17a178125d4b","title":null,"body":"

Excited to share the website I designed and developed for Escape Academy — a modern learning platform focused on practical, future-ready education across AI, technology, design, and entrepreneurship. The experience was built around clear content discovery, engaging visuals, and a simple user journey that helps learners quickly understand what they can learn and how they can get started. The goal was to create a digital experience that feels modern, approachable, and aligned with the evolving world of AI-powered education.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Excited to share the website I designed and developed for Escape Academy — a modern learning platform focused on practical, future-ready education across AI, technology, design, and entrepreneurship. The experience was built around clear content discovery, engaging visuals, and a simple user journey that helps learners quickly understand what they can learn and how they can get started. The goal was to create a digital experience that feels modern, approachable, and aligned with the evolving world of AI-powered education.","marks":[{"type":"bold"}]}]}]},"author":{"framerUserId":"9e412565-9494-492c-be0a-54ddb43a4f58","name":"Mohan","slug":"buildwithmohanhq","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/431169/avatar-ckGy3TUUxHSpCQsmXWMFiZGZyJsvHJ.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"11096","resolved":true,"title":"Escape academy","body":"

Escape Academy is a modern online learning platform focused on helping aspiring entrepreneurs, creators, and professionals build practical, future-ready skills. The website brings together courses across dropshipping, e-commerce, UI/UX design, digital marketing, advertising, and emerging AI tools, with a strong focus on accessible and practical education. Designed to make learning more engaging and approachable, the experience combines bold visuals, clear course discovery, structured content, and conversion-focused interactions. The platform also highlights regional-language learning, industry expertise, real-world applications, and a growing community of learners. The website was designed to reflect Escape Academy’s ambitious, energetic brand while creating a seamless journey from discovering a skill to exploring and enrolling in a course. Escape Academy

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Escape Academy is a modern online learning platform focused on helping aspiring entrepreneurs, creators, and professionals build practical, future-ready skills. The website brings together courses across dropshipping, e-commerce, UI/UX design, digital marketing, advertising, and emerging AI tools, with a strong focus on accessible and practical education. Designed to make learning more engaging and approachable, the experience combines bold visuals, clear course discovery, structured content, and conversion-focused interactions. The platform also highlights regional-language learning, industry expertise, real-world applications, and a growing community of learners. The website was designed to reflect Escape Academy’s ambitious, energetic brand while creating a seamless journey from discovering a skill to exploring and enrolling in a course.","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Escape Academy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://escapeacademy.in/?utm_source=chatgpt.com","target":"_blank"}}]}]}]},"introduction":"Escape Academy is an upskilling platform offering courses in dropshipping, UI/UX, and AI, built with Framer and focused on clarity, responsiveness, and easy enrollment.","slug":"escape-academy","author":{"framerUserId":"9e412565-9494-492c-be0a-54ddb43a4f58","name":"Mohan","slug":"buildwithmohanhq","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/431169/avatar-ckGy3TUUxHSpCQsmXWMFiZGZyJsvHJ.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9e412565-9494-492c-be0a-54ddb43a4f58/01a10122-593d-7525-b8c5-85fadfc45ecc.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2133}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9e412565-9494-492c-be0a-54ddb43a4f58/01a10122-1214-720f-a80b-72d2396ea212.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":3023}}],"post":null,"createdAt":"2025-12-23T16:38:12.070Z","updatedAt":"2026-10-03T09:43:05.598Z","publishedAt":"2025-12-23T16:38:12.072Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://escapeacademy.in/","categories":[{"id":"4deaf317-a648-4f8b-ae2a-f9a4cf1a35da","name":"Education","slug":"education"},{"id":"0539c25a-136d-4f8b-a2e7-342a21b7d607","name":"AI","slug":"ai"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-10-03T09:42:49.655Z","createdAt":"2025-12-23T16:38:12.072Z","updatedAt":"2026-10-03T09:42:49.655Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]