---
title: "GravityPills — Free Framer component · Best of Framer"
description: "Free Framer component · by Alt3Studio · Interactive. GravityPills by Alt3 Studio A highly interactive, 60fps physics-based component powered by Matter.js."
canonical: "https://framer.elliotli.dev/component/gravitypills"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/GravityPills

# GravityPills

60fps Physics Interactions Pills

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

![GravityPills preview image 1](https://framer.elliotli.dev/og/component/gravitypills/0e9f07f1ba507c0e/1600x1200.jpg)

## Summary

GravityPills by Alt3 Studio A highly interactive, 60fps physics-based component powered by Matter.js.

## Description

**Gravity Pills** An interactive, 60fps physics-based component powered by Matter.js. Perfect for skill stacks, categories, or highly engaging hero sections.

**Core Features:**

-   **True 2D Physics:** Grab, drag, throw, and watch pills collide with realistic gravity, friction, and elasticity.
    
-   **\[NEW\] Real Top Collision:** Toggle a ceiling boundary to keep pills bouncing dynamically inside your container.
    
-   **\[NEW\] Impact Squash & Stretch:** Tunable squish physics. Pills stretch while airborne and squash with a satisfying "thud" on impact.
    
-   **\[NEW\] Natural Throws:** Smart drag-and-release mechanics track your hand motion for perfectly predictable tosses.
    
-   **Dynamic Depth Shadows:** Fast-moving pills cast deeper, softer shadows to simulate 3D space and elevation.
    
-   **Mobile Tilt Ready:** Hardware gyroscope integration lets mobile users shift gravity simply by tilting their devices.
    
-   **Premium Design Ready:** The ideal dynamic element to highlight your brand's core pillars like Art Direction or No-code development.
    
-   **Fully Customizable:** Tweak throw power, bounce, floaty gravity (down to 0.01), squish amount, and drag directly in the properties panel.
    
-   **Granular Theming:** Apply global themes or set unique background, text, and border colors for every single pill individually.
    
-   **Scroll or Load Triggers:** Drop pills immediately on load or wait until they scroll into view.
    

**Bulletproof Performance:**

-   **Zero-Crash Logic:** Re-engineered dependencies eliminate canvas refreshing on click. Interact aggressively without breaking the engine.
    
-   **Infinite Stacking Limits:** Expanded vertical boundaries let you drop dozens of pills without them getting stuck off-screen.
    
-   **Memory Leak Protection:** Built-in engine cleanup ensures lightweight, buttery smooth 60fps performance across all devices.
    

**Setup in Seconds:**

1.  Drop the component onto the canvas or into any Stack.
    
2.  Set Width to **Fill**.
    
3.  Set Height to **100vh** for a full-screen effect (or any custom height).
    
4.  Add text to the Badges List and watch them drop.
    

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

-   All · #542

## Details

- **Author**: Alt3Studio
- **Published**: 2026-08-13
- **Updated**: 2026-08-30
- **Added**: 2026-08-13
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step