5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0lmmu21lg5-zj.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7c8,

Bring raw tactile energy and micro-delight to your digital portfolios and landing pages. Kinetic Stack is an advanced, production-ready code component that transforms standard static button menus into a living, physics-infused environment.

Inspired by high-end motion design aesthetics, this component maps your cursor tracking data in real time, allowing custom canvas layers to gracefully evade or magnetize to the mouse while organically transferring kinetic velocity to neighboring layers. No overlapping, no complex keyframing—just pure, dynamic physics out of the box.

🚀 Key Features

Two Interactive Modes: Switch instantly between Repel (Evade) for an elastic UI that playfully shies away from the cursor, or Attract (Magnet) to draw elements elegantly toward the mouse track.
Dual-Orientation Support: Works flawlessly as a Vertical feature stack or a Horizontal top-navigation menu. The collision physics automatically calculate and adjust vectors based on your layout axis.
Infinite Slot Customization: Built utilizing a native Framer Array control wrapper. Add, remove, or drag-and-drop to reorder an unlimited number of custom frames directly from your right-hand settings panel.
Unified Z-Index Mechanics: Elements are hardcoded into a shared layout plane. They physically collide and push adjacent components out of the way without clipping or overlapping, ensuring flawless presentation.
Total Visual Autonomy: Because you link native Framer frames directly into the stack, you retain 100% control over typography, individual border radiuses, custom background states, and canvas hover effects.

5a:[["$","$L5d",null,{"post":{"id":"019f1d47-779c-7340-b2c1-adf4b90749ca","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"db1300eb-efc4-4eb3-abf2-5ea3b32aa1c4","name":"Balogun Ilias","slug":"balogun-ilias","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"5G2DZMrDnL6Hpide3SnS","resolved":true,"title":"Interactive Layout","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring raw tactile energy and micro-delight to your digital portfolios and landing pages. Kinetic Stack is an advanced, production-ready code component that transforms standard static button menus into a living, physics-infused environment."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Inspired by high-end motion design aesthetics, this component maps your cursor tracking data in real time, allowing custom canvas layers to gracefully evade or magnetize to the mouse while organically transferring kinetic velocity to neighboring layers. No overlapping, no complex keyframing—just pure, dynamic physics out of the box."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Key Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two Interactive Modes:","marks":[{"type":"bold"}]},{"type":"text","text":" Switch instantly between "},{"type":"text","text":"Repel (Evade)","marks":[{"type":"bold"}]},{"type":"text","text":" for an elastic UI that playfully shies away from the cursor, or "},{"type":"text","text":"Attract (Magnet)","marks":[{"type":"bold"}]},{"type":"text","text":" to draw elements elegantly toward the mouse track."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual-Orientation Support:","marks":[{"type":"bold"}]},{"type":"text","text":" Works flawlessly as a "},{"type":"text","text":"Vertical","marks":[{"type":"bold"}]},{"type":"text","text":" feature stack or a "},{"type":"text","text":"Horizontal","marks":[{"type":"bold"}]},{"type":"text","text":" top-navigation menu. The collision physics automatically calculate and adjust vectors based on your layout axis."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Infinite Slot Customization:","marks":[{"type":"bold"}]},{"type":"text","text":" Built utilizing a native Framer "},{"type":"text","text":"Array","marks":[{"type":"code"}]},{"type":"text","text":" control wrapper. Add, remove, or drag-and-drop to reorder an unlimited number of custom frames directly from your right-hand settings panel."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unified Z-Index Mechanics:","marks":[{"type":"bold"}]},{"type":"text","text":" Elements are hardcoded into a shared layout plane. They physically collide and push adjacent components out of the way without clipping or overlapping, ensuring flawless presentation."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Total Visual Autonomy:","marks":[{"type":"bold"}]},{"type":"text","text":" Because you link native Framer frames directly into the stack, you retain 100% control over typography, individual border radiuses, custom background states, and canvas hover effects."}]}]}]}]},"introduction":"Physics-infused layout component","slug":"interactive-layout","author":{"framerUserId":"db1300eb-efc4-4eb3-abf2-5ea3b32aa1c4","name":"Balogun Ilias","slug":"balogun-ilias","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/db1300eb-efc4-4eb3-abf2-5ea3b32aa1c4/x26lw0ik","metadata":{"tint":{"h":40,"s":25,"l":31},"width":2110,"height":1213}}],"post":null,"createdAt":"2026-07-01T10:44:10.732Z","updatedAt":"2026-09-06T07:44:10.423Z","publishedAt":"2026-07-01T10:44:10.729Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Magnetic-playful-button-bvkUGv.js@XJGyeuMLEfzh3HFe97K2","previewUrl":"https://drab-brand-127508.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"XJGyeuMLEfzh3HFe97K2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":68,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-01T10:44:10.781Z","updatedAt":"2026-07-01T10:44:10.781Z","reported":false}}],"$L5f"]

Suggested for you