shadcn.io is not affiliated with official shadcn/ui
Bouncing Text bounces a line one letter at a time: each leaps off the line, lands, and bounces twice more, lower and quicker each time, like a ball losing height, a moment after the letter before it. Then the line rests before the next round, or, if you like, it bounces only once.
Use it for a moment worth celebrating: a win, a finished level, a success state, a kids' app's title. For letters that squash and spring up without leaving the line, use Stretch Text; for a wave that never stops, Wave Text. Each letter runs a CSS keyframe animation the install adds to your stylesheet, three hops eased like real falls, delayed by its place in the text, with no animation library and no timer. With reduced motion the text sits on its line.
Installation
Usage
import { BouncingText } from "@/components/ui/bouncing-text";<h1>
<BouncingText text="Game on!" />
</h1>Demos
Intensity
intensity is how high the first bounce goes: subtle a little hop, medium, the default, a good bounce, strong half the letter's height and more. The two bounces after it are always about a third and an eighth as high.
Once
loop={false} plays one round when the page shows the text, then leaves it on the line, for a moment that happens once. stagger is the time between one letter leaving the ground and the next, 60 ms by default.
Accessibility
Screen readers read the text once, as plain text, from a visually hidden copy; the bouncing letters are hidden from them. Words wrap whole, and the line keeps its direction on a right-to-left page, where the bounce runs from its first letter, on the right. Each letter spends most of a round at rest on the line. With reduced motion it doesn't bounce.
FAQ
Why does it look like a real bounce?
Each hop is eased like a thrown ball, slowing to its peak and speeding back down, and each is about a third as high as the one before and lasts about 60% as long, since a fall's time goes with the square root of its height.
How long is a round?
duration, 2500 ms by default: the bounces take the first two fifths, then the letter rests. A long text's round can overlap the next, as the first letters bounce again while the last are still landing; lengthen duration or shorten stagger to keep the rounds apart.
How is it different from Stretch Text?
Bouncing Text lifts the letters off the line and keeps their shape. Stretch Text keeps them on the line and changes their shape, squashing flat and springing tall like rubber.
Can a single round play again?
Give it a new key and React renders it fresh, so the round plays again from the first letter, such as each time a level is completed.
API Reference
BouncingText
<span> data-slot="bouncing-text"
textstring
The text. Its line breaks (\n) are kept.
duration?number
One round: a letter's bounces and the rest after them, in milliseconds. The bounces take the first two fifths.
- Default
2500
intensity?"subtle" | "medium" | "strong"
How high the letters bounce. @default "medium".
- Type
"subtle" | "medium" | "strong"
loop?boolean
Whether it keeps bouncing; false bounces once, when the page shows
it.
- Default
true
stagger?number
The time between one letter leaving the ground and the next, in milliseconds.
- Default
60
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Forwarded to the part.
--bouncing-text-durationstring
One round, bounces and rest (2.5s).
--bouncing-text-heightstring
How high the first bounce goes (0.3em).
--bouncing-text-staggerstring
The time between one letter's bounce and the next (60ms).
Related
- Pro
Stretch Text
MotionSquash and spring without leaving the line
- Pro
Wave Text
MotionA wave that never stops
- Pro
Gravity Text
MotionLetters that fall and bounce on the floor
- Pro
Pop Text
EntranceLetters that land with a burst
- Pro
Wobble Text
MotionLetters that rock like jelly
- Pro
Colourful Text
DecorativeColours that swap in a wave