Wzornik, app preview. A3, ciemny neon i cyber
Rygiel
Podgląd menedżera haseł z alertami wycieków: wersja do App Store, trzy formaty na social media i lekkie pętle na stronę. Światło jest tu materiałem: obrysy świecą, tekst się odszyfrowuje, a linia skanu odsłania kolejne ekrany.
- Wersja sklepowa
- 24 s, 886×1920, 30 kl./s
- Ruch
- odszyfrowanie, skan, puls poświaty
- Formaty social
- 9:16, 1:1 i 16:9
- Dźwięk
- brak, napisy czytelne bez niego
01 Klient i zadanie
O wycieku dowiadujesz się pierwszy
Rygiel to menedżer haseł dla osób, które mają 150 do 250 kont i wiedzą, że powinny o nie dbać, ale nie mają na to czasu. Ludzie powtarzają hasła i dowiadują się o wycieku po miesiącach, z wiadomości. Rygiel sprawdza wycieki na bieżąco i mówi, co zrobić, zanim ktoś skorzysta z hasła.
Zadanie: podgląd do App Store, który w pierwszej klatce pokaże alert o wycieku, a potem całą drogę od alertu do nowego hasła i zdrowego sejfu. Do tego trzy formaty na kampanię w mediach społecznościowych i pętle na stronę. Bez dźwięku, z napisami, które da się przeczytać.
- Użytkownik
- dorośli z 150 do 250 kontami, ostrożni, ale zabiegani
- Dane w historii
- sejf 214 wpisów, wyciek z Forum Wędkarskie Mazury 2.10.2026, wykryty 6.10.2026 o 07:12
- Trzy funkcje
- alert o wycieku z tym, co wyciekło, generator, który od razu zmienia hasło, zdrowie sejfu z listą do poprawy
- Ton
- spokojny i rzeczowy, alarm tylko tam, gdzie naprawdę jest wyciek
Alert wycieku
Twój adres e-mail pojawił się w wycieku
- Serwis
- Forum Wędkarskie Mazury
- Wyciek
- 2.10.2026
- Wykryty
- 6.10.2026, 07:12
- Wyciekło
- e-mail, nick, skrót hasła
Serwis, wyciek i adresy są zmyślone. Domeny kończą się na .example.
02 Kierunek
Światło jako materiał, kolor jako znaczenie
Menedżer haseł musi wyglądać na bezpieczny i nie może straszyć. Dlatego tło jest prawie czarne, z cienką siatką jak na ekranie monitoringu, a wszystko, co ważne, ma neonowy obrys. Cyjan znaczy „bezpiecznie” i „tu stuknij”. Różowa czerwień pojawia się tylko przy wycieku, bursztyn tylko przy słabych i powtórzonych hasłach.
Tekst jest w kroju o stałej szerokości, bo hasło trzeba umieć przepisać znak po znaku, a odszyfrowanie nie może przesuwać liter. Panele są pełne i matowe, bez szkła i rozmycia. Poświata jest zawsze kopią obrysu w tym samym kolorze i nigdy nie leży pod tekstem.
- Siatka
- Neonowy obrys
- Krój o stałej szerokości
- Alarm tylko przy wycieku
Dwa kroje, oba OFL
RYGIEL
Oxanium 800 i 600: znak, duże liczby, wynik 96 na 100
Twój adres e-mail pojawił się w wycieku
Azeret Mono 700: tytuły i przyciskiWykryty 6.10.2026, 07:12
Azeret Mono 500: etykiety, hasło, napisy w wideoZażółć gęślą jaźń, 214 wpisów
Azeret Mono 400: tekst i objaśnieniaDziewięć kolorów, dwa sygnały
- Próżnia#05070Btło każdego ekranu, tekst na cyjanie
- Panel#0A1018karty, pola, wiersze listy
- Siatka#12303Alinie siatki w tle, puste segmenty
- Obrys przygaszony#1D4A57obrysy kart i pól w spoczynku
- Neon cyjan#2CF6FFbezpiecznie, fokus, przycisk główny, linia skanu
- Tekst#D9FBFFtekst główny
- Tekst przygaszony#7FA6B0etykiety, daty i krótkie opisy
- Alarm#FF3D71tylko wyciek: karta alertu, to, co wyciekło
- Ostrzeżenie#FFB547hasła słabe i powtórzone
Kontrast na próżni: tekst 18,4:1, cyjan 15,1:1, alarm 5,9:1, bursztyn 11,5:1. Tekst przygaszony na panelu 7,3:1. Każda para przechodzi AA dla małego tekstu, a poświata nigdy nie leży pod tekstem.
03 Storyboard
24 sekundy od alertu do zdrowego sejfu
Sześć ujęć w 720 klatkach. Hak to alert czytelny od pierwszej klatki, z linią skanu, która przez niego przechodzi. Potem szczegóły wycieku, nowe hasło, odblokowanie sejfu, wieczorne porządki i ekran startowy z ryglem.
- Każda zmiana ekranu to skan z góry na dół w 20 klatek, odblokowanie sejfu w 30. Żadnych przesunięć ani przenikań.
- Trzy napisy, każdy najwyżej sześć słów i co najmniej 2,4 s na ekranie, w pasie między kartą a przyciskiem.
- Plakat sklepowy to klatka 30: alert zaraz po przejściu skanu. Domyślna klatka z piątej sekundy pokazuje gotowe szczegóły wycieku.
| Ujęcie | Klatki | Czas | Co się dzieje | Napis |
|---|---|---|---|---|
| 1. Alert | 0 do 59 | 0,0 s do 2,0 s | Od pierwszej klatki karta alertu w kolorze alarmu: serwis, daty i co wyciekło. Przez ekran przechodzi linia skanu, pierścień alertu pulsuje. | „Wiesz o wycieku pierwszy” klatki 0 do 75 |
| 2. Szczegóły | 60 do 179 | 2,0 s do 6,0 s | Skan odsłania szczegóły. Oś czasu rysuje się węzeł po węźle, godzina wykrycia 07:12 dostaje poświatę, to, co wyciekło, odszyfrowuje się na czerwono. | bez napisu |
| 3. Nowe hasło | 180 do 329 | 6,0 s do 11,0 s | Zmień hasło teraz: generator odszyfrowuje 20 znaków od lewej, segmenty siły zapalają się po kolei, ok. 131 bitów. Użyj tego hasła, hasło zmienione. | „Nowe hasło w trzy sekundy” klatki 186 do 265 |
| 4. Sejf | 330 do 479 | 11,0 s do 16,0 s | Sejf zablokowany, rygiel odsuwa się. Skan odsłania listę, wiersze odszyfrowują się z góry na dół, wpis forum ma znacznik „zmienione dziś”. | bez napisu |
| 5. Zdrowie sejfu | 480 do 629 | 16,0 s do 21,0 s | Wieczorem: wynik rośnie od 68 do 96, problemy skreślają się jeden po drugim, liczniki spadają do zera. Na koniec napis Sejf zdrowy. | „Sejf zdrowy w jeden wieczór” klatki 496 do 575 |
| 6. Zakończenie | 630 do 719 | 21,0 s do 24,0 s | Ekran startowy: obrys ikony rysuje się, rygiel zasuwa się, napis RYGIEL odszyfrowuje się pod spodem. | bez napisu |
04 Zasady ruchu
Tekst, który się odszyfrowuje, ale nie miga
Każdy ruch ma nazwę i wartość w tokenach projektu. Laboratorium poniżej używa tych samych liczb co wideo: porównaj czytelne odszyfrowanie z takim, które tylko miga.
Czytelny preset odsłania znak co 2 klatki, a każdy znak losuje przez 6 do 10 klatek, zmieniając się co drugą klatkę. Oko nadąża za nim od lewej do prawej, a gotowe hasło stoi potem na ekranie. Za szybki preset kończy się prawie od razu i przez ułamek sekundy tylko miga. Puls poświaty ma okres 36 klatek, czyli 1,2 s: oddycha, ale nie błyska.
- scramble · odsłanianie tekstu
steps(4), 267 ms- każdy znak losuje znaki ze swojej klasy przez 6 do 10 klatek, zmiana co 2 klatki, potem staje; od lewej, 2 klatki odstępu na znak; gotowy tekst stoi co najmniej 1,5 s
- scan · odblokowanie, alert i zmiana ekranu
cubic-bezier(0.65, 0, 0.35, 1), 1000 ms- linia 2 px w cyjanie z poświatą jedzie z góry na dół w 30 klatek i odsłania to, co pod nią; zmiana ekranu w 20 klatek
- pulse · pierścień alertu i poświata fokusu
cubic-bezier(0.37, 0, 0.63, 1), 1200 ms- krycie poświaty od 0,35 do 0,6 i z powrotem, okres 36 klatek, sinusoida
- draw · obrysy, oś czasu, rygiel w ikonie
cubic-bezier(0.33, 1, 0.68, 1), 600 ms- kreska rysuje się w 18 klatek
- step · wiersze list
steps(1), 100 ms- 3 klatki odstępu między wierszami; wiersz wchodzi przez odszyfrowanie, nigdy przez przesunięcie
- drift · siatka w tle, ruch ciągły
steps(1), 133 ms- 1 piksel na 4 klatki, stała prędkość; jedyny ruch liniowy, bo to tło, a nie interfejs
- Z góry na dół
- skan odsłania ekran, wiersze listy odszyfrowują się od pierwszego
- Znak po znaku
- od lewej, 2 klatki odstępu na znak, gotowy tekst stoi co najmniej 1,5 s
- Puls zamiast błysku
- poświata oddycha co 1,2 s między 35 a 60% krycia
- Jedyny ruch liniowy
- siatka w tle płynie stałym tempem, interfejs nigdy
05 Ekrany
Sześć ekranów, jeden krój
Sześć ekranów z jednego mini design systemu: dziewięć kolorów, dwa kroje, obrys 1,5 piksela, siatka co 24 piksele i przyciski o wysokości 56 pikseli. Projekt w kanwie 443×960, render w skali 2, czyli dokładnie 886×1920.
06 Wersja sklepowa i formaty
Sklep pokazuje aplikację, social opowiada historię
Apple wymaga, żeby podgląd w sklepie pokazywał prawdziwy interfejs, więc wersja sklepowa to sam ekran aplikacji. Wersja marketingowa ma telefon narysowany neonową linią, dwie warstwy siatki, które płyną z różną prędkością, i terminal, w którym nagłówek, podpis i opis odszyfrowują się po kolei, a telefon stoi obok jako panel w ramce z celownikiem.
07 Co dostaje klient
Pliki gotowe do wgrania
Klient dostaje pliki gotowe do wgrania, z parametrami sprawdzonymi przez ffprobe. Wersje pełnej jakości są za duże na stronę, dlatego tutaj odtwarzają się lekkie pętle bez dźwięku, w formacie WebM i MP4.
| Plik | Do czego | Wymiary | Długość | Kodek | Bitrate | Rozmiar |
|---|---|---|---|---|---|---|
| rygiel-store-886x1920.mp4Wersja sklepowa | App Store Connect, podgląd aplikacji na iPhone | 886×1920, 30 kl./s | 24,0 s, 720 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 11,4 Mb/s | 32,7 MB |
| rygiel-social-1080x1920.mp4Wersja marketingowa 9:16 | Reels, TikTok i Shorts | 1080×1920, 30 kl./s | 23,0 s, 690 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 6,1 Mb/s | 16,9 MB |
| rygiel-social-1080x1080.mp4Wersja marketingowa 1:1 | post w kanale | 1080×1080, 30 kl./s | 23,0 s, 690 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 4,3 Mb/s | 11,9 MB |
| rygiel-social-1920x1080.mp4Wersja marketingowa 16:9 | YouTube, link w Google Play | 1920×1080, 30 kl./s | 23,0 s, 690 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 7,0 Mb/s | 19,2 MB |
| Pętla | Wymiary | Długość | WebM, VP9 | MP4, H.264 |
|---|---|---|---|---|
| Nagłówek strony, 16:9rygiel-hero | 1280×720 | 23,5 s | 1,8 MB | 2,0 MB |
| Nagłówek na telefonie, 9:16rygiel-hero-9x16 | 540×960 | 23,5 s | 1,2 MB | 1,4 MB |
| Kwadrat, 1:1rygiel-social-1x1 | 720×720 | 23,5 s | 1,4 MB | 1,2 MB |
| Wersja sklepowarygiel-store | 442×960 | 24,5 s | 1,4 MB | 1,3 MB |
| Kafel z pętląrygiel-tile | 480×600 | 5,0 s | 238 KB | 249 KB |
- Ikona
- 1024×1024 PNG bez przezroczystości i podgląd z zaokrągleniem
- Storyboard
- tabela ujęć z klatkami i plansza klatek kluczowych z osią czasu
- Ekrany
- sześć ekranów interfejsu w 886×1920
- Projekt ruchu
- odszyfrowanie, skan, puls i siatka zapisane w tokenach, opisane jak tutaj
Twoja aplikacja chroni coś ważnego?
Napisz, co robi Twoja aplikacja i kto jej używa. Zaproponuję storyboard i styl ruchu, a potem dowiozę komplet plików do App Store, Google Play i mediów społecznościowych.
Zobacz ofertę dla klientów