227 lines
7.3 KiB
Markdown
227 lines
7.3 KiB
Markdown
# 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?
|