Blur Highlight
Animated paragraph with blur-in effect and automatic text highlighting
blur-highlight-tw
Our cutting-edge technology transforms how businesses analyze data and make decisions. From real-time insights to predictive analytics, we deliver solutions that drive growth and innovation.
Customize
8px
0.3
0s
0.8s
0.4s
1s
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Text content to display |
| highlightedBits | (string | HighlightBit)[] | [] | Array of text strings or objects to highlight. Use string for all occurrences, or { text: string, occurrence: number } for specific ones. |
| highlightColor | string | "hsl(80, 100%, 50%)" | Color for highlighted text (any CSS color) |
| highlightClassName | string | "" | Additional class name for highlighted text elements |
| blurAmount | number | 8 | Initial blur amount in pixels |
| inactiveOpacity | number | 0.3 | Opacity when not in view |
| blurDelay | number | 0 | Blur animation delay in seconds |
| blurDuration | number | 0.8 | Blur animation duration in seconds |
| highlightDelay | number | 0.4 | Highlight animation delay in seconds |
| highlightDuration | number | 1 | Highlight animation duration in seconds |
| highlightDirection | "left" | "right" | "top" | "bottom" | "left" | Direction of highlight animation |
| viewportOptions | { once?: boolean; amount?: number } | { once: false, amount: 0.5 } | Viewport intersection observer options (margin is fixed at -20%) |
| className | string | "" | Additional CSS classes |