5e: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"] 5f:T7fe,

Falling Tags turns your footer into a small physics playground. When the section scrolls into view, your tags fade in floating at the top, hover for a moment, then lose their footing, fall and pile up at the bottom. Visitors can grab any tag, drag it around and throw it. It comes with a clean, minimal default look and everything is editable from the properties panel, no code needed.

Features

Tags float first, then drop with real physics and stack naturally
Drag and throw tags with the mouse or a finger
Type your own labels right in the panel, up to 60 tags
Pick one color or many. Tags are shared evenly between your colors
Text color adapts to each fill automatically, or set your own
Corner radius, outline width and outline color
Full font and padding control
Gravity, bounce, friction, hover time and stagger settings
Plays when scrolled into view, and again on every new page
Transparent and click-through, so it can sit on top of your footer links
Shows the settled pile on the canvas and respects reduced motion
Pauses itself when resting or off screen

Best for

Portfolio and studio footers
Skills, services and tech stack sections
Playful contact and about pages

Setup

Paste the component onto your Framer canvas.
Place it in your footer. Set the width to Fill and give it a fixed height, around 500 to 700 on desktop.
Type your tags and choose your colors in the right panel.
On the phone breakpoint, lower the font size so every tag fits the width.

Note: The drop animation plays in Preview and on the published site. On the canvas you see the settled pile.

Support

Questions or issues? Email guocianyu@gmail.com

59:["$","$L5e",null,{"value":{"fallback":{"$inf$activity-creator-2254ab54-9d85-4a45-a5d2-07a475ee0427-all:/unified/creator/2254ab54-9d85-4a45-a5d2-07a475ee0427/activity/":[{"data":[{"id":"01a0ba0d-1104-7693-8e58-4ef83b72e90e","type":"component.created","target":{"type":"component","id":"aww0rc5EWjcSn8iTpK6h","preview":"Falling Tags","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2254ab54-9d85-4a45-a5d2-07a475ee0427/01a0ba02-9b46-766b-9de7-1708695e1ac9.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2254ab54-9d85-4a45-a5d2-07a475ee0427","name":"Guo","avatar":"https://framerusercontent.com/avatars/users/2254ab54-9d85-4a45-a5d2-07a475ee0427/RWe0spdDa","slug":"cy-guo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-19T14:23:33.636Z","latestAt":"2026-09-19T14:23:33.636Z"},{"id":"01a0905f-ec88-72c0-a79a-5818be989fbd","type":"creator.followed","target":{"type":"creator","id":"42cf9062-1d0f-4d33-80f3-2862338496ee","preview":"Swiss Themes","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28887/swiss_themes_icon-Hsmf2Qtwq6MK7GUAHEtAMkSvBIz5EL.jpg","slug":"swiss-themes","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2254ab54-9d85-4a45-a5d2-07a475ee0427","name":"Guo","avatar":"https://framerusercontent.com/avatars/users/2254ab54-9d85-4a45-a5d2-07a475ee0427/RWe0spdDa","slug":"cy-guo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-11T12:10:00.693Z","latestAt":"2026-09-11T12:10:00.693Z"},{"id":"019ed999-cfdb-72f7-a651-76b62860ee0a","type":"template.liked","target":{"type":"template","id":"67112","preview":"Roofex","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e384faea-043f-4f5c-bd25-070ec91488d7/xf7qm43t","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2254ab54-9d85-4a45-a5d2-07a475ee0427","name":"Guo","avatar":"https://framerusercontent.com/avatars/users/2254ab54-9d85-4a45-a5d2-07a475ee0427/RWe0spdDa","slug":"cy-guo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-18T07:19:56.631Z","latestAt":"2026-06-18T07:19:56.631Z"},{"id":"019ed999-42ee-738f-b368-85ef9e15fb4d","type":"template.liked","target":{"type":"template","id":"66462","preview":"LEQUON/01","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d1ac8860-4547-4b59-b858-01629441c08b/8q05r9mi","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2254ab54-9d85-4a45-a5d2-07a475ee0427","name":"Guo","avatar":"https://framerusercontent.com/avatars/users/2254ab54-9d85-4a45-a5d2-07a475ee0427/RWe0spdDa","slug":"cy-guo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-18T07:19:20.553Z","latestAt":"2026-06-18T07:19:20.553Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2254ab54-9d85-4a45-a5d2-07a475ee0427:/unified/posts/?creator=2254ab54-9d85-4a45-a5d2-07a475ee0427&with=reposts":[{"data":[{"id":"01a0ba0d-0ee6-774c-9ce9-3fff375904c8","title":null,"body":"

Tags that float, fall and drag. A physics footer I built for my own Framer site, now available as a component. Grab one and throw it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Tags that float, fall and drag. A physics footer I built for my own Framer site, now available as a component. Grab one and throw it."}]}]},"author":{"framerUserId":"2254ab54-9d85-4a45-a5d2-07a475ee0427","name":"Guo","slug":"cy-guo","avatar":"https://framerusercontent.com/avatars/users/2254ab54-9d85-4a45-a5d2-07a475ee0427/RWe0spdDa","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aww0rc5EWjcSn8iTpK6h","resolved":true,"title":"Falling Tags","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Falling Tags turns your footer into a small physics playground. When the section scrolls into view, your tags fade in floating at the top, hover for a moment, then lose their footing, fall and pile up at the bottom. Visitors can grab any tag, drag it around and throw it. It comes with a clean, minimal default look and everything is editable from the properties panel, no code needed."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tags float first, then drop with real physics and stack naturally"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and throw tags with the mouse or a finger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Type your own labels right in the panel, up to 60 tags"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick one color or many. Tags are shared evenly between your colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text color adapts to each fill automatically, or set your own"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner radius, outline width and outline color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full font and padding control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gravity, bounce, friction, hover time and stagger settings"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Plays when scrolled into view, and again on every new page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transparent and click-through, so it can sit on top of your footer links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shows the settled pile on the canvas and respects reduced motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses itself when resting or off screen"}]}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Best for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and studio footers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Skills, services and tech stack sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playful contact and about pages"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Setup"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place it in your footer. Set the width to Fill and give it a fixed height, around 500 to 700 on desktop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Type your tags and choose your colors in the right panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"On the phone breakpoint, lower the font size so every tag fits the width."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Note: The drop animation plays in Preview and on the published site. On the canvas you see the settled pile."}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Questions or issues? Email "},{"type":"text","text":"guocianyu@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:guocianyu@gmail.com","target":"_blank"}}]}]}]},"introduction":"Tags that float, fall and drag","slug":"falling-tags","author":{"framerUserId":"2254ab54-9d85-4a45-a5d2-07a475ee0427","name":"Guo","slug":"cy-guo","avatar":"https://framerusercontent.com/avatars/users/2254ab54-9d85-4a45-a5d2-07a475ee0427/RWe0spdDa","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2254ab54-9d85-4a45-a5d2-07a475ee0427/01a0ba02-9b46-766b-9de7-1708695e1ac9.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2400,"height":1800}}],"post":null,"createdAt":"2026-09-19T14:23:32.479Z","updatedAt":"2026-09-19T14:47:26.803Z","publishedAt":"2026-09-19T14:23:32.475Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://guocianyu-falling-tags.framer.website/","price":"9","paymentUrl":"https://contra.com/payment-link/dFHalIHc-falling-tags-framer-component","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"ntwL6Op2wfIquu2EfvEn","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T14:23:33.094Z","updatedAt":"2026-09-19T14:23:33.094Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L60"}]