/* globals.css sau main.css */
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient-shift 6s ease infinite;
}
/* Utilizare HTML + Tailwind */
/* <button class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 animate-gradient text-white font-bold py-3 px-6 rounded-lg">
Click me
</button> */Am văzut prea mulți juniori care trag framer-motion sau gsap în proiect doar ca să animeze un amărât de gradient pe un buton sau titlu. În 2024, să încarci 35kB de JavaScript pentru o chestie pe care browserul o face nativ pe GPU mi se pare o risipă uriașă. În postarea asta îți arăt cum rezolvi tema asta direct din Tailwind și câteva linii simple de CSS.
De ce să nu tragi librării JS pentru un gradient
La un proiect recent pentru un SaaS (aveam cam 40k vizitatori unici pe lună), clientul insista pe animații „vii” în zona de Hero. Echipa inițială trăsese Framer Motion și două utilitare de react-spring. Rezultatul? TTI-ul (Time to Interactive) pe mobil era praf, iar bundle-ul crescuse nejustificat.
Am dat jos JS-ul inutil, am trecut totul pe CSS pure keyframes și am economisit aproape 40kB la build-ul final. Scorul de Lighthouse a sărit instant de la 78 la 96 pe mobil. Ideea din spatele gradientului animat e banală: creezi un gradient mai mare decât containerul (să zicem 200% lățime) și îi animi poziția (background-position) de la 0% la 100%.
Cum îl configurezi în Tailwind
În loc să te complici cu librării terțe, tot ce trebuie să faci este să extinzi tema în tailwind.config.js sau direct în fișierul tău global de CSS. Eu prefer direct CSS-ul global când lucrez cu proiecte Next.js sau Vite, pentru că e mai ușor de citit de către colegi când fac code review.
Creezi o animație simplă numită gradient-wave și o clasă utilitară custom. Secretul este proprietatea background-size: 200% 200%. Fără ea, gradientul stă fix pentru că browserul nu are unde să îl miște.
Trade-off-uri reale și unde să ai grijă
E un truc grozav, dar are și minusuri pe care trebuie să le știi înainte să îl pui peste tot prin aplicație.
- Avantaje: Zero JS trimis la client, 60fps constante, se randează impecabil și funcționează perfect cu orice culori din Tailwind.
- Dezavantaje: Dacă aplici animația asta pe un
divgigant care acoperă ecranul (100vwpe100vh) și trântești și unbackdrop-blurpeste el, GPU-ul de pe telefoanele mai vechi va gâfâi. Nu din cauza gradientului în sine, ci din cauza rasterizării pe suprafețe mari.
Părerea mea: limitează efectul la texte (bg-clip-text), carduri mici de pricing sau butoane principale de Call to Action. Acolo își face treaba perfect fără să doboare bateria utilizatorului.
Voi mai folosiți librării grele de animație pentru chestii simple de UI sau ați trecut complet pe CSS nativ?