Sunlit es un proyecto web de código abierto que reproduce el efecto visual de la luz del sol entrando por una ventana, junto con el movimiento de hojas mecidas por el viento. La implementación se realiza íntegramente con CSS, HTML y un filtro SVG, sin recurrir a JavaScript ni a imágenes en movimiento. Toda la escena se construye a partir de capas de divs con fondos, persianas modeladas con transformaciones y hojas estáticas obtenidas de Adobe Stock, reducidas a unos 300x500 píxeles para desenfocarlas con posterioridad.
Uno de los retos técnicos resueltos es el difuminado progresivo: el autor apila varias capas con backdrop-filter: blur y máscaras CSS con degradados lineales, cada una con un radio de desenfoque distinto (de 6 a 96 píxeles) y una zona de influencia diferente. Así, los elementos más cercanos a la pared aparecen menos difuminados que los alejados, simulando la difusión natural de la luz.
Para animar las hojas se combinan transformaciones CSS (rotación y escala en perspectiva) con un filtro SVG que emplea feTurbulence y feDisplacementMap, generando ruido fractal animado que ondula cada hoja de forma individual. El proyecto también incorpora una transición de día a noche con colores de atardecer seleccionados manualmente y un brillo sutil que imita el rebote de la luz en el suelo.
Finalmente, para conseguir una distorsión de perspectiva realista —que no es posible con skew o rotate, limitados a transformaciones afines— se calcula una matriz de homografía 4D en Python mediante resolución de un sistema lineal con NumPy, y se traslada a CSS como matrix3d, permitiendo mapear la escena rectangular sobre un plano en perspectiva. Sunlit está inspirado en Daylight Computer y en sunlit.place, y se publica como proyecto personal en GitHub bajo el repositorio jackyzha0/sunlit.