Círculos con paralaje
Mueve el puntero. Cada anillo se desplaza con su propio factor de paralaje mientras contrarrota a su propio ritmo. El mismo componente anima los fondos de sección del resto del sitio.
Cómo funciona
Un único par de valores de movimiento sigue al puntero. Cada anillo obtiene su centro multiplicando esos valores por un factor por capa — los anillos exteriores se mueven más que los interiores, lo que transmite la profundidad sin ninguna matemática 3D.
La rotación es independiente: cada anillo elige una duración y una dirección aleatorias al montarse y gira sin fin. Los trazos son discontinuos y usan pathLength="100" para que el patrón del guion se mantenga constante sin importar el radio.
Modelo de perspectiva
El tamaño no se ajusta a mano anillo por anillo — surge de una fórmula de cámara estenopeica. Cada anillo se sitúa a una profundidad de mundo d entre focalLength (el más cercano) y focalLength + worldDepth (el más lejano), y su radio proyectado es (focalLength · maxRadius) / d.
Esa única razón le da a toda la composición su "lente":
- Distancia focal corta — gran angular. Los anillos cercanos dominan, los lejanos se encogen con fuerza. Mucha profundidad.
- Distancia focal larga — teleobjetivo. Cercanos y lejanos se comprimen hacia el mismo tamaño. Más plano, más tranquilo.
El paralaje sigue la misma razón: el factor de puntero de cada anillo es proporcional a su radio proyectado, así que los anillos cercanos se desplazan más que los lejanos de forma gratuita.
Patrones de movimiento
El componente acepta una prop motionPattern. Tres estilos de seguimiento:
- resorte — con rebote, el predeterminado. Se pasa un poco y se siente vivo.
- suave — interpolación exponencial en cada fotograma. Más calmado, sin rebote.
- directo — sin suavizado. Ágil, más nervioso, más fiel a la entrada.
Variantes
El mismo componente, distintas lentes. Cada mosaico comparte la geometría — solo cambian focalLength y el patrón de movimiento. Pasa el cursor por ellos para sentir el cambio de profundidad.