import { Component } from '@angular/core';
import { WrBlurText } from 'ngwr/bits/blur-text';
@Component({ imports: [WrBlurText] })
export class MyComponent {}Blur Text
Text that blurs into place when it scrolls into view.
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
<wr-blur-text
text="Welcome to ngwr"
animateBy="words"
direction="top"
[delay]="200"
[stepDuration]="0.35"
/>Customize
Animate By
Direction
Delay (ms)
Step Duration (s)
Text
Server rendering
Prerendered text stays as it is when the page hydrates. The entrance plays when the component is created in the browser and when text changes. Since v15.
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to animate. | string | — |
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. | void | — |
See also
Animation Split TextReveals text piece by piece when it scrolls into view.Animation Decrypt TextText that scrambles, then resolves into the real string.Animation Falling TextWords that fall like objects and can be dragged around.Guide Server-side renderingPrerender and hydrate an ngwr app without mismatches.