Progressive Blur

A stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed header or above a scroll boundary.

Library

Sora UI

Framework

React

Type

ui

License

MIT + Commons Clause (partes)

Files

• apps/www/registry/primitives/effects/progressive-blur/index.tsx
• apps/www/registry/hooks/use-prefers-reduced-motion/index.tsx
• packages/ui/src/lib/utils.ts

Source

https://github.com/SoraLabsOSS/ui

Categories

• Blur Overlay Components
• React Blur Overlay Components
• Tailwind CSS Blur Overlay Components
• Animated Blur Overlay Components
• Effect Components
• React Effect Components
• Tailwind CSS Effect Components
• Animated Effect Components

More from Sora UI

• Accordion
• Base Accordion
• Base Alert Dialog
• Base Button
• Base Checkbox
• Base Context Menu
• Base Dialog
• Base Dropdown Menu
• Input
• Base Switch
• Base Tooltip
• Cursor Bubble