Falling Characters

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.