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.
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.
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
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.