5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T758,

Create engaging visual sections with Hanging Cards Gallery, a premium Framer Code Component that displays content as cards suspended from a single responsive curved wire.

Each card hangs naturally using a connecting cord and customizable pin, creating a clean presentation for portfolios, products, education content, services, galleries, and landing pages.

The component is designed specifically for Framer Marketplace standards. Swing animation runs only in Preview and on published websites while remaining disabled inside the Framer Canvas, exports, and thumbnails for a distraction-free editing experience.

Every part of the component is editable through Framer Properties. Change images, titles, descriptions, colors, spacing, card sizing, rotation, animation settings, and more without touching the code.

Lightweight, responsive, and easy to customize, Hanging Cards Gallery fits seamlessly into modern websites and creative projects.

Features

Responsive layout for all screen sizes
Full-width adaptive curved hanging wire
Realistic hanging cords and customizable pins
Smooth linear swing animation
Animation automatically disabled in Framer Canvas, exports, and thumbnails
Editable images, titles, descriptions, pin colors, and card rotation
Adjustable card width, corner radius, spacing, and colors
Editable wire color and thickness
Animation toggle
Adjustable animation speed
Adjustable swing amount
Built-in fallback artwork when no image is provided
No external libraries or dependencies
Lightweight and optimized
Easy to customize with Framer Properties

5b:[["$","$L5e",null,{"post":{"id":"019f53bd-dfbd-72a1-8568-639a65fa655f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a85a2895-554b-4138-ab1c-49ab1558183a","name":"Noor Afzal","slug":"noor-afzal","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a85a2895-554b-4138-ab1c-49ab1558183a/ph2domt1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cJtY5PMNmiZZkCjxEFAT","resolved":true,"title":"Hanging Cards","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Create engaging visual sections with "},{"type":"text","text":"Hanging Cards Gallery","marks":[{"type":"bold"}]},{"type":"text","text":", a premium Framer Code Component that displays content as cards suspended from a single responsive curved wire."}]},{"type":"paragraph","content":[{"type":"text","text":"Each card hangs naturally using a connecting cord and customizable pin, creating a clean presentation for portfolios, products, education content, services, galleries, and landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"The component is designed specifically for Framer Marketplace standards. Swing animation runs only in Preview and on published websites while remaining disabled inside the Framer Canvas, exports, and thumbnails for a distraction-free editing experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Every part of the component is editable through Framer Properties. Change images, titles, descriptions, colors, spacing, card sizing, rotation, animation settings, and more without touching the code."}]},{"type":"paragraph","content":[{"type":"text","text":"Lightweight, responsive, and easy to customize, Hanging Cards Gallery fits seamlessly into modern websites and creative projects. "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout for all screen sizes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-width adaptive curved hanging wire"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Realistic hanging cords and customizable pins"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth linear swing animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation automatically disabled in Framer Canvas, exports, and thumbnails"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable images, titles, descriptions, pin colors, and card rotation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card width, corner radius, spacing, and colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable wire color and thickness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable swing amount"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in fallback artwork when no image is provided"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external libraries or dependencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight and optimized"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to customize with Framer Properties"}]}]}]}]},"introduction":"Features Responsive layout for all","slug":"hanging-cards","author":{"framerUserId":"a85a2895-554b-4138-ab1c-49ab1558183a","name":"Noor Afzal","slug":"noor-afzal","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a85a2895-554b-4138-ab1c-49ab1558183a/ph2domt1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a85a2895-554b-4138-ab1c-49ab1558183a/019f53bd-c27b-736b-b14e-ae2b4319cb33.png","metadata":{"tint":"hsl(60 53% 39%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-07-12T00:33:00.057Z","updatedAt":"2026-07-12T00:33:00.057Z","publishedAt":"2026-07-12T00:33:00.054Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stale-onboarding-710692.framer.app/","price":"10","paymentUrl":"https://noordesign.lemonsqueezy.com/checkout/buy/580e1926-446a-47cc-b301-90b5cd37f201","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"tgjLqNmDuwdewuz5Brvz"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-12T00:33:00.349Z","updatedAt":"2026-07-12T00:33:00.349Z","reported":false}}],"$L60"]

Suggested for you