About DraggableTags
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
