# 🏆 AWWWARDS-LEVEL WEBSITE PROMPT
## Voor Claude — altijd uniek, nooit generiek

---

## DE OPDRACHT

Bouw een **Awwwards SOTD-waardig** multi-page website (index.html, work.html, about.html) met Barba.js page transitions, GSAP animaties, en pure HTML/CSS/JS. Geen frameworks. Geen templates. Geen standaard AI output.

---

## VERPLICHTE TECHNISCHE STACK

- **GSAP 3.x** (ScrollTrigger, SplitText als beschikbaar) via CDN
- **Barba.js** via CDN — page transitions op elke link
- Pure **HTML + CSS + Vanilla JS** — geen React, Vue, SCSS tooling
- Alle fonts via **Google Fonts CDN** — kies altijd iets verrassends
- Geen externe afbeeldingen — gebruik CSS gradients, SVG, of pure CSS shapes

---

## VERPLICHTE ELEMENTEN (ALTIJD AANWEZIG)

### 1. PAGE LOADER
Een branded loader die PAST bij het design concept:
- Telt op (00 → 100) of toont een voortgangsbalk
- Wisselende woorden of concept-relevante tekst
- Verdwijnt met een dramatische GSAP animatie (slide, reveal, clip-path)
- Duurt 2-3 seconden, nooit meer

### 2. CUSTOM CURSOR
- Geen native cursor
- Minimale dot die groeit/krimpt/kleurt op hover
- Vertraagde follower ring of label-cursor
- Mix-blend-mode: difference of multiply voor sfeer
- Op werk/project items: cursor verandert in tekst label ("View", "Open", "Explore")

### 3. PAGE TRANSITIONS (BARBA.JS)
Kies één van deze — maar maak het eigen:
- **Panel wipe**: 3 verticale/horizontale blokken die schuiven
- **Clip-path reveal**: circle of rechthoek die uitklapt
- **Curtain**: één groot vlak dat omhoog/omlaag gaat
- **Diagonal wipe**: schuin vlak dat doorsnijdt
Altijd: smooth, 0.5-0.8s, GSAP ease: power4.inOut

### 4. TEXT REVEAL ANIMATIES
Op elke heading:
- Tekst staat achter een clip-rect/overflow:hidden wrapper
- Slides in van onderen (translateY: 110% → 0%) bij scroll
- Stagger per woord of per regel
- Timing: 0.9-1.2s, ease: power4.out

### 5. PAGE SCROLL ANIMATIES
- Scroll-triggered reveals op alle secties
- Parallax op achtergrond elementen (y offset via ScrollTrigger scrub)
- Counter animaties op statistieken (0 → 98, 0 → 12 etc.)
- Image/element scale op scroll (subtle: 1.0 → 1.05)

### 6. MAGNETISCHE BUTTONS
Op CTAs en belangrijke links:
```js
el.addEventListener('mousemove', e => {
  const rect = el.getBoundingClientRect();
  gsap.to(el, { x: (e.clientX - rect.left - rect.width/2) * 0.3, y: (e.clientY - rect.top - rect.height/2) * 0.3 });
});
el.addEventListener('mouseleave', () => gsap.to(el, { x:0, y:0, duration:0.6, ease:'elastic.out(1,0.4)' }));
```

### 7. UNIEK PORTFOLIO ELEMENT
Kies één van:
- **Hover image preview**: tekst-lijst, hover = afbeelding zweeft bij cursor
- **Horizontal scroll**: projecten scrollen horizontaal via ScrollTrigger pin
- **Full-screen transition**: klik op project = volledige pagina-vullende reveal
- **Distortion grid**: grid met clip-path hover reveals

---

## DESIGN REGELS — NOOIT OVERTREDEN

### ❌ NOOIT DOEN
- Standaard dark navy/blue-gray kleurpalet
- Centered hero met grote tekst + CTA knop eronder
- 3-koloms grid voor portfolio
- Generic "We create digital experiences" copy
- Dezelfde font combinaties (Playfair + Inter, Montserrat + Lato)
- Symmetrische, voorspelbare layout
- Stockfoto placeholders of generieke gradients
- Footer met 4 kolommen links

### ✅ ALTIJD DOEN
- **Uniek kleurpalet** — kies een concept en kleur passend bij dat concept:
  * Cream/sand + inkt + één felle accentkleur (rood, oranje, elektrisch groen)
  * Volledig zwart + één licht accent (niet wit — gebroken wit, cream, sand)
  * Industrieel grijs + matte geel
  * Off-white + diep terracotta + zwart
  * Kies NOOIT wat je net gedaan hebt

