Przejdź do treści
Sweet Lava Design System
↗ Strona

Fundamenty Gradienty

Fundamenty

Gradienty tematów

Okładki bloga nie są zdjęciami – to gradienty budowane z palety tematów wpisu. Każdy wpis jest inny, ale zostaje w jednej rodzinie pasteli. System skaluje się: nowy temat = nowy pastel.

Paleta tematów

Dziesięć jasnych pasteli rozłożonych po kole barw. Tematy techniczne trzymają błękity, kreatywne – ciepłe akcenty. Definicja: TAGS w lib/topics.ts.

AI #FEE7ED
Branding #F5ECFE
Development #E7F0FE
Strony #E7FAFD
SaaS #E7EBFE
Mobile #F1ECFD
Product #E3FCF5
UX/UI/AX #FEEEE7
E-commerce #FEF3E7
DTP #FEECF9

Gradient z tagów

Funkcja gradientFromTags() składa kolory tagów po przekątnej (135°). Jeden tag rozjaśnia się ku sobie, dwa–trzy tworzą płynne przejście między tematami.

1 tag · Strony

css 
background-image: linear-gradient(135deg, #eafbfe, #d4f6fc);

2 tagi · AI + Development

css 
background-image: linear-gradient(135deg, #fed3de, #d3e4fe);

3 tagi · Branding + UX + DTP

css 
background-image: linear-gradient(135deg, #ebd8fd, #fee0d3, #fdd8f3);

Pogłębianie koloru (sat)

Parametr sat (0–1) reguluje głębię: 0 – jaśniejsze (hero wpisu), 0,5 – pośrednie (karty na listingu), 1 – najmocniejsze. Ten sam zestaw tagów, trzy intensywności.

sat = 0

sat = 0.5

sat = 1

ts 
import { gradientFromTags } from '@/lib/topics';

// AI + SaaS, pogłębione w połowie
const grad = gradientFromTags(['ai', 'saas'], 0.5);
// → "linear-gradient(135deg, #feceda, #ced6fe)"

Animowana okładka (cover-flow)

Na produkcji warstwa gradientu płynie poziomo (scroll / hover / przechył telefonu) – tu demo o stałej prędkości. Wzór to repeating-linear-gradient, a ruch to wyłącznie transform: translateX na GPU, więc koszt jest znikomy. Pętla jest bezszwowa: warstwę przesuwamy dokładnie o jeden okres.

Branding · Strony · SaaS

shift = 551.54px

AI · Development

shift = 551.54px

Product · UX

shift = 551.54px

css 
.cover-anim { position: relative; overflow: hidden; }
.cover-anim__layer {
  position: absolute; inset: 0;
  width: calc(100% + var(--cover-shift)); /* + jeden okres poziomy */
  background-image: var(--cover-grad);     /* repeating-linear-gradient */
  transform: translate3d(0,0,0);           /* sterowane z JS (scroll/hover) */
}

Jak to działa

Cały potok mieści się w jednym module – bez stanu, deterministycznie.

  1. Tagi wpisu – kategoria (tag główny) + do dwóch usług z related.services (tagi poboczne), maks. 3.
  2. Kolory – każdy tag ma jeden pastel; saturate() pogłębia go wg sat.
  3. Gradient – gradientFromTags() składa przystanki pod kątem 135°.
  4. Pętla – coverFlow() zwraca dodatkowo shift = okres poziomy do bezszwowej animacji.