Trzy marki, których nie ma. Trzy strony, które mogłyby jutro wystartować.
To nasz poligon: fikcyjne marki, prawdziwy kod. Każda strona ma inną branżę, paletę, typografię i inny pomysł na ruch, a wszystkie działają na żywo. Otwórz dowolną i przewiń ją od początku do końca.
KWAS
Strona, która fermentuje razem z przewijaniem.
Jasna, żółtozielona jak solanka strona pracowni kiszonek. Litery w hero oddychają na osi szerokości kroju i reagują na kursor, wieczko słoika odkręca się przy scrollu i przechodzi w pełnoekranowe zdjęcie, a słoik w sekcji usług dojrzewa kolorem od kapusty do buraka.
Strona to słoik, a przewijanie to kolejne dni fermentacji. Pasek postępu jest paskiem pH, od 7,0 do 3,4.
- Litery reagujące na kursor (zmienna oś szerokości kroju)
- Wieczko odkręcane scrollem, które staje się pełnoekranowym zdjęciem
- Zalanie burakiem i wejście do zdjęcia przez literę Y
- Wskaźnik postępu jako pasek pH
- Branża
- Gastronomia, rzemiosło
- Hero
- Kinetyczna typografia i canvas
- Paleta
- SolankaBurakKapustaTaśma
- Typografia
- Bricolage Grotesque, Literata
- Technologie
- Next.jsGSAP ScrollTriggerFramer MotionLenisCanvas 2D
Obserwatorium Połonina
Całe niebo w przeglądarce, policzone dla prawdziwej szerokości geograficznej.
16 000 gwiazd w WebGL, ustawionych jak nad Wetliną i obracających się wokół Gwiazdy Polarnej. Scroll wydłuża naświetlanie i zostawia smugi gwiazd, gasi łunę miasta w sekcji o zanieczyszczeniu światłem i unosi kamerę ku Drodze Mlecznej. Kursor pokazuje prawdziwe współrzędne punktu na niebie.
Strona to jedna noc od zmierzchu do świtu. Zegar w rogu mówi, która jest godzina, a cała strona świeci na czerwono, bo tak pracuje się w obserwatorium.
- Niebo WebGL sterowane scrollem z jednego źródła stanu
- Liczba widocznych gwiazd rośnie wraz z ciemnością nieba (skala Bortle’a)
- Konstelacje rysowane linia po linii z prawdziwych współrzędnych
- Kalendarz nocy z fazą Księżyca liczoną na żywo
- Branża
- Turystyka, edukacja
- Hero
- WebGL (Three.js)
- Paleta
- NocLatarkaŻarŚwit
- Typografia
- Bodoni Moda, Hanken Grotesk
- Technologie
- Next.jsThree.js (WebGL)GSAP ScrollTriggerFramer MotionLenis
OSNOWA
Strona, która tka tkaninę z twojego scrolla.
Nici osnowy w hero szarpie się kursorem jak struny. Karta perforowana przebija się przy scrollu i układa w napis, usługi przesuwają się w poziomie jak rozwijane bele, a w kulminacji scroll przepuszcza wątek rząd po rzędzie, aż powstaje żakardowy napis. W CTA wpisane słowo od razu staje się wzorem koca.
Strona to program dla krosna: od karty perforowanej z 1804 roku, przez nici, do gotowej tkaniny i metki z symbolami prania.
- Nici osnowy z fizyką struny, reagujące na kursor
- Poziomy tor usług przypięty do scrolla
- Tkanie napisu rząd po rzędzie w canvasie
- Generator wzoru koca z dowolnego słowa
- Branża
- Tekstylia, produkcja
- Hero
- Generatywny canvas 2D
- Paleta
- BawełnaIndygoSzafranKoszenila
- Typografia
- Archivo (wdth 62–125)
- Technologie
- Next.jsCanvas 2DGSAP ScrollTriggerFramer MotionLenis
Chcesz stronę na tym poziomie?
Te same techniki stosujemy w projektach dla klientów. Stała cena, wycena w 48 godzin.
Porozmawiajmy o projekcieMarki, firmy i adresy są fikcyjne. Zdjęcia: Unsplash.