5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:T77a,

Description

Kinetic Arc Gallery fans project cards diagonally across the frame, giving each position a composed vertical offset, rotation and depth. Choose one interaction model for the page—direct Drag, sticky Page Scroll, visible Arrows or a morphing Back/Next Cursor—while the active card settles squarely into focus.

Every image, number, title, alt text and project link is editable, with controls for card scale, spacing, spread, rotation, typography, overlays and motion.

Features

Up to 12 responsive project cards with image, number, title, alt text and safe link.
Source-derived linear fan positioning, depth order and cubic-bezier transition.
One exclusive Drag, Page Scroll, Arrows or Cursor navigation mode, plus keyboard accessibility.
Adjustable card width, aspect ratio, spacing and explicit number size.
Configurable horizontal/vertical spread, rotation, radius, shadow and overlay.
Clamped edges and selectable starting card.
Sticky first-to-last Page Scroll runway that never traps normal document scrolling.
Morphing Back/Next cursor with left/right click or tap navigation.
Empty and image-error states, reduced motion and static Canvas behavior.
Framer On Change and On Item events with no external runtime dependency.

Setup

Paste the Component URL into a Framer project.
Add project images, titles, numbers, alt text and optional links.
Choose Drag, Page Scroll, Arrows or Cursor, then tune Card, Arc, Typography and Motion controls.
Open Preview to test the chosen interaction in its intended page placement.
For Page Scroll, set Height to Auto/Fit Content and keep ancestor Overflow set to Clip or Visible.

59:[["$","$L5c",null,{"post":{"id":"01a05738-a3cc-762b-976b-b5aca61300c8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"242463b7-88fd-4d9e-aa36-95050ef77502","name":"Angelo Engelbrecht","slug":"angelo-engelbrecht","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/1jqq33by","followed":false,"followsYou":false},"media":[],"resources":[{"id":"g5T7ahzNuE8JWRda73zD","resolved":true,"title":"Kinetic Arc Gallery","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Description"}]},{"type":"paragraph","content":[{"type":"text","text":"Kinetic Arc Gallery fans project cards diagonally across the frame, giving each position a composed vertical offset, rotation and depth. Choose one interaction model for the page—direct Drag, sticky Page Scroll, visible Arrows or a morphing Back/Next Cursor—while the active card settles squarely into focus."}]},{"type":"paragraph","content":[{"type":"text","text":"Every image, number, title, alt text and project link is editable, with controls for card scale, spacing, spread, rotation, typography, overlays and motion."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 12 responsive project cards with image, number, title, alt text and safe link."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Source-derived linear fan positioning, depth order and cubic-bezier transition."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One exclusive Drag, Page Scroll, Arrows or Cursor navigation mode, plus keyboard accessibility."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card width, aspect ratio, spacing and explicit number size."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable horizontal/vertical spread, rotation, radius, shadow and overlay."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clamped edges and selectable starting card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sticky first-to-last Page Scroll runway that never traps normal document scrolling."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Morphing Back/Next cursor with left/right click or tap navigation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Empty and image-error states, reduced motion and static Canvas behavior."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer On Change and On Item events with no external runtime dependency."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setup"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste the Component URL into a Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add project images, titles, numbers, alt text and optional links."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose Drag, Page Scroll, Arrows or Cursor, then tune Card, Arc, Typography and Motion controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open Preview to test the chosen interaction in its intended page placement."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"For Page Scroll, set Height to Auto/Fit Content and keep ancestor Overflow set to Clip or Visible."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph"}]},"introduction":"Tactile Project Carousel","slug":"kinetic-arc-gallery","author":{"framerUserId":"242463b7-88fd-4d9e-aa36-95050ef77502","name":"Angelo Engelbrecht","slug":"angelo-engelbrecht","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/1jqq33by","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/01a05738-69f4-7738-8160-40b7d03f9d8b.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":817,"height":452}}],"post":null,"createdAt":"2026-08-31T09:48:44.365Z","updatedAt":"2026-09-01T08:10:53.181Z","publishedAt":"2026-08-31T09:48:44.362Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://best-fact-729234.framer.app/page-7","price":"5","paymentUrl":"https://arcengel.lemonsqueezy.com/checkout/buy/7fdcbca7-9f71-4343-8b19-8d85fbced8cf","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"p1l4pVkv4g4JQCfdEjr7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-31T09:48:44.876Z","updatedAt":"2026-08-31T09:48:44.876Z","reported":false}}],"$L5e"]

Suggested for you