Moodboard & Koncept / Wew. dokument

Co wybieramy z tych 4 stron - i co dorzucamy swojego.

Analiza 4 referencji, ktore wskazaliscie (Champions4Good, Museum of Money, Foudre, Juice Agency) + 3 propozycje hero-sekcji dla pinkyswear.pl do Waszej decyzji. Kazdy koncept wynika wprost z Waszego manifestu: "Anyone can generate. Few can direct."

Co mialo u nich zadzialac.

Wszystkie 4 strony to premium agencje i brandy - kazda z nich uzyla tego samego "framework'a" interakcji, choc w innym wydaniu. Wyciagam najmocniejsze elementy.

/ 01

Champions
4Good

champions4good.club

Manifesto-first. Duza typografia, smooth scroll, video w hero. Mocny tagline, ktory zostaje w glowie.

Manifesto Big type Video hero
/ 02

Museum of
Money

museumofmoney.com

Interaktywna "zabawka" - Cash Cascade. Jeden efekt specjalny, ktory tlumaczy o czym strona. Zapada w pamiec.

Playful Canvas Storytelling
/ 03

Agence
Foudre

agencefoudre.com

Face animation + SVG loader. Charakter, twarz, ludzie. Serif 900 (Beni 900) jako glowna typografia.

SVG loader Serif 900 Character
/ 04

Juice
Agency

juice.agency

Astro + Lenis + GSAP. Case-study-first. Kazdy klient to bohater. Scroll-story, reveal, cursor custom.

Astro Lenis Case first

Wspolny DNA - co bierzemy.

1.Smooth scroll (Lenis) - plynna jazda po stronie, buduje premium.
2.Custom cursor - maly detal, ktory sygnalizuje "to nie jest zwykly landing".
3.Loader / intro - 1-2 sekundy dramatu zanim uderzy hero.
4.Video lub interaktywny hero - food musi byc w ruchu lub w akcji.
5.Fluid typography - clamp(), responsywna bez brzydkich breakpointow.
6.Serif display + sans body - klasyka premium (u nas Fraunces + Satoshi).
7.Jedna "zabawka" - jeden efekt, ktory laczy sie z manifestem.
8.Case study jako bohater - nie grid, tylko narracja, proces, credit.
Wniosek: Piekne strony, ale zadna nie robi rzeczy, ktora Wy robicie najlepiej - nie pokazuje roznicy miedzy "AI samo" a "AI w rekach dyrektora artystycznego". To nasza bialoplama na rynku.

Trzy koncepty hero.

Kazdy z nich mowi to samo w inny sposob. Wybierzcie jeden - drugi moze isc jako druga sekcja, trzeci zostawmy na potem.

Option A

Before / After
slider.

Pelnoekranowy obraz jedzenia. Po lewej: "AI generated" (surowe, plastikowe). Po prawej: "PINKY-directed" (gotowy shot). User przeciaga suwak, a po stronie PINKY wyskakuja pinki: "45 degree key light", "Hand-placed crumbs", "Cool-highlights grade".

WdrozenieSzybkie
ImpactWysoki
TechGSAP
RekomendacjaWybor numer 1. Core message dziala w 5 sekund, jest juz w prototypie.
Option B

Modular food
canvas.

Na ekranie 6 elementow zdjecia: tlo, swiatlo, talerz, jedzenie, rekwizyty, grading. User klika - kazdy element zmienia sie losowo (AI generuje chaos). Przycisk "Direct it like PINKY" uklada wszystko w spojny, profesjonalny shot.

WdrozenieSrednie
ImpactWysoki
TechCanvas
RekomendacjaPlan B. Bardzo mocny, ale wymaga duzo content prep (12-18 wariantow zdjec per slot).
Option C

Scroll
story.

Scroll = budowanie zdjecia warstwa po warstwie. Start: czarny ekran + pytanie. Scroll 1: tlo. Scroll 2: swiatlo. Scroll 3: stylizacja. Scroll 4: grading. Final: gotowe zdjecie + manifest. Najbardziej impactful.

WdrozenieDluzsze
ImpactMax
TechScrollTrigger
RekomendacjaPlan C jako DRUGA sekcja po herze A. Juz dodane w prototypie.

Moja rekomendacja: A + C.

Hero robimy jako opcja A (before/after slider) - bo user od razu rozumie o co chodzi, bez czytania. Druga sekcja to opcja C (scroll-story o 4 etapach produkcji) - zeby pokazac glebia procesu. Razem daja pelen manifest: "Anyone can generate. Few can direct." + dowod, dlaczego tak jest.

Koncept B zostawmy na potem - moze wejsc jako osobna podstrona "Sandbox" / "Lab".

Zobacz prototyp ->  Wybierzcie A/B/C
Stack: Astro 5 + Tailwind CSS 4 + GSAP 3 + Lenis + Cloudflare Pages (hosting darmowy). Fontshare: Fraunces + Satoshi. Koszt miesieczny: 0 zl. Domena: pinkyswear.pl.
Prototyp: PROJEKTY/PINKY_STRONA/index.html (ten plik: moodboard.html).