Bento-grid med levende kanter
Innleggene ligger i et asymmetrisk rutenett der hvert kort har sin egen størrelse, sin egen generative farge og en kant som roterer.
Gridet følger et fast mønster av spenn som gjentas: ett stort hovedkort, to høye og en rekke små. Det gir rytme uten at redaksjonen må tenke på layout.
Kanten er en conic-gradient som maskeres til en ramme på 1,5 px. Vinkelen er registrert med @property --angle, slik at nettleseren kan animere den. Det går ikke med vanlige CSS-variabler.
Kort uten fremhevet bilde får en generativ mesh-gradient der fargetonen er avledet av sluggen. Samme innlegg får alltid samme farge.
@property --angle {
syntax: "<angle>"; initial-value: 0deg; inherits: false;
}I koden: components/BentoGrid.tsx · app/globals.css (.card, .mesh)