ScrollBlur
Animate elements from blurred to sharp as they enter the viewport.
Usage
Wrap any component in ScrollBlur to trigger a beautiful un-blur animation along with a slight slide up.
I was blurry!
I was blurry later!
tsx
import { ScrollBlur, Card } from "starkit-ui";
<ScrollBlur delay={200}>
<Card>Unblurred Content</Card>
</ScrollBlur>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delay | number | 0 | Delay in ms before the un-blur starts. |
| threshold | number | 0.1 | How much of the element needs to be visible to trigger. |
| repeat | boolean | false | Animate out when scrolled past, to animate in again. |