---
title: "Falling Characters — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Napier Visuals · Interactive. Falling Characters Physics-based falling animation component · Napier Visuals Drop up to 24 images or SVGs into a gravity-driven…"
canonical: "https://framer.elliotli.dev/component/falling-characters"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Falling Characters

# Falling Characters

Physics-based falling animation

[View on Framer](https://framer.com/marketplace/components/falling-characters/?via=elliot-li)

![Falling Characters preview image 1](https://framer.elliotli.dev/og/component/falling-characters/883f0681bc0d2b14/1600x1200.jpg)

## Summary

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.

## Description

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-4wy3epqk-2gs4gyMdbLtbaMqZWxwJZqhuZaEQTE)

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-4wy3epqk-n6COnzMHN7wZLebtsZXLTQi6SQtaU7)

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-4wy3epqk-cRpSvpMnRPQqoEv7v4zkn5oHP5ED5H)

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8722

## Details

- **Author**: Napier Visuals
- **Price**: $10.00
- **Published**: 2026-06-04
- **Updated**: 2026-06-04
- **Added**: 2026-04-30
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase