FallingText
falling-textTurns words into gravity-driven interactive falling bodies.
Usage
Basic usage
It will be automatically dropped when mounted (trigger="auto"), and words matching the highlightWords prefix will be highlighted.
<div className="relative h-64 overflow-hidden rounded-xl">
<FallingText
text="Hulian Component Library Enterprise Grade High Quality Native Adaptation token Theme"
highlightWords={["Hulian", "token"]}
fontSize="1.5rem"
/>
</div>Click to trigger
trigger="click" is clicked on the container to start falling (there are also scroll / hover).
<FallingText text="Click me and let the words scatter" trigger="click" highlightWords={["Click me"]} />High gravity and low rebound
gravity is large, bounce is small, the word blocks fall to the ground quickly and stack without bouncing.
<FallingText text="Gravity Strong Fast Landing Stacking" gravity={2.4} bounce={0.2} />Full of flexibility
bounce is close to 1, and the word block bounces repeatedly after landing.
<FallingText text="Bounce · Jump · Bounce · Jump" gravity={0.8} bounce={0.9} />When to use
Use FallingText for a landing-page easter egg or interactive banner where a short sentence falls apart and can be dragged. Use ScrollFloat or Reveal for a gentle entrance. FallingText treats every word as a rigid body, so reserve it for short decorative copy.
Import
import { FallingText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | "" | For the entire text, press the space to cut into "word chunks", and each word will have an independent rigid body dropped. |
| highlightWords | string[] | [] | Words to be highlighted (prefix matching: word startsWith, any one will be highlighted) |
| highlightClass | string | "text-primary font-semibold" | Highlighted word additional className (superimposed on the word chunk) |
| trigger | "auto" | "scroll" | "click" | "hover" | "auto" | Drop timing: play when mounted/scroll into the viewport/click the container/move the pointer in |
| gravity | number | 1 | Downward acceleration coefficient, the larger it is, the faster it falls and the faster it stacks. It is recommended to be 0.3–3. |
| bounce | number | 0.6 | Rebound coefficient after landing/hitting wall (0 means no bounce, 1 means full bounce) |
| fontSize | string | "1.5rem" | Text font size (CSS length, passed in root fontSize) |
| className | string | — | supports root container extra className |
| style | CSSProperties | — | supports root container inline styles |
Usage guidelines
- Words are split on spaces. Languages without spaces need manual segmentation, such as
"HulianUI Component library Enterprise level"; otherwise the whole sentence becomes one body. highlightWordsuses prefix matching (startsWith), not exact equality, so related prefixes may match unintentionally.- By default,
text=""does not render any words. If you forget to pass text, you will get an empty stage. - Reduced-motion mode disables the physics animation. Do not rely on motion to communicate core content.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<FallingText
text="Hulian Component Library Enterprise Level High Quality Native Adaptation"
gravity={1}
bounce={0.6}
trigger="auto"
highlightWords={["Hulian", "token"]}
className="text-white/90"
/>
</div>