componente · @solu30/ui-kit/animation
ProgressiveBlur
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { ProgressiveBlur } from '@solu30/ui-kit/animation'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| direction | opcional | keyof typeof GRADIENT_ANGLES | Borde hacia el que crece el desenfoque. Default `"bottom"`. |
| blurLayers | opcional | number | Capas del degradado. Más capas = transición más suave y más costosa. Default `8`. |
| blurIntensity | opcional | number | Px de blur que suma cada capa. Default `0.25`. |
Ejemplo del paquete
<div className="relative">
<div className="overflow-x-auto">{chips}</div>
<ProgressiveBlur direction="right" className="absolute inset-y-0 right-0 w-12" />
</div>Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.