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.
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
Number of tags (1 to 10)
Background color
Ambient glow + opacity
Drag scale
Animate on load + animation style (Fly In / Fade Up / Instant)
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
Hero sections with interactive keyword highlights
Services or skills showcase
Portfolio topic clouds
Feature highlights for SaaS landing pages
Onboarding screens
Creative agency presentations
Ships with 6 ready-to-use tags using a carefully curated color palette.
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
Yumenoie Studio