- **Typografie-karakter** — altijd een statement:
  * Display + Mono: Cabinet Grotesk + DM Mono
  * Serif + Sans: Cormorant Garamond + Neue Haas (via Google: Space Grotesk)
  * Ultra bold + italic serif: Clash Display + Instrument Serif
  * Experimental: Fraunces + DM Sans

- **Layout die verrast**:
  * Grote roterende background tekst
  * Asymmetrische grids (2fr 1fr, of 3fr 2fr)
  * Getallen als design element (groot, doorschijnend)
  * Tekst die BUITEN de grid loopt
  * Horizontale lijnen als separator i.p.v. whitespace

- **Copy die iets zegt**:
  * Directe, stellige uitspraken
  * Geen "We are a creative agency that crafts..."
  * Wél: "We refuse to make boring things." / "6 projects. All year." / "Small studio. Big ambition."

---

## CONCEPT-EERSTE AANPAK

Voordat je code schrijft, kies een **sterk concept**:

**Type A — The Boutique Studio** (luxe, editoriaal)
- Cream achtergrond, ink typografie, één rode/oranje accent
- Editoriaal gevoel, grote marges, weinig elementen
- Font: Cormorant + Space Grotesk

**Type B — The Experimental Lab** (tech, raw, underground)
- Zwart achtergrond, neon accent (groen #00FF7F of geel #FFE600)
- Monospace tekst, grid-lijnen zichtbaar, data-aesthetiek
- Font: DM Mono + Space Grotesk Bold

**Type C — The Bold Agency** (krachtig, directief, statement)
- Off-white achtergrond, zwart en één felle kleur
- Ultra bold typografie, weinig decoratie, pure compositie
- Font: Cabinet Grotesk Black + Instrument Serif Italic

**Type D — The Minimal Craft** (Japans-geïnspireerd, rustig, precies)
- Lichtgrijs (#F0EEE8) achtergrond, donkergijs type, goud accent
- Veel whitespace, dunne lijnen, micro-animaties
- Font: Cormorant Light + DM Sans

Kies het concept dat NIET de vorige keer gebruikt is. Roteer.

---

## STRUCTUUR (PER PAGINA)

### index.html — Home
1. Page loader (branded)
2. Nav (links logo, rechts links + CTA pill/button)
3. Hero: fullscreen, grote headline, achtergrond element, ticker/marquee
4. Work preview (hover-reveal lijst of assymetrisch grid — GEEN standaard grid)
5. Quote/statement sectie (grote typografie)
6. Info strip of values (horizontale balk)
7. Footer (groot logo, minimale links)

### work.html — Work
1. Page header (asymmetrisch: links titel, rechts beschrijving)
2. Portfolio (horizontaal of assymetrisch, GEEN gelijke kaarten)
3. CTA sectie
4. Footer

### about.html — Studio/About
1. Page header
2. Studio verhaal (2-koloms: links tekst, rechts sticky visual)
3. Services (verticale lijst, GEEN icon-grid)
4. Contact (grote typografie, klikbare email)
5. Footer

---

## ANIMATIE TIMINGS (GSAP CHEATSHEET)

```js
// Text reveal (altijd)
gsap.to('.reveal-text', { y: '0%', duration: 1.1, ease: 'power4.out', stagger: 0.08 });

// Page loader exit
gsap.to('.loader', { yPercent: -100, duration: 0.9, ease: 'power4.inOut' });

// Transition in
gsap.fromTo('.transition-block', { scaleX: 0 }, { scaleX: 1, duration: 0.6, ease: 'power4.inOut', stagger: 0.08 });

// Scroll reveal
gsap.fromTo(el, { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 85%', once: true } });

// Counter
gsap.to(obj, { val: 98, duration: 1.5, ease: 'power2.out', onUpdate: () => el.textContent = Math.round(obj.val) });
```

---

## GEEF ALTIJD TERUG

Na het bouwen, lever:
1. De URL van de live preview
2. Welk **concept + kleurpalet** je gekozen hebt (max 2 zinnen)
3. Welke **unieke interactie** de pagina heeft
4. Welk **font-paar** je gebruikt hebt en waarom

---

*Gebruik deze prompt elke keer voor een uniek, verrassend resultaat. Rotate between de 4 types. Nooit twee keer hetzelfde concept achter elkaar.*