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

Draggable Tags

Draggable Tags transforms a simple concept into a complete interactive system. Colorful floating tags that users can drag, stack, and explore — each one hiding additional content behind a smooth accordion reveal.

Features

Entry animation — tags fly in and stack automatically on load with spring physics and staggered delays
Freely draggable — each tag moves independently with smooth mouse and touch support
Smart layering — dragged tag always comes to the front automatically
Click to expand — tap any tag to reveal a description and link via smooth accordion animation
Full per-tag customization — every tag has its own independent controls
Instant prop updates — all changes reflect live on the Framer canvas
Touch support — works seamlessly on mobile and tablet

Customizable Props

Component Level

Number of tags (1 to 10)
Background color
Ambient glow + opacity
Drag scale
Animate on load + animation style (Fly In / Fade Up / Instant)

Per Tag

Content: title, icon, description, link text, link URL, link toggle
Style: background color, text color, font size, font weight, border radius, rotation, padding X/Y
Shadow: offset X/Y, blur, opacity

Use Cases

Hero sections with interactive keyword highlights
Services or skills showcase
Portfolio topic clouds
Feature highlights for SaaS landing pages
Onboarding screens
Creative agency presentations

Default Design

Ships with 6 ready-to-use tags using a carefully curated color palette.

How to Use

Add the component to your Framer project
Open the props panel and set your number of tags
Customize each tag — content, colors, rotation, shadow
Hit preview, drag and click to explore

59:[["$","$L5c",null,{"post":{"id":"019d402e-2d3c-71ed-b100-8068561a9339","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3c8b9b35-9a34-4c37-b452-96b7a402762d","name":"Yumenoie Studio","slug":"yumenoie-studio","avatar":"https://framerusercontent.com/avatars/users/3c8b9b35-9a34-4c37-b452-96b7a402762d/LTrMS0Tzq","followed":false,"followsYou":false},"media":[],"resources":[{"id":"a6IATK9N0CO7p9Rnc831","resolved":true,"title":"DraggableTags","body":"$5d","bodyJson":null,"introduction":"Drag, stack & expand customizable tags","slug":"draggabletags","author":{"framerUserId":"3c8b9b35-9a34-4c37-b452-96b7a402762d","name":"Yumenoie Studio","slug":"yumenoie-studio","avatar":"https://framerusercontent.com/avatars/users/3c8b9b35-9a34-4c37-b452-96b7a402762d/LTrMS0Tzq","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/a6IATK9N0CO7p9Rnc831/draggabletags-fjc0yKEQtqiNEtF2FZqsu8Njy1XEeb","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-18T16:23:02.120Z","updatedAt":"2026-05-12T11:09:46.637Z","publishedAt":"2026-03-30T19:17:41.308Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://draggable-tags.framer.website/","price":"5","paymentUrl":"https://dub.sh/ICFAKAL","workshop":true,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"8mguFhPTwDygfEdYmsUE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":54,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-30T19:17:41.308Z","updatedAt":"2026-03-30T19:17:41.308Z","reported":false}}],"$L5e"]

Suggested for you