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:T949,

FluxFlow 3D is a next-generation scroll-driven carousel engineered for cinematic impact. Designed to solve the common "ghosting" and layering bugs found in standard 3D carousels, FluxFlow uses a proprietary dynamic Z-Index engine to ensure your center content stays perfectly crisp and layered correctly across all browsers. Whether you're building a portfolio or a high-end product showcase, FluxFlow brings spatial depth to your Framer designs without writing a single line of code.✨ Key Features:

Dynamic Z-Index Engine: Mathematically guarantees the center card remains the primary focal point, eliminating the "overlap bleed" common in 3D carousels.
Infinite & Finite Modes: Choose between a seamless infinite loop or a controlled finite sequence that stops exactly on your last item.
Master 3D Axis Control: Flip the entire carousel from Horizontal (Left/Right) to Vertical (Top/Bottom) with one toggle.
Dual-Layer Rendering: Separates 3D spatial logic from visual effects, ensuring ultra-smooth performance even when using heavy blurs and tilts.
God-Mode Customization: Full granular control over Scale, Blur, and Opacity for Center, Side, and Edge states.
Zero-Code Spatial Math: Fine-tune your 3D tilt, Z-depth push, and perspective distance through an intuitive, folder-based property panel.

🛠 How to Use:

Drag the component onto your page.
Set Width to 100% and Height to Fit Content.
Link your custom elements (images, cards, frames) into the Carousel Items array.
Use the Layout folder to define your axis, and the Animation Effects folders to tweak your blur, scale, and tilt to match your brand aesthetic.

⚙ Pro-Tip: For the best performance, ensure your linked items have a solid background fill (not transparent) to take full advantage of the engine's built-in anti-ghosting technology.

5a:[["$","$L5d",null,{"post":{"id":"019f2174-c352-7769-b9d5-053b918f80bf","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3a7c6771-986f-47a0-b563-a6dca8dcf65f","name":"Surp Shahid","slug":"surp-shahid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3a7c6771-986f-47a0-b563-a6dca8dcf65f/lavtzcqn","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qyYsTT6w0snwrD4BbYrU","resolved":true,"title":"FluxFlow 3D","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FluxFlow 3D is a next-generation scroll-driven carousel engineered for cinematic impact. Designed to solve the common \"ghosting\" and layering bugs found in standard 3D carousels, FluxFlow uses a proprietary dynamic Z-Index engine to ensure your center content stays perfectly crisp and layered correctly across all browsers. Whether you're building a portfolio or a high-end product showcase, FluxFlow brings spatial depth to your Framer designs without writing a single line of code."},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Key Features:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic Z-Index Engine:","marks":[{"type":"bold"}]},{"type":"text","text":" Mathematically guarantees the center card remains the primary focal point, eliminating the \"overlap bleed\" common in 3D carousels."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Infinite & Finite Modes:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose between a seamless infinite loop or a controlled finite sequence that stops exactly on your last item."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Master 3D Axis Control:","marks":[{"type":"bold"}]},{"type":"text","text":" Flip the entire carousel from Horizontal (Left/Right) to Vertical (Top/Bottom) with one toggle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual-Layer Rendering:","marks":[{"type":"bold"}]},{"type":"text","text":" Separates 3D spatial logic from visual effects, ensuring ultra-smooth performance even when using heavy blurs and tilts."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"God-Mode Customization:","marks":[{"type":"bold"}]},{"type":"text","text":" Full granular control over Scale, Blur, and Opacity for Center, Side, and Edge states."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero-Code Spatial Math:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune your 3D tilt, Z-depth push, and perspective distance through an intuitive, folder-based property panel."}]}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"hammer_and_wrench","emoji":"🛠"}},{"type":"text","text":" How to Use:"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the component onto your page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Width to "},{"type":"text","text":"100%","marks":[{"type":"bold"}]},{"type":"text","text":" and Height to "},{"type":"text","text":"Fit Content","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Link your custom elements (images, cards, frames) into the "},{"type":"text","text":"Carousel Items","marks":[{"type":"bold"}]},{"type":"text","text":" array."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use the "},{"type":"text","text":"Layout","marks":[{"type":"bold"}]},{"type":"text","text":" folder to define your axis, and the "},{"type":"text","text":"Animation Effects","marks":[{"type":"bold"}]},{"type":"text","text":" folders to tweak your blur, scale, and tilt to match your brand aesthetic."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"gear","emoji":"⚙"}},{"type":"text","text":" Pro-Tip: For the best performance, ensure your linked items have a solid background fill (not transparent) to take full advantage of the engine's built-in anti-ghosting technology."}]}]},"introduction":"Infinite 3D scroll engine","slug":"fluxflow-3d","author":{"framerUserId":"3a7c6771-986f-47a0-b563-a6dca8dcf65f","name":"Surp Shahid","slug":"surp-shahid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3a7c6771-986f-47a0-b563-a6dca8dcf65f/lavtzcqn","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3a7c6771-986f-47a0-b563-a6dca8dcf65f/7skay0d5","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-02T06:12:08.090Z","updatedAt":"2026-07-02T06:12:08.090Z","publishedAt":"2026-07-02T06:12:08.086Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/FluxFlow-3D-c1NeZh.js@ZUKruWBPhI2HyeCqIyCy","previewUrl":"https://funny-clarity-501702.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"ZUKruWBPhI2HyeCqIyCy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-02T06:12:08.146Z","updatedAt":"2026-07-02T06:12:08.146Z","reported":false}}],"$L5f"]

Suggested for you