Gradient animat cu Tailwind și CSS pur — zero librării externe

M-am lovit recent de o cerință clasică: un hero section cu un gradient fin care se mișcă lent pe fundal. Clientul văzuse efectul de "auroră boreală" pe site-uri mari de SaaS și voia neapărat ceva similar. Prima reacție a multor developeri este să arunce în proiect Framer Motion sau vreo altă librărie greoaie de JavaScript.

Personal, prefer să țin bundle-ul cât mai curat. Am rezolvat totul cu CSS pur și Tailwind, economisind vreo 35kb de JS inutil și păstrând scorul de Lighthouse la 100.

Trucul din spate: Dimensiunea contează

Ca să poți mișca un gradient, el trebuie să fie fizic mai mare decât containerul în care se află. Dacă fundalul are exact 100% din lățimea ecranului, browserul n-are unde să-l mute.

Soluția e simplă: mărești gradientul la 200% (folosind utilitarul bg-[length:200%_200%]) și apoi muți coordonatele background-position dintr-un colț în altul folosind keyframes. Astfel, utilizatorul vede doar o porțiune din gradient la un moment dat, iar mișcarea creează iluzia de fluiditate.

Configurarea în Tailwind

Pentru că Tailwind nu are din fabrică utilitare pentru animații complexe de poziție, trebuie să extindem puțin configurarea în tailwind.config.js. Adăugăm animația personalizată și keyframes-urile necesare în secțiunea de extend.

După ce ai configurat asta în config, în HTML-ul tău tot ce trebuie să faci este să aplici clasele pe elementul container:

<div class="w-full h-96 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-[length:200%_200%] animate-gradient-slow">
  <!-- Conținutul tău aici -->
</div>

Folosirea unei culori intermediare (via-purple-500) este esențială. Dacă folosești doar două culori extreme, tranziția va părea destul de rigidă. O a treia culoare adaugă profunzime și face ca trecerea să pară organică, aproape lichidă.

Un trade-off sincer despre performanță

Deși această metodă este extrem de simplu de implementat și nu necesită JS, trebuie să fii conștient de limitările ei de performanță.

• Unde merge brici: Pe elemente mici, butoane, text cu gradient animat sau hero-uri de dimensiuni medii.
• Unde e riscant: Dacă pui animația asta pe un container care ocupă tot ecranul (w-screen h-screen) și o testezi pe un telefon mobil ieftin de acum 4 ani. Proprietatea background-position forțează browserul să facă repaint la fiecare cadru (frame). Pe ecrane mari de tip Retina, asta înseamnă că procesorul grafic (GPU) va munci serios, iar bateria utilizatorului se va descărca vizibil mai repede.

Am avut cazul unui landing page cu 15k vizitatori unici pe lună unde am testat asta. Pe ecranele 4K apărea un mic stutter (sărituri de cadre) la scroll. Soluția a fost să reduc dimensiunea gradientului de la 400% la 200% și să măresc durata animației la 15 secunde pentru a reduce numărul de calcule pe secundă.

Dacă ai nevoie de animații de fundal pe pagini extrem de lungi și complexe, uneori e mai sigur să folosești un element separat cu will-change-transform pe care să aplici transform: translate() în loc de background-position. Transformările sunt trimise direct către GPU și nu declanșează repaint-uri masive în browser.

Tu ce trucuri folosești ca să eviți JS-ul când vine vorba de animații simple pe web?