Gradual Blur
Free
A scroll area whose edge melts into a progressive blur that clears when you reach the end.
Version 2.6
Night mode
Every level gets a darker palette and softer lights.
Version 2.5
Cloud saves
Progress now follows you between phone and desktop.
Version 2.4
Photo mode
Pause anywhere, frame the shot and share it.
Version 2.3
Daily runs
One seeded run a day, with its own leaderboard.
Version 2.2
Controller support
Full remapping and rumble on every pad we tested.
Version 2.1
New biome
The salt flats: wide open, with wind that pushes back.
Version 2.0
Co-op
Two players, one lantern, shared hearts.
Scroll to the end and the blur clears.
Customize
Edge
8px
96px
5
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/gradual-blur.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/gradual-blur.tsx.
Usage
import { GradualBlur } from "@/components/ui/gradual-blur";
<GradualBlur position="bottom" strength={8} label="Release notes" className="h-80">
<ReleaseNotes />
</GradualBlur>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Scrolling content. |
| position | "top" | "bottom" | "left" | "right" | "bottom" | Edge of the scroll area that gets blurred. |
| strength | number | 8 | Blur at the very edge, in pixels. |
| height | number | 96 | Depth of the blurred band in pixels: its height, or its width on the left and right. |
| layers | number | 5 | Number of stacked blur layers. More layers give a smoother ramp. |
| fadeAtEnd | boolean | true | Fade the blur out once the scroll reaches that edge. |
| tint | string | — | Optional color laid over the band, fading toward the edge. |
| label | string | — | Accessible name of the scroll area. |
| className | string | — | Classes for the outer frame. Give it a height or width so it can scroll. |
| contentClassName | string | — | Classes for the scrolling content, such as a flex row for horizontal scrolling. |
Dependencies: motion