Gradient animat cu Tailwind și CSS pur: Cum am salvat 45kB de JS

Am văzut recent un proiect în producție unde cineva trăsese toată biblioteca Framer Motion doar ca să animeze un gradient pe fundalul unui landing page. Sincer, mi s-a zburlit puțin părul pe ceafă. La un site de prezentare cu vreo 12k vizitatori pe lună, fiecare kilooctet de JavaScript descărcat degeaba pe un telefon mai vechi contează enorm. După ce am înlocuit acea animație JS cu o soluție pură în CSS, am salvat vreo 45kB din bundle-size și am văzut o îmbunătățire instantă la scorul de Lighthouse pe mobil.

Nu avem nevoie de JS pentru asta. Putem obține un efect fluid și elegant folosind doar Tailwind și un truc vechi de când lumea cu proprietatea background-position.

Trucul din spatele magiei

Browserele încă nu știu să animeze direct tranziția între două gradienturi diferite (deși se lucrează la asta în specificațiile noi). Soluția clasică și extrem de performantă este să definim un gradient mult mai mare decât elementul nostru — să zicem 200% sau 400% din lățimea lui — și apoi să mutăm poziția acestui fundal în mod continuu printr-o animație infinită.

Practic, mutăm camera de colo-colo peste o imagine mult mai mare.

Cum configurăm Tailwind-ul

Ca să nu scriem CSS clasic separat, cel mai curat este să extindem configurația de Tailwind. Avem nevoie de două lucruri: definiția animației (keyframes) și clasa de animație propriu-zisă.

Deschide tailwind.config.js și adaugă asta în secțiunea de theme.extend:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        gradient: {
          '0%, 100%': { 'background-position': '0% 50%' },
          '50%': { 'background-position': '100% 50%' },
        },
      },
      animation: {
        gradient: 'gradient 8s ease infinite',
      },
    },
  },
}

Ce am făcut aici? Am creat o animație numită gradient care mută poziția fundalului de la stânga la dreapta și înapoi. Am setat o durată de 8 secunde cu un timing function de tip ease ca mișcarea să pară organică, nu bruscă.

Cum îl folosim în HTML / React

Acum tot ce trebuie să facem este să aplicăm clasele pe elementul nostru. Trebuie să setăm bg-[length:200%_200%] (ca să mărim fundalul) împreună cu gradientul dorit și clasa de animație generată de Tailwind (animate-gradient).

Vezi codul de mai jos ca exemplu concret de implementare.

Compromisuri sincere

Soluția asta este excelentă pentru performanță deoarece rulează nativ, dar are și limitele ei:

• Consum de resurse pe ecrane imense: Chiar dacă e CSS pur, repictarea constantă a unui gradient mare pe ecrane 4K poate genera un mic spike de CPU pe laptopurile mai vechi fără GPU dedicat.
• Lipsă de control din JS: Dacă vrei ca animația să reacționeze fin la scroll sau la poziția cursorului, CSS-ul devine destul de rigid și s-ar putea să fii nevoit să revii la JS (sau CSS variables modificate din JS).

Pentru un simplu fundal mișcător pe un hero section însă, varianta asta e sfântă. Voi cum faceți genul ăsta de animații simple în proiecte? Tot pe JS mergeți din inerție sau mai folosiți trucuri din astea vechi din CSS?