Files

Tim Rijkse 634789e615 fix: add les 11

2026-05-19 18:50:11 +02:00

7.3 KiB

Raw Permalink Blame History

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.

Ga naar de starter repo (link in Brightspace) → klik Fork → kies jouw account

Clone naar je laptop:

gh repo clone <jouw-username>/scroll-demo
cd scroll-demo
npm install

Koppel Vercel (eenmalig):

vercel link        # kiest of maakt Vercel project
vercel --prod      # eerste productie deploy

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:

Klik + New Session linksboven in de Sessions sidebar
Kies Open Folder → navigeer naar de worktree-folder
Nieuwe Session opent met eigen chat-context — main blijft beschikbaar in sidebar

Of handmatig (als plugin niet werkt):

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:

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)

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:

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:

Een eigen fork op GitHub + Vercel gekoppeld
Een werkende scroll-animatie sectie in jouw app
Gebruik gemaakt van OpenCode + worktrees
De regels uit AGENTS.md gevolgd
Smooth scroll werkend via Lenis
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?

7.3 KiB Raw Permalink Blame History