componente · @solu30/ui-kit/animation

ProgressiveBlur

Degradado de desenfoque hacia un borde, como señal de que hay más contenido fuera de la vista.

Seguir leyendo — 2 párrafos más

Degradado de desenfoque hacia un borde, como señal de "hay más contenido".

Se monta como hermano del contenido scrolleable, posicionado en absoluto sobre el borde que corta.

Todavía no la importa ninguno de los 15 verticales medidos.

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

import { ProgressiveBlur } from '@solu30/ui-kit/animation'

Props

3 props declaradas en los tipos de la versión instalada.
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: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.