Jeden brand, štyri tvary, milión hitov.

Implementácia.

Všetky štyri masky sú definované raz v skrytom SVG ako clipPath s jednotkami objectBoundingBox, takže sa prispôsobia akémukoľvek rozmeru. Na element ich vešia CSS trieda. Vnútro masky sa na hover jemne zväčší na 1,03.

<svg width="0" height="0"><defs>
  <clipPath id="maska-kvet" clipPathUnits="objectBoundingBox">…</clipPath>
</defs></svg>

.masked--kvet { clip-path: url(#maska-kvet); }
.masked:hover img { transform: scale(1.03); }

Zakázané použitie.

✕ Takto nie

Maskovaná fotka nikdy neleží priamo na krémovom plátne. Vždy potrebuje pastelovú kartu pod sebou.

✕ Takto nie

Hity, ktoré miluješ. Najhranejšia hudba a tvoji moderátori naživo, kdekoľvek si. Text v maske stráca okraje a čitateľnosť.

Maska nikdy nesedí na texte. Oreže slová a zničí čitateľnosť. Masky sú len pre fotky, orby a plné plochy.

Pravidlá kontrastu.

• Text je vždy slivkový na svetlom podklade a krémový na slivkovom. Iné kombinácie neexistujú.
• Pastel nikdy nepodkladaj pod dlhý text. Znesie nadpis, chip alebo číslo, nie odsek.
• Magenta je akcent, nie plocha. Bodka za nadpisom, live pulz, podčiarknutie pri hoveri.

Tlačidlá.

Všetky tlačidlá sú pill. Primárne je slivkové s krémovým textom, ghost má slivkový border, candy stojí na pastelovej výplni so slivkovým textom.

Chipy.

Malé kapsuly na stav, čas a čísla. Live chip pulzuje magentou, count chipy nosia srdcia a bubliny.

NAŽIVO 224 24 12 400 ľudí počúva 10:00-14:00 po-pia · 06:00-10:00 Diskusia Vera a Expl0

Pill navigácia.

Plávajúca kapsula: logo kruh, pill linky a slivkový burger. Pri scrolle dole sa linky zasunú (trieda nav--shrunk), smerom hore sa rozvinú.

Statická ukážka zloženia. Na webe je kapsula fixovaná hore v strede a burger otvára fullscreen menu.

Karty.

Anatómia pastel karty s maskovanou fotkou, novinková karta s kvapka thumbom a stanica s gradient orbom.

Anatómia pastel karty

Popo šou s Andreou 14:00-18:00

1 2 3 4 5

1. Pastel podklad: karta v candy farbe s radiusom 28 až 36 px a jemným tieňom.
2. Organická maska: fotka orezaná tvarom, na hover sa vnútro zväčší na 1,03.
3. Hlavičkový riadok: avatar, Fraunces titulok a časový chip.
4. Chip rad: stav vysielania alebo čas, vľavo dole.
5. Pill CTA: slivková pilulka s ikonou a šípkou, vpravo dole.

Novinková karta Hudba Teddy Swims predstavil dojímavú novinku Break Up in Reverse včera

Kvapka thumb na soft pasteli, Fraunces titulok, na hover sa thumb pootočí a titulok podčiarkne magentou.

Stanica karta

Stanica Fun Chill

Ak stanica nemá fotku, masku vyplní gradient orb. Disk vpravo dole hrá a pri prehrávaní sa sfarbí do magenty.

Stack deck.

Podpisová mikrointerakcia brandu. Potiahni vrchnú kartu do strany alebo klikaj na šípky, balíček beží v nekonečnej slučke.

Živá ukážka · potiahni alebo klikaj

Deň s Verou a Expl0m 10:00-14:00

Sajfa šou pia 10:00

Najväčšie nové hity ut-pia 17:00

Mechanika

• Prah odletu je 28 percent šírky decku. Kratší ťah kartu pružne vráti na miesto.
• Karta sa počas ťahu nakláňa, rotácia je 0,05 stupňa na každý pixel posunu.
• Odlet aj návrat bežia na spring krivke cubic-bezier(.34,1.56,.64,1).
• Balíček je nekonečná slučka. Odletená karta sa bez animácie zaradí na spodok.
• Šípky a klávesy so šípkami fungujú vždy. Pri reduced motion sa ťahanie vypne a deck sa ovláda klikom.

Stavový diagram

Pokoj ťah prstom Ťah

Ťah za prahom Odlet zaradenie na spodok Pokoj

Ťah pred prahom Návrat spring Pokoj

Stack list.

Karty naskladané na sebe ako kôpka. Klik rozbalí jednu, ostatné sa zavrú. Akordeón so spring dobehom.

Adela a Sajfa

Rozhovory, ktoré sa nikam neponáhľajú. Adela a Sajfa a hostia, ktorí majú čo povedať.

Všetky epizódy

FUNúšik

Podcast pre rodičov aj deti. Hravé témy na cestu do školy aj na večer pred spaním.

Všetky epizódy

PODĽA MŇA

Názory bez servítky a témy, o ktorých sa rozprávaš s kamošmi. Tu ich počuješ nahlas.

Všetky epizódy

Karty sa prekrývajú záporným marginom, tieň mieri hore. Otvorená karta dostane triedu open a najvyšší z-index. Naraz je otvorená najviac jedna.

Veľké čísla.

Tenký Inter 300 s tesným rozostupom. Číslo sa pri scrolle napočíta smerom hore.

Prehrávač.

Fullscreen prehrávač s kvet maskou na pastel karte a dock ako slivková kapsula pri spodku obrazovky.

Fullscreen prehrávač · statická ukážka

Fun Rádio Deň s Verou a Expl0m

NAŽIVO12:36

Pauza 224 24

Zmenšený layout prehrávača v ráme telefónu 320 na 660.

Dock · mini prehrávač

Fun RádioHity, ktoré miluješ

V pokoji: play ikona, podtitul stanice, vlnovka stojí.

Fun RádioNaživo

Počas hrania: pauza, stav Naživo a rozbehnutá vlnovka v blush.

Pravidlá prehrávača

Pravidlo	Správanie
Jeden zvuk	Celý web má jeden Audio element. Nové prehratie zastaví predošlé.
Waveform	Vlnovka sa hýbe len počas hrania. V pokoji stojí.
Esc	Kláves Esc zatvára fullscreen prehrávač aj menu.
Stream	Živý stream nemá časovú os. Ukazuje stav NAŽIVO a čas počúvania, epizóda má klasický progres.

Formuláre.

Krémové polia so slivkovým fokusom. Zaoblenie 18 px, search je plná pill.