design-infraReport a problem or share feedback← Catalog
Gradual Blur
freereact-bits/gradual-blur
Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
$
npx shadcn@latest add @react-bits/GradualBlur-TS-TW- Source
- React Bits
- Kind
- effect
- Categories
- misc
- Use as
- wrapper — wraps your existing element
- Applies to
- imagecarouselcard
- Motion
- on scroll, enter · medium · css · low cost
- Tags
- animations
- Licence
- MIT + Commons Clause: free to use in commercial apps/sites, but you may not sell or redistribute the components themselves (alone, bundled, or ported). React Bits Pro is a separate paid product.
- Live demo
- www.reactbits.dev
- Docs
- www.reactbits.dev
Similar
Compare all 4 →- Edge Blurcult-ui/edge-blurStacked backdrop-blur layers with a gradient mask for soft top or bottom screen edges
- Progressive Blursmoothui/progressive-blur♥ The user wants more interesting live homepage examples and shared this surface effect. Show it over a scrollable UI with readable controls outside the blur; it is a static surface effect, not a loading animation. — Layered CSS backdrop blur for fading scroll-container edges and decorative surfaces. It is not a loader or a continuous animation. Keep text, focus targets and controls outside the strongest blur; the decorative overlay must not intercept interaction. Hosted demo includes a real scroll container and blur controls.
- Magnetreact-bits/magnetElements magnetically ease toward the cursor then settle back with spring physics.