Blur Text

Angular adaptation of an effect by David Haz / reactbits.dev.

import { WrBlurText } from 'ngwr/blur-text';

Welcome to ngwr

<wr-blur-text
  text="Welcome to ngwr"
  animateBy="words"
  direction="top"
  [delay]="200"
  [stepDuration]="0.35"
/>

Animate By

Direction

Delay (ms)

200 ms

Step Duration (s)

0.35 s

Text

Name	Description	Type	Default
`text`required	Text to animate.	`string`	`— (required)`
`animateBy`	Split granularity.	`'chars' \| 'words'`	`'words'`
`direction`	Entry direction: `'top'` slides down into place, `'bottom'` slides up.	`'top' \| 'bottom'`	`'top'`
`delay`	Per-piece stagger in ms.	`number`	`200`
`stepDuration`	Duration of each keyframe step in seconds (total = 2 × stepDuration).	`number`	`0.35`
`easing`	CSS easing function.	`string`	`'linear'`
`threshold`	IntersectionObserver threshold (0..1).	`number`	`0.1`
`rootMargin`	IntersectionObserver rootMargin.	`string`	`'0px'`
`(animationComplete)`	Emitted once all pieces finish animating.	`EventEmitter<void>`	`—`

Import