---
title: "Physics Tags"
canonical_url: "https://framerhub.io/components/physics-tags"
last_updated: "2026-06-15T14:46:30.545Z"
---

## Physics Tags

Create playful, interactive tag animations with realistic physics. Tags fall from above and bounce around the container, responding to mouse hover with repulsion.

## Features

**Matter.js Physics**
Powered by Matter.js for realistic gravity, bouncing, and friction.

**Custom Tags**
Define your own tags with custom text, tag color, and text color using a list control.

**Interactive**
Tags react to mouse hover, creating engaging repulsion effects.

**Fine-Tuned Physics**
Adjust gravity, bounciness, friction, air resistance, and wall bounce properties to get the exact feel you want.

**Transparent Background**
Seamlessly overlays on any background in your Framer project.

## Use Cases

**Skill Showcases** — Display skills or technologies in a fun, interactive way.

**Sale Promotions** — Create eye-catching discount and sale tag displays.

**Tag Clouds** — Bring tag clouds to life with physics.

**Interactive Elements** — Add playful interactivity to any page.

![Physics Tags Preview](/framerhub/img/components/control/physics-tags.jpg)

## How to Use

### Installation

1. Copy the component URL
2. Open your Framer project
3. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Tags**

- Tags: Add/edit tags with text and colors
- Count: Number of tags to spawn (duplicates from your list)
- Min Width/Height: Tag dimensions

**Physics**

- Interactive: Toggle mouse repulsion
- Gravity: How fast tags fall (0.1 - 5)
- Bounciness: How much tags bounce (0 - 1.2)
- Friction: Surface friction
- Air Resist: Air drag
- Wall Bounce: How walls respond

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!