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

Scattered Media Cards

Interactive draggable media cards scattered across your canvas. Drop photos and videos onto a free-form layout where visitors can pick up, move, and spin cards like playing cards on a table.

✨ Features

Drag & Drop — Cards can be freely dragged anywhere within the container
Edge Spin — Grab a card from its edges to rotate it interactively (optional)
Media Support — Each card supports images (JPG, PNG, GIF, WebP) and videos (MP4, WebM, MOV)
Per-Card Links — Attach a URL to any card — clicking navigates to that link
Per-Card Sizing — Make individual cards larger or smaller independently
Per-Card Rotation — Set a fixed rotation angle for each card
Random Scatter — Cards spread automatically with randomized positions and rotations
Configurable Shadows — Full shadow control (color, blur, offset) matching your design

🎛️ Controls

Cards (Per-Card Settings)

Media — Upload an image or video file for this card
Link — URL to navigate to when the card is clicked
Size — Scale of this specific card (30%–300%, default 100%)
Rotation — Fixed rotation angle for this card (0°–360°)

Container

Container Width — Width of the area where cards are scattered (300–1600px)
Container Height — Height of the area where cards are scattered (200–1200px)

Card Defaults

Card Width — Base width for all cards (80–500px)
Card Height — Base height for all cards (80–600px)
Corner Radius — Border radius of the cards (0–60px)

Scatter

Scatter — How randomly cards are spread out (0% = grid, 100% = fully random)
Random Rotation — Range of random rotation applied to cards (0°–180°)

Interaction

Enable Spin — When ON, grabbing a card from its edges lets you rotate it by moving the cursor. Grabbing from the center still moves the card normally
Spin Edge — How large the edge zone is for spin detection (10%–50%). Only visible when Enable Spin is ON
Elasticity — How much cards can be dragged beyond the container bounds before bouncing back (0 = strict, 1 = loose)
Momentum — When ON, cards keep sliding after you release them based on drag velocity
New Tab — When ON, card links open in a new browser tab instead of the current one

Shadow

Shadow Color — Color of the card shadow
Shadow Blur — Blur radius of the shadow (0–60px)
Shadow X — Horizontal shadow offset (-40 to 40px)
Shadow Y — Vertical shadow offset (-40 to 40px)

🎮 How It Works

Add cards using the Cards array in the properties panel
Upload media (photo or video) to each card
Optionally add links — visitors will navigate there on click
Adjust scatter to control how randomly cards are positioned
Enable Spin to let visitors rotate cards by grabbing the edges
Cards are fully draggable — visitors can rearrange them freely on the page

Tip: Set Scatter to 0% for a clean grid layout, or crank it up to 100% for a messy, organic look like cards tossed on a table.

Refund Policy

Digital Products (Framer Components)

All purchases of Framer components are final. Due to the digital nature of these products and immediate access upon purchase, no refunds, returns, or exchanges are accepted once a component has been purchased and delivered.

ExceptionsRefunds may be considered only in the following limited cases:

The component is demonstrably defective and does not function as described.
You are unable to access the purchased component due to a technical issue on our side.

In such cases, you must contact support within 7 days of purchase and provide clear details of the issue. If verified, we may offer a fix or replacement. Refunds are not guaranteed.

Non-Refundable Cases

Change of mind.
Lack of compatibility with your project, tools, or third-party plugins.
Failure to read the product description or requirements before purchase.

By completing a purchase, you acknowledge and agree to this Refund Policy.

59:[["$","$L5c",null,{"post":{"id":"019cbdec-a50f-7ff7-a37e-a3ad5efcae29","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6c2d6be1-4d4e-4662-a6e0-08d04dd7ac12","name":"Sami Mansouri","slug":"hoummas","avatar":"https://framerusercontent.com/avatars/users/6c2d6be1-4d4e-4662-a6e0-08d04dd7ac12/mR9yzLrX_","followed":false,"followsYou":false},"media":[],"resources":[{"id":"yXLtg9e22GHH7pOrMHwX","resolved":true,"title":"Cards","body":"$5d","bodyJson":null,"introduction":"Turn the cards by rotating the edge","slug":"scatteredmediacards","author":{"framerUserId":"6c2d6be1-4d4e-4662-a6e0-08d04dd7ac12","name":"Sami Mansouri","slug":"hoummas","avatar":"https://framerusercontent.com/avatars/users/6c2d6be1-4d4e-4662-a6e0-08d04dd7ac12/mR9yzLrX_","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/yXLtg9e22GHH7pOrMHwX/scatteredmediacards-ft9V1v9tXxQCaDChammzGDilxfB3UY","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-27T12:29:35.228Z","updatedAt":"2026-03-08T20:00:35.207Z","publishedAt":"2026-03-05T12:15:28.527Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scatteredmediacards.framer.website/","price":"5","paymentUrl":"https://genalore.lemonsqueezy.com/checkout/buy/2df479a3-f5da-4063-a17c-6b33034780bc","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"KGxhq5frvdynzSecvqnm","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-05T12:15:28.527Z","updatedAt":"2026-03-05T12:15:28.527Z","reported":false}}],"$L5e"]

Suggested for you