62:I[267044,["/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/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T972,

Overview

Draggable List lets you create beautiful, interactive lists where users can drag items to reorder them. Simply connect any Framer components as list items and the component handles all the drag logic, animations, and reordering automatically.

Features

Drag to Reorder Users can grab any item and drag it to a new position. Other items smoothly animate out of the way, creating a polished, native-feeling interaction.

Dynamic Rotation Items tilt naturally based on where users grab them—grab the left side and it tilts left, grab the right side and it tilts right. This subtle detail adds a tactile, realistic feel to the interaction.

Fully Responsive The component automatically adapts to any screen size. Items respect their container width, so your list looks great on desktop, tablet, and mobile without any extra configuration.

Connect Any Component Use your own custom-designed list items. Connect frames, components, or any design you create—the Draggable List wraps them and makes them sortable.

Customizable Animation Control the gap between items, padding around the list, rotation intensity, and spring animation settings. Fine-tune the feel to match your design system.

Disable Option Need to lock the list? Toggle dragging off with a single property—perfect for view-only states or conditional interactivity.

Properties

Property & Description1. Items: Connect your components or frames.2. Gap: Space between items (0-50px).3. Padding: Padding around all items (0-40px).4. Max Rotation: Tilt angle when dragging (0-10°).5. Transition: Spring animation settings.6. Disable Drag: Toggle dragging on/off.

Use Cases

Task lists and to-do apps
Priority ranking interfaces
Playlist or queue management
Kanban card ordering
Settings or preference lists
Navigation menu builders
Any sortable content

Technical Notes

Built with Framer Motion's Reorder components
Handles viewport resize automatically
Touch-friendly for mobile devices
Accessible with ARIA labels
No external dependencies beyond Framer Motion

64:T104f,

Swipeable Card Stack

A beautifully animated card stack component that lets users swipe through content with fluid, physics-based interactions. Inspired by popular swipe interfaces, this component brings a polished, native-feeling experience to your Framer projects.

Features

Drag in Any Direction Unlike traditional sliders, users can drag cards in any direction - left, right, up, or down. When released past the threshold, the card smoothly animates to the back of the stack.

3D Tilt Effects Cards naturally tilt and rotate as you drag them, creating an immersive, tactile feel. The rotation follows your drag direction and smoothly returns to neutral when the card settles.

Stacked Depth Effect Cards behind the front one are progressively scaled down and offset, creating a realistic deck-of-cards appearance. Customize how much each card peeks out and how much smaller they get.

Customizable Shadows Fine-tune the shadow's position, blur, spread, and color to match your design. Create subtle depth or dramatic floating effects.

Smooth Physics-Based Animations Every interaction uses spring physics for natural, fluid motion. Cards maintain momentum when flicked and settle with satisfying easing.

How to Use

Drag the component onto your canvas
Connect your frames or components to the "Cards" slot
Customize the appearance and behavior using the property controls

Property Controls

Stack Appearance

Stack Offset - How much each card peeks out behind the one in front
Scale Step - How much smaller each card gets toward the back
Visible Cards - Maximum cards shown in the stack at once
Border Radius - Rounded corners for all cards
Perspective - 3D depth intensity (lower = more dramatic)

Shadow

Shadow X/Y - Horizontal and vertical offset
Shadow Blur - How soft the shadow appears
Shadow Spread - Shadow size (negative = tighter, positive = larger)
Shadow Color - Color with transparency

Interaction

Swipe Distance - How far to drag before the card swipes away
Swipe Velocity - Quick flick speed that triggers a swipe
Drag Elastic - How stretchy the drag feels (0 = stiff, 1 = loose)
Rotate on Drag - Enable/disable 3D tilt effect
Max Rotation - Maximum tilt angle when dragging

Behavior

Infinite Loop - Cards cycle endlessly or stop at the last card
Transition - Animation style for stack movements

Perfect For

Image galleries and portfolios
Product showcases
Testimonial carousels
Onboarding flows
Card-based games
Any swipeable content

Notes

Works with any content: images, text, components, or complex layouts
Fully responsive - cards maintain their connected frame dimensions
Touch-friendly for mobile devices
No external dependencies

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-057408c6-e22b-48ea-bf1f-d1b1b08a8b93-all:/unified/creator/057408c6-e22b-48ea-bf1f-d1b1b08a8b93/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:057408c6-e22b-48ea-bf1f-d1b1b08a8b93:/unified/posts/?creator=057408c6-e22b-48ea-bf1f-d1b1b08a8b93&with=reposts":[{"data":[{"id":"019be560-e6df-77cb-829b-37490e16e49d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OUy4yOg2CPC8liqf8W2e","resolved":true,"title":"Draggable List","body":"$63","bodyJson":null,"introduction":"","slug":"draggable-list","author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OUy4yOg2CPC8liqf8W2e/draggable-list-6JercNGEUxcJkKLOfveQdgpqRQaImo","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-10T02:07:05.789Z","updatedAt":"2026-01-21T15:53:26.144Z","publishedAt":"2026-01-22T11:04:51.679Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://draggable-sort-list.framer.website/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_IE74Kc5Q3fNIvxPZ2PoM8vekySDmOwy4hApPY2vhbpu","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"Pc6d910hqkH5ESQMpNDm","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-22T11:04:51.679Z","updatedAt":"2026-01-22T11:04:51.679Z"},{"id":"019ba1df-47e6-768e-8366-c59c24d2ef16","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"uGhoYSCOfrqyDodq9mth","resolved":true,"title":"Swipeable Card Stack","body":"$64","bodyJson":null,"introduction":"","slug":"swipeable-card-stack","author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uGhoYSCOfrqyDodq9mth/swipeable-card-stack-iuYBEUfUcndyvkfUgtNRMY4uRHZhNP","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-24T16:23:49.547Z","updatedAt":"2026-01-07T12:51:55.842Z","publishedAt":"2026-01-09T08:28:43.366Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://swipeable-cards-slider.framer.website/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_ARXrHuPobSmsrSvreqfnQHBpBDbircwkz1rZ41dagoe","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"7pD3GcKKrn3orfEEkzsM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-09T08:28:43.366Z","updatedAt":"2026-01-09T08:28:43.366Z"},{"id":"019b124f-46d7-764b-8c89-d91de38654da","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"5vjKkIKf0tifVnSH8VXZ","resolved":true,"title":"3D Flip Link","body":"

The 3D Flip Button gives your site a premium tactile feel. Inspired by physical flip-card interactions, this CTA rotates along the X-axis on hover to reveal a mirrored version of your label. Fully customizable: text, colors, radius, shadows, padding, transitions, 3D depth, and more. Works smoothly on all devices.

Features

Realistic 3D hover animation
Mirrored back-face reveals
Fully customizable (text, colors, size, shadows, radius)
Lightweight & performant
Tablet & mobile responsive
No code required

","bodyJson":null,"introduction":"","slug":"3d-flip-link","author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/5vjKkIKf0tifVnSH8VXZ/3d-flip-link-m3GSvuNaJfcVDRNWEGzVNs0v26EynS","metadata":{"tint":{"h":0,"s":0,"l":30},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-05T11:33:23.703Z","updatedAt":"2025-12-12T11:17:12.661Z","publishedAt":"2025-12-12T11:25:44.023Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://3d-customizable-button.framer.website/","price":"3","paymentUrl":"https://buy.polar.sh/polar_cl_D2dH4C4mGNNAbu6PHngAXstm7tfn6cwFukwPp04zkKD","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"pynZuvaSD4dnsZBgwQLS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-12T11:25:44.023Z","updatedAt":"2025-12-12T11:25:44.023Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L65"}]