También llamado Floating particles, Particle field
Muchos puntos pequeños flotan, se conectan o reaccionan al puntero por el fondo.
Se usa en
Fondos de hero y de sección
Añade un fondo de partículas ("Particles", también llamado floating particles o particle field) en [dónde].
Puntos pequeños de distintos tamaños deben flotar y desplazarse despacio por trayectorias suaves y errantes, cada uno a su propio ritmo: tranquilo y ligero.
Usa una cantidad moderada de puntos para que siga siendo liviano en dispositivos lentos, páusalo cuando esté fuera de pantalla y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).También llamado Gradient blur edge
La intensidad del desenfoque aumenta poco a poco hacia un borde para que el contenido se desvanezca con suavidad.
Se usa en
Bordes de contenedores con scroll, cabeceras
Añade un borde "Progressive Blur" (también llamado gradient blur edge) en [dónde].
El contenido que se desplaza hacia el borde debe volverse cada vez más borroso y suave, aumentando de forma gradual en lugar de cortarse en una línea dura.
Muestra el desenfoque solo en un borde que todavía tenga más contenido detrás y evita que la zona desenfocada bloquee los clics o el scroll.
También llamado Perspective grid, Synthwave grid
Una cuadrícula en perspectiva inclinada avanza hacia el espectador como un suelo synthwave.
Se usa en
Heroes retro y futuristas
Añade un fondo "Retro Grid" (también llamado perspective grid o synthwave grid) en [dónde].
Un suelo de cuadrícula inclinado en perspectiva debe avanzar de forma constante hacia el espectador y desvanecerse en el horizonte: fluido e infinito.
Haz que el bucle sea continuo para que las líneas nunca salten y detén el desplazamiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).