Haz de luz
Un rayo que baja desde arriba y aterriza en un punto: núcleo blanco, halo, niebla que se arremolina, vetas finas, motas de polvo y un destello donde toca la superficie. Con el puntero encima apunta al puntero; si no, se balancea despacio. El haz no es una imagen, es una distancia: para cada píxel se calcula cuánto cae perpendicular a la línea entre el origen y el impacto y cuánto avanza a lo largo de ella; de la perpendicular salen núcleo, halo y niebla (gaussianas de distinta anchura) y de lo que avanza, el desvanecimiento por arriba y el corte en el suelo. Las vetas y el polvo viven en esas mismas coordenadas, así que viajan con el haz. La salida es transparente, con alfa premultiplicado, y se suma al fondo sin un cuadrado negro. Un láser de adorno en cada portada es lo que hoy se lee como hecho por una IA: úsalo cuando apunte a algo que importa.
- WebGL, shader propio, sin dependencias, se pausa
Y el original de React Bits: Laser Flow
Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Laser Flow, y esto es lo que vimos del suyo por si prefieres usar el original.
Cuándo sí
Para la portada de un producto técnico o de seguridad, con una superficie sobre la que apoyar el haz. El brillo vale si dice algo.
Ojo con
Un láser de adorno en cada hero es justo lo que hoy se lee como «hecho por IA». Úsalo con una razón: que el haz apunte a lo que importa. Tiene una prop paused para pararlo.
Accesibilidad
Respeta el movimiento reducido del sistema y es puramente decorativo.
- Laser Flow
pnpm dlx shadcn@latest add @react-bits/LaserFlow-TS-TW