---
title: "Gravity Type Drop — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Lucas · Text. Drop the title, throw the letters"
canonical: "https://framer.elliotli.dev/component/gravity-type-drop"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Gravity Type Drop

# Gravity Type Drop

Drop the title, throw the letters

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

![Gravity Type Drop preview image 1](https://framer.elliotli.dev/og/component/gravity-type-drop/b30907d9396bb693/1600x933.jpg)

## Summary

Drop the title, throw the letters

## Description

Click the headline and every letter becomes a physics body: they fall, bounce, tumble and pile up at the bottom of the frame. Grab any letter and throw it — it keeps the real velocity of your gesture, smoothed over the last frames, so a flick sends it flying.

Rotation is excited by impact, so letters roll and settle at natural angles instead of landing flat. A discreet Replay button springs every letter back to its exact home position and angle — the title reassembles pixel-perfect.

Trigger on click, on hover, or automatically when scrolled into view. Gravity and bounciness are adjustable.

DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. The loop only runs while letters are moving. Honours prefers-reduced-motion (the title simply stays put), and renders the intact title on the Framer canvas.

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

-   All · #5611

## Details

- **Author**: Lucas
- **Price**: $5.00
- **Published**: 2026-08-12
- **Updated**: 2026-08-12
- **Added**: 2026-08-12
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing