# Les 2 — Lesopdracht
## Bouw een scroll-animatie sectie in een worktree

**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Duur:** 28 minuten (in de les)
**Inleveren:** preview URL in chat — code is basis voor het huiswerk

---

## Doel

Bouw één scroll-animatie sectie in een Next.js 16 project, met:
- OpenCode **Desktop** (met onze AGENTS.md geladen)
- Een eigen worktree (via plugin of handmatig)
- Een nieuwe Sessions tab voor die worktree
- GSAP + Lenis
- TailwindCSS voor styling

Het hoeft niet groot — een werkende sectie van 1-2 schermen is genoeg.

> **Belangrijk:** dit project is **jouw repo** vanaf nu. In het huiswerk
> bouw je in deze zelfde repo verder met meer secties. Niet klaar in de les?
> Geen probleem — thuis ga je verder waar je bleef.

---

## Vereisten (al opgezet vóór de les)

In je `scroll-demo` repo staat al:
- Next.js 15 starter (App Router, TypeScript, Tailwind)
- `AGENTS.md` met onze regels
- `opencode.json` met permissions
- `npm install`-ed: `gsap`, `@gsap/react`, `lenis`
- `components/SmoothScroll.tsx` wrapper (klassikaal gebouwd)

Geen scroll-demo repo? Vraag in chat, of clone: `git clone <link uit Brightspace>`

---

## Wat moet er staan?

- [ ] Eigen **worktree** + branch voor jouw sectie
- [ ] OpenCode draait in die worktree
- [ ] Een **werkende scroll-animatie sectie** (kies één type — zie suggesties)
- [ ] Volgt de regels uit `AGENTS.md` (geen Framer Motion, `useGSAP`, scope, etc.)
- [ ] **Commit + push** naar je branch

---

## Stappenplan

### Stap 0 — Starter forken naar jouw GitHub (3 min)

Dit doe je **eenmalig** aan het begin. Daarna werk je in jouw eigen repo — ook thuis voor het huiswerk.

1. Ga naar de starter repo (link in Brightspace) → klik **Fork** → kies jouw account
2. Clone naar je laptop:
   ```bash
   gh repo clone <jouw-username>/scroll-demo
   cd scroll-demo
   npm install
   ```
3. Koppel Vercel (eenmalig):
   ```bash
   vercel link        # kiest of maakt Vercel project
   vercel --prod      # eerste productie deploy
   ```
4. Open in OpenCode Desktop: **File → Open Folder → scroll-demo**

Klaar. Productie-URL staat live. Vanaf nu = elke push = automatische preview.

### Stap 1 — Worktree aanmaken (3 min)

**Met opencode-worktree plugin** (in main Session):

```
Maak een worktree voor feature-mijn-sectie (kies een naam, bv. feature-hero).
```

De agent roept `worktree_create` aan. De worktree-folder wordt gemaakt op `~/.local/share/opencode/worktree/scroll-demo/feature-hero/`.

**Daarna in Desktop:**
1. Klik **+ New Session** linksboven in de Sessions sidebar
2. Kies **Open Folder** → navigeer naar de worktree-folder
3. Nieuwe Session opent met eigen chat-context — main blijft beschikbaar in sidebar

**Of handmatig** (als plugin niet werkt):

```bash
git worktree add ../scroll-demo-hero -b feature-hero
```
Dan in Desktop: **+ New Session → Open Folder → ../scroll-demo-hero**.

### Stap 2 — Sectie kiezen (2 min)

Kies één van deze:

| Type | Wat | Moeilijkheid |
|------|-----|--------------|
| **Hero met SplitText reveal** | Tekst die letter-voor-letter verschijnt op scroll | ⭐⭐ |
| **Features grid stagger** | 3-koloms grid die in-fade'd, staggered | ⭐ |
| **Testimonials horizontaal** | Horizontale scroll-sectie met cards (pin) | ⭐⭐⭐ |
| **Gallery met parallax** | Afbeeldingen die parallax-en bij scroll | ⭐⭐ |
| **Stats counter** | Cijfers die optellen wanneer in beeld | ⭐⭐ |

### Stap 3 — Plan-mode (5 min)

In opencode (start in plan-mode of `Tab` om te wisselen):

> Plan een [type sectie] component die voldoet aan de regels in AGENTS.md. Toon me het plan: welke files maak je, welke GSAP API gebruik je, hoe sync je met Lenis?

Lees het plan. Stel vragen / geef feedback. Niet meteen op Tab naar build.

### Stap 4 — Build-mode (15 min)

`Tab` → build. Geef commando:

> Bouw de geplande sectie. Plaats hem in components/ en importeer in app/page.tsx zodat ik 'm direct kan testen.

Laat het bouwen. Lees mee. Stel correcties als iets ingaat tegen AGENTS.md.

### Stap 5 — Testen (5 min)

In de worktree:

```bash
npm run dev
```

Open `http://localhost:3000`. Scroll. Check:
- Smooth scroll werkt (Lenis)
- Jouw animatie triggered op het juiste moment
- Geen console errors
- Geen hydration mismatch

Werkt het niet? Vraag opencode om te debuggen.

### Stap 6 — Commit + push (3 min)

```bash
git add .
git commit -m "feat: [jouw sectie]"
git push origin [jouw branch]
```

### Stap 7 — Vercel preview ophalen (2 min)

- Open Vercel dashboard (link in Brightspace)
- Vind de deploy voor `[jouw branch]` — status "Building" → "Ready" (~30-60 sec)
- Klik → preview URL openen
- Test scroll-animatie op de live URL
- **Plak de preview URL in chat** zodat anderen 'm kunnen zien

### Stap 7 — (Optioneel) Cleanup

Klaar met deze worktree? In de main Session:

> Sluit de feature-X worktree en merge naar main.

Of handmatig:

```bash
git worktree remove ~/.local/share/opencode/worktree/scroll-demo/feature-hero
cd ~/scroll-demo
git merge feature-hero
```

Sluit ook de feature-Session in Desktop (right-click → Close).

---

## Veelvoorkomende problemen

| Probleem | Oplossing |
|----------|-----------|
| `useGSAP is not a function` | `npm install @gsap/react` |
| Hydration mismatch warning | `"use client"` mist of `useEffect` voor GSAP code |
| Lenis import error | Niet `@studio-freight/lenis` — gebruik `lenis` package |
| ScrollTrigger niks doet | `gsap.registerPlugin(ScrollTrigger)` boven in file |
| Geen smooth scroll | `SmoothScroll` wrapper mist in `app/layout.tsx` |
| Plugin niet beschikbaar | `ocx list` om te checken, evt. `ocx add` opnieuw |
| Worktree-tool niet bekend | Plugin niet correct geïnstalleerd of opencode niet herstart |
| `gsap.context is not a function` | Oude versie — `npm i gsap@latest @gsap/react@latest` |
| `params is not iterable` / `Cannot read params` | Next.js 16: gebruik `const { id } = await params` (async!) |

---

## Klaar zijn = je hebt:

1. Een **eigen fork** op GitHub + Vercel gekoppeld
2. Een werkende **scroll-animatie sectie** in jouw app
3. Gebruik gemaakt van **OpenCode + worktrees**
4. De **regels uit AGENTS.md** gevolgd
5. **Smooth scroll** werkend via Lenis
6. Minstens 1 **preview URL** live op Vercel

## Aansluiting op het huiswerk

**Niet helemaal klaar in de les?** Geen stress. Je staat al goed — Vercel is gekoppeld, AGENTS.md staat klaar, één sectie werkt (of bijna). In het huiswerk maak je de eerste sectie af én voeg je 2-3 secties toe naar een complete landing page.

**Wel klaar?** Stop hier en zet je laptop dicht. Thuis bouw je gewoon door in dezelfde repo.

---

## Voorbeelden van prompts die werken

**Goed:**
- "Plan een hero sectie met SplitText reveal. 1 lange koptekst, 1 paragraaf. Lees AGENTS.md eerst."
- "Bouw een features grid van 3 cards die fade-in'en met stagger 0.15 wanneer de sectie 80% in beeld is."
- "Voeg een horizontale scroll sectie toe met 5 cards. Gebruik pin: true en scrub: 1."

**Te vaag (krijg je rommel):**
- "Maak iets met scroll."
- "Voeg animaties toe."
- "Maak het mooi."

**Tip:** wees specifiek over wat én volg de patterns uit AGENTS.md. Hoe specifieker, hoe beter.

---

## Reflectievragen (1 min, niet inleveren)

- Werkt OpenCode anders met goede AGENTS.md dan zonder?
- Voelde plan-mode → build flow natuurlijker?
- Waar zou je worktrees morgen gebruiken op je eigen project?