CSS-Doodle: Diseños Dinámicos Sin JavaScript

El proyecto v0.50.2 introduce un conjunto de selectores CSS personalizados para generar patrones visuales y animaciones basados en una cuadrícula. Esencialmente, permite crear diseños complejos y dinámicos directamente en CSS, sin necesidad de JavaScript. La utilidad principal reside en la capacidad de manipular visualmente elementos de una cuadrícula de forma declarativa, lo que facilita la creación de efectos visuales interesantes y la experimentación con diseños.

El corazón del sistema son los selectores :doodle y :container. :doodle se refiere al elemento principal que contiene la cuadrícula, permitiendo definir propiedades generales como el tamaño de la celda (@grid) y el espaciado (gap). :container se encarga de la estructura de la cuadrícula en sí misma, utilizando CSS Grid Layout para organizar las celdas. La propiedad --s y el cálculo transform: translateY(var(--offset)) permiten crear animaciones de desplazamiento vertical al pasar el ratón