CONTENTS:Bubble Text

Bubble Text

An innovative typographic micro-interaction that splits text into individually monitored glyphs. When the user hovers over any character, a continuous radial Gaussian weight wave radiates outward, inflating neighboring characters with proportional weight steps.

Dependencies:

framer-motiontailwind-merge

Loading preview...

Examples

Select a preset to load into preview

Installation

pnpm add framer-motion tailwind-merge

Props

Property	Type	Default	Description
`text`req	`string`	`"Bbbbbbble text"`	The string content rendered into interactive glyphs.
`className`	`string`	`undefined`	Tailwind CSS classes for the headline container element.
`charClassName`	`string`	`undefined`	Optional classes applied directly to each individual character span.
`style`	`React.CSSProperties`	`undefined`	Inline styles for the headline wrapper.