Sve je počelo kada sam htio napraviti liquid glass komponente, ali za web. Htio sam da sve bude glatko, moderno i da izgleda kao Appleov dizajn koji je na mobitelima. Tako su nastale komponente grgurevic-ui.

Zašto baš Apple stil?

Kada koristim aplikacije, najviše mi se sviđa kako možeš klikati, vući i sve reagira. Obični gumbi na web stranicama su dosadni jer se ništa ne događa kada ih klikneš. Zato sam odlučio napraviti gumbe koji imaju osjećaj težine, povećaju se kada ih stisneš i prate tvoj prst ili miš. Za ovo sam koristio Svelte jer je stvarno brz i jednostavan, a stilove sam pisao u Tailwindu. (Morao sam i u CSS-u jer tailwind jednostavno ne podržava ovake kompleksne klase)

Što sam sve složio?

Neke komponente su mi zadale puno muke, ali na kraju izgledaju predobro:

1. Gumbi: Ovi gumbi imaju onaj sjaj kao pravo staklo na svjetlu. Ako ih povučeš, ponašaju se kao da ih drži magnet pa se vrate na mjesto. (Doslovce kopirano)
2. Glass View: To su kutije koje izgledaju kao zamućeno staklo. Najbolja stvar je što ih možeš primiti mišem i vući, a one se same polako zaustave jer imaju težinu.
3. Prekidači: Prekidač koji se glatko prebaci s jedne strane na drugu uz mekani odskok na kraju.
4. Navigation Stack: To je ono kada listaš stranicu prema dolje, a gornji veliki naslov se smanji i zamuti, baš kao u postavkama na iPhoneu. Za to sam koristio GSAP za animacije.
5. Ima još...

Kako je izgledao rad?

Bilo je dana kada mi ništa nije radilo i kada sam htio sve obrisati. Najteže je bilo namjestiti te animacije da ne trzaju i da sve radi glatko. Koristio sam shadcn-svelte da ne moram pisati sve od nule, a ja sam onda dodao sav taj stakleni dizajn i pokrete.

Hoće li biti ažuriranja?

Naravno. Planiram dodati još puno stvari, pratim što se novo izbacuje i pokušavam rekreirat. Bit će tu puno novih komponenti i mogućnosti.

Github: https://github.com/grgurevic/ui Docs: https://ui.grgurevic.click/