5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tcf7,

Falling Characters

Physics-based falling animation component · Napier Visuals

Drop up to 24 images or SVGs into a gravity-driven scene with full collision physics. Characters fall, bounce, and stack — draggable by mouse or touch. Upload your own logo to use as a custom collision surface. Built for Framer.

Connecting your characters

Add your characters using one of two methods:

Character array — click the array in the panel and upload images or SVGs directly. Each character can have its own individual size.
Canvas SVGs — pick-whip frame layers directly from your Framer canvas. Useful if you've already built your elements as frames or components.

Each character inherits the Default Size value unless you set a size per item. Up to 24 characters are supported.

Playing with the physics settings

Dial in the feel using the controls in the properties panel:

Default Size — the base size of each character in pixels
Gravity — how fast characters fall. Lower values feel floaty, higher values feel heavy
Bounciness — how much energy is kept on impact. 0 = dead stop, 1 = full bounce
Friction — how much characters slide when they land or touch each other
Stagger — staggers each character's spawn position so they don't all drop at exactly the same time
Ceiling — adds a solid roof so characters stay inside the component
Draggable — allows characters to be grabbed and thrown. Turn off if the component sits inside a scrollable page on mobile

Adding your own logo or collision element

The component includes a built-in collision shape at the bottom that characters stack on. You can replace this with your own:

Click Custom Logo and upload any image or SVG
The physics collision grid automatically adapts to the shape of your uploaded image — characters will react to its actual outline, not just its bounding box
Use Logo Width % to scale it. It anchors to the bottom-right corner
Logo Colour controls the tint when using the default built-in logo (hidden when a custom image is uploaded)
Logo Collision toggles whether characters physically interact with the logo shape
Turn on Debug Grid to see the collision tiles overlaid on the logo — useful for adjusting Grid Size. Turn it off before publishing.

5a:[["$","$L5d",null,{"post":{"id":"019e9266-05fe-7117-9d52-d1e3078efece","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4fe8d9dc-7883-4909-9ee7-f72329da4283","name":"Napier Visuals","slug":"byron-napier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1099345/avatar-4Bgfu2YDtqCK6uUs9EB3UJj8bWNgs2.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"yFzUWUrW8pyIYzEgL614","resolved":true,"title":"Falling Characters","body":"$5e","bodyJson":null,"introduction":"Physics-based falling animation","slug":"falling-characters","author":{"framerUserId":"4fe8d9dc-7883-4909-9ee7-f72329da4283","name":"Napier Visuals","slug":"byron-napier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1099345/avatar-4Bgfu2YDtqCK6uUs9EB3UJj8bWNgs2.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/yFzUWUrW8pyIYzEgL614/falling-characters-JV90iwXNGjHsG6ywALKX5IWRlHlYb9","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-30T10:50:13.955Z","updatedAt":"2026-06-04T17:27:12.322Z","publishedAt":"2026-06-04T11:30:20.286Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://convex-pages-993797.framer.app/","price":"10","paymentUrl":"https://contra.com/payment-link/AwSzFUZh-falling-characters-component","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"Zzs58CHPW6pQn4TG4vap","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-04T11:30:20.286Z","updatedAt":"2026-06-04T11:30:20.286Z","reported":false}}],"$L5f"]

Suggested for you