Bounce Text: Free Typography Component by Mohd Mehraj

BouncyText is a physics driven text component where each character behaves like a physical object. Letters fall, collide, and settle naturally while reacting to cursor movement and drag interactions for a playful experience.

BouncyText is an interactive physics based typography component that transforms static text into a dynamic visual experience. Instead of rendering text as a simple line of characters, this component converts each letter into an independent physics object that can fall, collide, bounce, and settle naturally inside the container

The simulation uses a lightweight custom physics system inspired by game engines. Each character behaves like a small physical body affected by gravity, friction, and collision forces. When the component loads, the characters drop from above and gradually settle into stable piles, creating a satisfying and playful animation.

Interaction is a core part of the experience. When users move their cursor near the text, characters are gently pushed away based on distance and force strength. This creates a responsive effect where letters react naturally to the user's movement.

Users can also drag individual characters when dragging is enabled. This allows visitors to pick up letters, move them around, and release them back into the simulation where they continue interacting with other characters.

The component includes several physics controls that allow designers to customize the motion behavior. Gravity controls how fast letters fall, bounce determines how much energy is preserved during collisions, and air friction gradually slows movement over time.

Background styling is also fully customizable. Designers can choose between solid colors, gradients, or image backgrounds to match the surrounding layout.

BouncyText works especially well for playful hero sections, experimental typography layouts, creative portfolios, or landing pages where motion and interaction are used to capture attention.