import { Component } from '@angular/core';
import { WrFallingText } from 'ngwr/bits/falling-text';
@Component({ imports: [WrFallingText] })
export class MyComponent {}Falling Text
Words that fall like objects and can be dragged around.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
Give it a height; the words fall to its bottom edge.
Hover this block. Each word falls and you can drag them around.
<wr-falling-text
text="Hover this block. Each word falls and you can drag them around."
trigger="hover"
[highlightWords]="['Hover', 'drag']"
[gravity]="980"
fontSize="1.5rem"
/>Customize
Trigger
Gravity
Font Size
Text
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to render. Words are separated by spaces. | string | — |
highlightWords | Prefix-match keywords. Matching words get the wr-falling-text__word--hl class. | readonly string[] | [] |
trigger | When to release the words into the simulator. | 'auto' | 'scroll' | 'hover' | 'click' | 'auto' |
gravity | Gravity in pixels/sec². | number | 980 |
fontSize | Font size as a CSS length. | string | '1rem' |