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.

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.

Physics-based falling animation