Eclipse Ink
Platforma niezależnej artystki tatuażu: trójwymiarowe wejście, archiwum 26 oryginalnych wzorów, formularz projektu na zamówienie i sprzedaż licencji na wzory.
- Rodzaj
- Projekt dla klienta
- Typ
- Strona marki, archiwum wzorów, zapytania i sklep z licencjami
- Platforma
- Web · komputer i telefon
Nagranie wejścia na stronę Eclipse Ink: hala z portalem zaćmienia, kliknięcie „Enter the Eclipse”, przelot kamery przez portal, logo marki i pierwsze kadry przewijanej sekwencji.
Nagranie wejścia na stronę Eclipse Ink na telefonie: scena portalu, przejście i pierwszy ekran strony.
Overview
Eclipse Ink to marka oryginalnych wzorów tatuaży i projektów na zamówienie. Strona ma łączyć galerię z działającym narzędziem: prezentuje prace, prowadzi przez zapytanie o projekt indywidualny i przygotowuje sprzedaż cyfrowych licencji na wzory.
Pierwszy kontakt to scena trójwymiarowa — hala z portalem zaćmienia, wodą i reliktami — którą można pominąć jednym przyciskiem. Dalej strona przechodzi w przewijaną sekwencję kadrów i archiwum prac, gdzie najważniejsza jest sama grafika.
Za stroną stoi panel właściciela: katalog wzorów, kategorie, ceny, zamówienia, klienci, ustawienia i dziennik zmian. Sprzedaż jest przygotowana, ale obecnie wyłączona — publikacja wzoru pokazuje go w galerii, nie otwiera zakupu.
Project Showcase
Zrzuty i nagrania z działającej wersji projektu, w jego własnej stylistyce. Grafiki są własnością autorki wzorów.
Telefon
- Wejście · nagranie
Nagranie wejścia na stronę Eclipse Ink na telefonie: scena portalu, przejście i pierwszy ekran strony.
Start
Archiwum
Wzór
Projekt na zamówienie
Funkcjonalności
- 01
Wejście w trzech wymiarach
Scena WebGL z portalem, wodą z odbiciem i pyłem. Można ją pominąć; przy ograniczonym ruchu przejście jest skrócone.
- 02
Przewijana sekwencja
Kadry numerowane od 00, przewijane płynnie, z tekstem i fotografią prowadzącymi do archiwum.
- 03
Archiwum 26 wzorów
Galeria z filtrami i stroną każdego wzoru: miejsce na ciele, skala, kategoria i podgląd artwork / stencil.
- 04
Zapisane wzory
Ulubione wzory odkładane na później i dołączane jako odniesienie do zapytania o projekt.
- 05
Zapytania o projekt
Osobne ścieżki: projekt tatuażu na zamówienie i projekt dla firmy (logo, identyfikacja).
- 06
Sklep z licencjami
Dwie licencje na wzór: otwarta i wyłączna. Płatność przez Stripe Checkout, pliki z prywatnego magazynu. Obecnie wyłączony.
- 07
Panel właściciela
Wzory, kategorie, ceny, zamówienia, klienci, ustawienia i dziennik zmian — bez edycji kodu.
Technologie
Tylko to, co jest używane — sprawdzone w zależnościach i importach kodu projektu.
- Next.js 16 · React 19
- App Router, trasy API, metadane i mapa strony
- TypeScript
- cały projekt
- Three.js
- scena wejścia: geometria, woda, odbicie, mgła, postprocessing
- GSAP + ScrollTrigger
- sekwencja przewijania strony głównej
- Lenis
- płynne przewijanie
- Tailwind CSS 3 · CSS Modules
- style stron i sceny wejścia
- PostgreSQL (Neon)
- katalog, zamówienia, panel, dziennik zmian
- Stripe Checkout
- płatności za licencje (tryb sprzedaży wyłączony)
- Vercel
- hosting, zadanie cykliczne ponawiania zapytań
- Playwright · node:test
- testy wejścia, sklepu i panelu
Podejście techniczne
- R01.1
Scena budowana w kodzie
Architektura hali, sylwetki i woda to geometria tworzona programowo, nie gotowe modele. Woda ma prawdziwy ruch wierzchołków i odbicie renderowane drugą kamerą.
- R01.2
Bezpieczne wejście
Silnik sceny startuje dopiero, gdy jest potrzebny. Pominięcie intro w trakcie ładowania nie uruchamia WebGL, a przejście do strony jest ciemne, bez błysku.
- R01.3
Sprzedaż odporna na wyścigi
Rezerwacja licencji wyłącznej to jedna warunkowa operacja w bazie — przy wielu jednoczesnych kliknięciach wygrywa jedna. Testy odpalają 12 prób naraz.
- R01.4
Płatność potwierdza serwer
Sprzedaż kończy tylko zweryfikowane zdarzenie od dostawcy płatności. Webhooki są idempotentne, ceny zawsze pochodzą z serwera.
- R01.5
Panel z dwoma składnikami
Logowanie hasłem i kodem z aplikacji, kody zapasowe, sesje w ciasteczku HttpOnly, limit prób, ochrona CSRF i dziennik zmian.
UX/UI
Grafika jest najważniejsza
Czerń, papier i jeden szeryfowy krój. Interfejs cofa się, żeby wzory były najmocniejszym elementem.
Wejście nie blokuje
Przycisk „Skip intro” jest widoczny od początku, a po wejściu scena nie wraca przy powrocie na stronę główną w tej samej wizycie.
Od galerii do zapytania
Zapisany wzór staje się odniesieniem w formularzu projektu indywidualnego — galeria prowadzi do rozmowy.
Telefon ma własny układ
Na telefonie sekwencja ma pionowe kadry, a przyciski są na całą szerokość.
