Leptir ide u produkciju

Napravili smo leptira - i na kraju pisali o svemu osim o krilima.

Znak s namjerom

Većina logotipa stoji u mjestu. Monarch znak ne stoji, jer ne stoji ni studio. Krila mašu, toraks svijetli, linije pulsiraju. Ništa od toga nije trik radi trika: svako ponašanje odražava režim.

U poslovnom režimu leptir je jednobojan - čist potez tušem. Linije prelaze u neutralnu boju, oreol blijedi, krila miruju. To je verzija koju vidi CTO dok nas procjenjuje za novi backend. Utisak je smiren.

Prebacite na kreativni režim i isti SVG se zasiti bojom. Narandžaste linije zasvijetle na krilima, oreol oko toraksa diše, krila počinju svoje sporo mahanje. Isti podaci putanje, potpuno drugačiji utisak.

Jedan SVG, dva lica

Trik je u tome što je sve CSS. Geometrija putanja je fiksna - mijenjaju se samo strokes, fills i animacije, zavisno od [data-mode] atributa na root elementu. Nema uslovnog renderovanja, nema JavaScripta po frejmu, nema žongliranja s dva asseta.

[data-mode="creative"] .bf .bf-trace {
  stroke: var(--orange) !important;
  opacity: 1;
}
[data-mode="creative"] .bf .bf-wing-r {
  animation: flapR 3s ease-in-out infinite;
}

Atribut [data-mode] se sada postavlja na serveru, iz cookie-ja. To znači da je leptir ispravan već na prvom paintu - nema bljeska iz poslovnog u kreativni kad neko ponovo učita stranicu u režimu koji više voli.

Šta bismo promijenili

Iskreno? Manje. Kad portujete iz samostalnog HTML demoa, iskušenje je da sve “poboljšate”. Najčešće je originalni autor imao svoje razloge. Tajming mahanja krilima zadržali smo tačno onako kako je dizajniran, jer brže izgleda nervozno, a sporije izgleda beživotno. Petlja od 3 sekunde je pravi odgovor.

Jedina prava zamjena bio je sam prelaz između režima - sweep trake za poslovni, eksplozija čestica za kreativni. Taj dio je prosto molio da ga prenesemo vjerno, i tako smo i uradili.