5.7 KiB
Les 2 — Lesopdracht
Bouw een scroll-animatie sectie in een worktree
Vak: AI-Assisted Development Opleiding: NOVI Hogeschool Utrecht Duur: 35 minuten (in de les) Inleveren: niet — je code uit deze opdracht is je 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.
Vereisten (al opgezet vóór de les)
In je scroll-demo repo staat al:
- Next.js 15 starter (App Router, TypeScript, Tailwind)
AGENTS.mdmet onze regelsopencode.jsonmet permissionsnpm install-ed:gsap,@gsap/react,leniscomponents/SmoothScroll.tsxwrapper (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 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 — (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 werkende scroll-animatie sectie in je app
- Gebruik gemaakt van OpenCode + worktrees
- De regels uit AGENTS.md gevolgd
- Smooth scroll werkend via Lenis
Deze code is je basis voor het huiswerk — daar bouw je 'm uit naar een complete landing page.
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?