← ./work / SIGNAL_GARDEN.web
SIGNAL_GARDEN.web
Spletna stran za animacijski studio, ki zraste ob drsenju
Animacijski studii navadno začnejo s težkim videom. SIGNAL_GARDEN je študija strani, ki je sama majhna animacija: narisane črte, ki rastejo, se razvejajo in se umirijo v delo.
- Vrsta
- Spletna stran za umetnike
- Leto
- 2025
- Vloga
- Koncept, oblikovanje, animacija
- Stanje
- Koncept
Koncept Študija, kako bi se lotila takšnega problema, ne naročniški projekt.
$ cat ./targets — ciljne vrednosti, ne izmerjeni rezultati
- < 60 KB
- JavaScripta na stran
- < 1,5 s
- do prve risbe na 4G
- 6
- velikosti slike na delo
- 0
- gibanja z zmanjšanim gibanjem
Ideja
Stran se začne skoraj prazna. Drsenje riše črte, vsak projekt pa vzcveti iz svoje veje. Gibanje je tu vsebina.
Objavljanje
Studio ureja projekte in posnetke v headless CMS-ju. Vsako shranjevanje sproži webhook, ki stran zgradi na novo kot statične strani, zasebna povezava za predogled pa pokaže spremembo, preden gre v živo.
Medijski cevovod
Gradnja se razveji: slike postanejo AVIF in WebP v šestih velikostih, posnetki se kodirajo v HLS lestvico, da predvajalnik izbere pravo kakovost za vsako povezavo, stran sama pa pošlje manj kot 60 KB JavaScripta.
Dostava
Vse se streže z robnega CDN-ja, zato se prva risba pojavi hitro v Tokiu in v Ljubljani. Video se naloži šele, ko se projekt bliža zaslonu.
Prijazno do vseh
Upošteva nastavitev za zmanjšano gibanje, najprej naloži lahko različico, vsak animirani del pa ima mirujočo alternativo. Studio lahko zamenja projekte, ne da bi se dotaknil kode.
$ trace — kako deluje
- 01Headless CMS
- 02Webhook ob objavi
- 03Statična gradnja
- 04Slike · video · paket
- 05Robni CDN
- 06Scroll pogon
- 07Showreel
$ open ./result — kako bi bilo videti