LavaLamp
El componente LavaLamp genera un fondo animado que simula el efecto de una lámpara de lava con múltiples elementos flotantes. Los elementos pueden personalizarse en estilo, tamaño, animación y cantidad.
Ejemplo
Importación
Para importar el componente LavaLamp, se puede hacer desde fenextjs
import { LavaLamp } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| nItems | number | no | 20 | Número de elementos flotantes en la lámpara de lava. |
| styles | CSSProperties | no | { width: "100%", height: "500px",background: "linear-gradient(45deg,var(--fenext-color-blue) 0%,var(--fenext-color-teal) 100%)"} | Estilos generales aplicados al contenedor de la lámpara de lava. |
| stylesElement | LavaLampStylesElement[] | no | Estilos aplicados a los elementos individuales flotantes en la lámpara de lava. | |
| ranges | LavaLampRangeStylesProps | no | {} | Propiedades de rango aleatorio para determinar el movimiento, escala y posición de los elementos. |
| className | string | no | '' | Clase CSS adicional para personalizar el contenedor del componente. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Uso básico
<LavaLamp />- Con estilos personalizados
<LavaLamp styles={{ width: "80%", height: "600px" }} />- Con elementos personalizados
<LavaLamp stylesElement={[{ width: "200px", background: "red" }]} />