21 KiB
Les 2 — Docenttekst (Autocue)
Online les — letterlijk voorleesbaar. Slide-nummers tussen [SLIDE N] matchen exact met de PPTX (19 slides).
Twee-scherm-setup:
- Scherm 1 (gedeeld met studenten): presentatie + OpenCode Desktop App + browser
- Scherm 2 (alleen jij): deze docenttekst voor autocue
Voor de les klaarzetten:
- OpenCode Desktop App geïnstalleerd
opencode-ui-starter.zipuitgepakt op je bureaublad- Browser tabs: opencode.ai, github.com, vercel.com, localhost:3000
- Terminal in de starter-map klaar
- Kimi K2.5 Free al geactiveerd (
Ctrl+X M)- GitHub + Vercel ingelogd (géén repo of project alvast aanmaken — dat doe je live)
- Webcam + scherm delen op scherm 1
- Presentatie-modus zodat alleen scherm 1 zichtbaar is
[SLIDE 1] — Welkomstslide
Welkom bij Les 2. Vandaag zetten we de eerste echte stap richting professioneel AI-development. We bouwen LIVE een mooie scroll-storytelling landing page met smooth scrolling, parallax-effecten en animaties. En aan het einde staat alles online via je eigen GitHub-repo en eigen Vercel-project.
[SLIDE 2] — Een nieuwe manier van werken
Veel van jullie kennen browser-gebaseerde AI-tools. v0.dev bijvoorbeeld — je chat een UI in elkaar en plakt de code in je editor. Of een chatbot waar je vraagt om een snippet. Dat werkt prima voor snelle experimenten.
Maar er zit een paar ongemak in deze manier van werken. Veel copy/paste tussen browser en editor. Geen lokale development terwijl je chat. Beperkte controle: je vraagt iets, je krijgt iets terug, maar je kunt niet stap voor stap meekijken. En je zit vast aan één tool, één model.
Vandaag stappen we over op een andere manier. Lokaal werken in een echt project. AI direct in je editor. Een lokale dev-server die wijzigingen meteen toont. Volledige controle: Plan-mode om te kijken wat de AI van plan is, dan Build, dan per file accepteren.
Browser-tools zoals v0 blijven nuttig voor snelle UI-experimenten. Maar voor echt bouwen: lokaal met een AI-pair. Dat is wat we vandaag gaan leren.
[SLIDE 3] — Planning
Dit is de planning voor vandaag. We beginnen met een korte introductie. Daarna kijken we naar het AI-CLI landschap: Claude Code, Codex en OpenCode. Wat zijn de verschillen.
Daarna een korte introductie van OpenCode zelf. Dan de live demo — het centrale deel — waarin we vanuit een starter-zip een complete scroll-storytelling landing page bouwen.
Vervolgens zetten we alles online. Git init, GitHub-repo, Vercel-project. Daarna een pauze. Daarna ruimte voor jullie eigen werk. En aan het einde delen we resultaten en sluiten we af.
[SLIDE 4] — Vandaag, drie dingen
Drie dingen vandaag.
Eén: we kijken naar het AI-coding-CLI landschap. Drie tools die op dit moment serieus genomen worden — Claude Code, Codex, en OpenCode.
Twee: we bouwen live een scroll-storytelling landing page vanuit een starter-zip. Met Lenis voor smooth scrolling en GSAP voor animaties.
Drie: we zetten alles online — compleet vanaf nul. Git init, nieuwe GitHub-repo, nieuw Vercel-project. Aan het einde heb je je eigen live URL.
[SLIDE 5] — Drie spelers op de markt
Drie spelers op de markt halverwege 2026.
Claude Code van Anthropic. Opinionated, safety-first, beste raw capability voor zwaar engineering-werk. Vraagt altijd toestemming voor risicovolle acties. Werkt alleen met Claude-modellen.
Codex van OpenAI. Autonoom, token-efficiënt, minder safety-checks. Werkt alleen met OpenAI-modellen.
OpenCode is anders. Een open-source community-tool. Zestigduizend GitHub-stars. Werkt met élke AI-provider, ook lokale modellen via Ollama. Mooiste TUI van de drie.
Wat ze gemeen hebben: het zijn allemaal terminal-based agents. Geen aparte IDE nodig.
Wat ze onderscheidt: filosofie, prijsmodel, model-keuze, autonomie. Dit komt uit een goede vergelijking van NeuralNine — aanrader om thuis te kijken.
[SLIDE 6] — Vergelijking op 7 assen
Hier de vergelijking op zeven assen. Lees met me mee.
Safety. Claude Code wint — vraagt altijd toestemming. Codex is autonomer. OpenCode zit ertussenin, configureerbaar.
TUI en aesthetics. Claude Code en Codex zijn functioneel. OpenCode is gewoon mooier — telt mee als je veel uren in een tool zit.
Model-flexibiliteit. OpenCode duidelijke winnaar. Claude Code vast aan Anthropic, Codex vast aan OpenAI, OpenCode werkt met élke provider én lokale modellen via Ollama.
Undo en rewind. Claude Code heeft alles. Codex heeft géén undo. OpenCode heeft rewind.
Token-efficiency. Codex zuinigst. Claude Code verbruikt veel maar laat het transparant zien.
Open-source. Alleen OpenCode is open-source, MIT-licensed.
Praktijk-noot. NeuralNine bouwt in de video een Sudoku-game als benchmark. Met betaalde modellen zijn alle drie vergelijkbaar. OpenCode op gratis modellen zoals Kimi K2.5 is duidelijk minder maar wél echt gratis.
[SLIDE 7] — Waarom OpenCode in deze cursus?
Waarom kies ik OpenCode voor deze cursus? Vier redenen.
Eén: gratis te beginnen. Kimi K2.5 Free of een lokaal Ollama-model. Geen creditcard.
Twee: open-source. Je kunt zien hoe deze tools werken.
Drie: bring your own model. Later switchen naar Claude of GPT = dertig seconden.
Vier: de beste TUI.
De eindconclusie van NeuralNine is mooi. Hij zegt: "OpenCode is filosofisch mijn favoriet. Voor zwaar engineering-werk pak ik Claude Code met Opus."
Wat dat betekent voor jullie: start vandaag met OpenCode plus Kimi. Leer de skill. Als je later betaald engineering-werk doet en je werkgever betaalt het abonnement, stap je makkelijk over naar Claude Code.
[SLIDE 8] — Wat is OpenCode?
Wat is OpenCode precies.
Open-source AI coding agent. Werkt met élke AI-provider: OpenCode Zen — de eigen gratis variant — plus Groq, Ollama voor lokaal, OpenAI, Anthropic. Privacy-first: jouw code blijft op jouw machine.
Twee versies. Terminal-versie voor power-users. Desktop App met ingebouwde terminal. Vandaag gebruiken we de Desktop App met Kimi K2.5 Free.
Belangrijke functies om te kennen. Plan mode — AI leest je code en geeft een plan, verandert niks. Build mode — AI schrijft code, jij accepteert per file. Wissel met Tab. En @explore als read-only subagent om je codebase te doorzoeken.
[SLIDE 9] — OpenCode vs Cursor vs Claude Code
Een korte praktische vergelijking voor jullie keuze later.
OpenCode is CLI-based, open-source, gratis te beginnen. Cursor zien we volgende les — dat is een complete IDE met AI overal verweven. Claude Code is ook CLI, maar alleen voor Claude-modellen en met een Anthropic-abonnement.
Vandaag OpenCode. Volgende les Cursor. Beide doen vergelijkbare dingen, maar verschillende werkstijlen.
[SLIDE 10] — Setup: installeren + eerste keer opstarten
Setup is simpel.
Voor terminal: npm install -g opencode-ai, daarna opencode in je project-map.
Voor de Desktop App: ga naar opencode.ai/download. Pak de Mac of Windows variant.
In OpenCode druk je Ctrl+X M om van model te wisselen. Kies OpenCode Zen, dan Kimi K2.5 Free.
Klaar.
[SLIDE 11] — LIVE DEMO: Scroll-storytelling landing page
Tijd voor de live demo. Vandaag bouwen we samen een scroll-storytelling landing page voor een fictieve AI-startup genaamd Polderwave.
We gaan een hero bouwen met smooth scrolling via Lenis. Een features sectie die staggered fade-in heeft. Een sticky horizontal scroll-sectie met vier panels. Parallax achtergrond-blobs. En micro-interacties op de CTA.
Vijf prompts. Vijf momenten waarop je in de browser ziet dat het mooier wordt.
[SLIDE 12] — LIVE DEMO Flow (blijft op scherm tijdens demo)
Dit is de flow. Slide blijft op het scherm.
Stap één — starter uitpakken. Ik open mijn terminal. Ik heb opencode-ui-starter.zip op mijn bureaublad. Dat unzip ik. Stap erin, npm install, npm run dev. Browser opent op localhost:3000. Lege Next.js pagina.
cd ~/Desktop/opencode-ui-starter
npm install
npm run dev
Stap twee — OpenCode Desktop App. File → Open Folder → kies de starter-map. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free.
Stap drie tot zeven — de vijf prompts. Komen op de volgende slide. Tussen elke prompt: browser refresh, en commit in de terminal.
Stap acht — online zetten. Doen we na de demo.
[SLIDE 13] — De 5 prompts (blijft op scherm tijdens demo)
Hier zijn de vijf prompts. Ik ga ze één voor één plakken in OpenCode. Slide blijft op het scherm. Lees met me mee — ik ga ze ook hardop voorlezen.
PROMPT 1 — Smooth scroll + Hero.
Eerst in Plan mode kort kijken wat er komen gaat. Tab om naar Build te schakelen. Dan plak ik:
Installeer de packages lenis en gsap. Maak in app/page.tsx een hero-sectie:
- Titel "POLDERWAVE" in een extreem groot serif font (text-[12rem] of meer)
- Ondertitel "AI infrastructure for builders" eronder
- Donkere achtergrond (#0a0a0a), cream tekst (#f0e0cc)
- Hele pagina min-h-screen, gecentreerd
- Maak ook een client component LenisProvider die Lenis initialiseert
voor smooth scrolling over de hele pagina, en wrap die om de children
in app/layout.tsx
OpenCode maakt diffs. Lees met me mee. Accepteer per bestand. Browser refresh — POLDERWAVE staat in het groot. Scroll: smooth. Eén feature down, vier te gaan.
PROMPT 2 — Features sectie + staggered reveals.
Voeg onder de hero een features-sectie toe in app/page.tsx:
- Section met titel "Why builders pick us"
- Grid van 4 cards (md:grid-cols-2, lg:grid-cols-4):
1. "AI-powered" — "Models that adapt to your stack"
2. "Privacy-first" — "Your code stays on your machine"
3. "Open-source" — "MIT licensed, fork-friendly"
4. "Built for speed" — "Cold-start under 100ms"
- Padding ruim, mooi typografisch ritme
- Op scroll: stagger fade-in van onder via GSAP ScrollTrigger
(delay 0.1s per card, duration 0.8s, y-translate van 60 naar 0)
- Maak hiervoor een client component "FeaturesGrid"
Tab als nog niet in Build. Plak. Diffs. Accept. Refresh browser. Scroll naar features — kaarten komen één voor één omhoog.
PROMPT 3 — Sticky horizontal storytelling.
Voeg onder de features een sticky horizontal-scroll sectie toe:
- 4 panels die op scroll van rechts naar links bewegen
- Pin de sectie tijdens scroll met GSAP ScrollTrigger
- Elk panel toont een grote nummer (1, 2, 3, 4) en een korte tekst:
Panel 1: "Idea — bring your prompt"
Panel 2: "Prompt — describe your goal"
Panel 3: "Build — let AI write the code"
Panel 4: "Ship — push to Vercel"
- Verschillende achtergrondkleuren per panel (subtle gradients)
- Grote serif nummers (text-[20rem])
- Maak hiervoor een client component "HorizontalScrollStory"
Plak. Diffs. Accept. Refresh. Scroll naar deze sectie — pagina blijft staan en de panels schuiven horizontaal voorbij. Heel modern.
PROMPT 4 — Parallax-blobs.
Voeg drie parallax-blobs toe als kleurrijke achtergrond-decoratie:
- Een blob blue (#4361ee), een pink (#ef476f), een yellow (#ffc107)
- Absolute positioned, verschillende posities (top-left, mid-right, bottom-center)
- Width/height rond 400-600px
- Border-radius 50% en blur-3xl voor zachte gloed
- Op scroll: y-translate met verschillende snelheden
(blob 1: 0.5x scroll, blob 2: 0.8x, blob 3: 0.3x)
- Mix-blend-mode: screen of soft-light voor mooie kleurmenging
- Maak hiervoor een client component "ParallaxBlobs", absolute fixed
z-index 0 zodat content erbovenop ligt
Plak. Accept. Refresh. Scroll van boven naar beneden — zachte gekleurde wolken bewegen mee, in eigen tempo.
PROMPT 5 — Micro-interactions.
Voeg de volgende micro-interacties toe:
1. Sticky CTA-button onderaan rechts ("Get early access"):
- Position fixed bottom-8 right-8
- Padding ruim, rounded-full
- Bij rust: bg-pink, tekst cream
- Hover: scale naar 1.05, kleur transitioneert naar yellow
(smooth 0.3s ease)
2. Hover-effect op features-cards: scale 1.03, kleine box-shadow
3. Hero-titel: heel subtiel parallax effect zodat hij langzamer
scrollt dan de rest (0.7x scroll speed)
Plak. Diffs. Accept. Refresh. Hover over de cards: ze pop op. Hover op de CTA: hij groeit en wisselt van kleur. Hero-titel blijft een tikje achter bij scroll.
Vijf prompts. Vijf upgrades. Geen handmatige code geschreven.
[SLIDE 14] — Tijdens de demo, wat te benoemen
Een paar dingen die je goed kunt benadrukken tijdens deze demo voor de studenten.
Eén: ik begin elke prompt in Plan mode om te zien wat OpenCode van plan is. Tab om over te gaan naar Build, dan accepteer ik. Veilige flow.
Twee: na elke prompt refresh ik in de browser. Studenten zien letterlijk de pagina groeien. Dit is het magische moment.
Drie: na elke prompt commit ik. Eén feature = één commit. Niet alles tegelijk.
Vier: als iets misgaat — Hydration error, TypeScript error — plak ik de error letterlijk terug in OpenCode en vraag om een fix. Vrijwel altijd binnen één extra prompt opgelost.
Vijf: als een animatie schokkerig is, vraag ik: "maak deze animatie smoother met ease-out en duration 1.2s". Tweaken kan met natuurlijke taal.
[SLIDE 15] — Online zetten — from scratch
Tijd om dit live te zetten. We doen dit compleet vanaf nul.
Stap 1: lokaal git init + commit.
In de ingebouwde terminal van de Desktop App:
git init
git add .
git commit -m "Initial Polderwave"
git branch -M main
Stap 2: nieuwe GitHub repository.
Open github.com. Klik rechtsboven op het plusje, kies "New repository". Naam: polderwave. Public. Vink niets aan bij "Initialize this repository". Klik Create.
GitHub toont de URL. Kopieer.
Stap 3: remote toevoegen + push.
git remote add origin https://github.com/JOUWNAAM/polderwave.git
git push -u origin main
Refresh github.com. Code staat erop.
Stap 4: nieuw Vercel project.
Open vercel.com. Add New → Project. Selecteer polderwave. Import. Vercel detecteert Next.js automatisch. Klik Deploy.
Wacht. Live URL verschijnt. Klik. Daar staat Polderwave op het internet.
[SLIDE 16] — Vercel preview deployments per branch
Vanaf nu krijgt elke branch die je pusht automatisch een eigen URL. Main → productie. Een branch met de naam feature/extra-blob gaat naar polderwave-git-feature-extra-blob.vercel.app.
Demo. Ik maak een nieuwe branch:
git checkout -b feature/extra-blob
En ik vraag OpenCode iets kleins:
Voeg een vierde parallax-blob toe in groen (#16a34a), bewegend met 0.6x scroll snelheid.
Accept. Commit en push:
git add . && git commit -m "Extra parallax blob"
git push -u origin feature/extra-blob
Check Vercel. Nieuwe deployment voor die branch. Klik. Eigen URL. Test live in de browser. Als goed: PR openen, mergen, productie krijgt het ook.
[SLIDE 17] — HANDS-ON
Jullie beurt. Slide blijft op het scherm.
Stap één: unzip opencode-ui-starter.zip uit de lesbestanden naar je bureaublad. Terminal in die map: npm install, npm run dev.
Stap twee: OpenCode Desktop App openen. File → Open Folder → je starter-map. Ctrl+X M → Kimi K2.5 Free.
Stap drie: bouw minimaal drie van de vijf demo-prompts na. Of een eigen variant. Onthoud: één prompt per taak. Refresh browser tussen elke prompt.
Stap vier: online zetten via dezelfde from-scratch flow. Git init + commit, nieuwe GitHub repo, remote add + push, nieuw Vercel project + import + deploy.
Doel: minimaal twee keer deployen. Een pauze halverwege — type "pauze" in de chat. Vragen tijdens werken: ook in de chat.
[SLIDE 18] — Samenvatting + Huiswerk
Resultaten delen. Wie wil zijn URL in de chat plakken en kort vertellen wat hij gebouwd heeft?
Vandaag gezien:
- Het CLI-landschap: Claude Code, Codex, OpenCode
- Plan mode voor verkennen, Build mode voor schrijven
- Live demo: scroll-storytelling met Lenis + GSAP (5 prompts)
- Online zetten from scratch: git init → GitHub → Vercel
- Preview deployments per branch
Huiswerk:
Bouw je eigen scroll-landing page. Eigen merknaam, eigen kleurpalet. Minimaal drie van de vijf demo-features. Bonus: voeg één eigen animatie toe — dark mode toggle, cursor-trail, custom mouse-cursor, eigen keuze.
Inleveren via Teams: link naar Vercel, link naar GitHub, een korte beschrijving.
[SLIDE 19] — Volgende les
Volgende les is Les 3: Cursor Setup en Basics. Een professionelere IDE met AI ingebouwd. Tab autocomplete, Composer voor multi-file edits, Chat voor vragen, en live debug-challenges.
OpenCode is laagdrempelig en open. Cursor is professioneler en heeft meer agentic features. Beide zijn waardevol op verschillende momenten.
Bedankt voor jullie aandacht vandaag. Vragen?
DE 5 PROMPTS — copy-paste-vriendelijk
Voor jezelf, snel plakken tijdens de demo. Open dit document op je tweede scherm.
PROMPT 1 — Smooth scroll + Hero
Installeer de packages lenis en gsap. Maak in app/page.tsx een hero-sectie:
- Titel "POLDERWAVE" in een extreem groot serif font (text-[12rem] of meer)
- Ondertitel "AI infrastructure for builders" eronder
- Donkere achtergrond (#0a0a0a), cream tekst (#f0e0cc)
- Hele pagina min-h-screen, gecentreerd
- Maak ook een client component LenisProvider die Lenis initialiseert
voor smooth scrolling over de hele pagina, en wrap die om de children
in app/layout.tsx
PROMPT 2 — Features sectie
Voeg onder de hero een features-sectie toe in app/page.tsx:
- Section met titel "Why builders pick us"
- Grid van 4 cards (md:grid-cols-2, lg:grid-cols-4):
1. "AI-powered" — "Models that adapt to your stack"
2. "Privacy-first" — "Your code stays on your machine"
3. "Open-source" — "MIT licensed, fork-friendly"
4. "Built for speed" — "Cold-start under 100ms"
- Padding ruim, mooi typografisch ritme
- Op scroll: stagger fade-in van onder via GSAP ScrollTrigger
(delay 0.1s per card, duration 0.8s, y-translate van 60 naar 0)
- Maak hiervoor een client component "FeaturesGrid"
PROMPT 3 — Sticky horizontal storytelling
Voeg onder de features een sticky horizontal-scroll sectie toe:
- 4 panels die op scroll van rechts naar links bewegen
- Pin de sectie tijdens scroll met GSAP ScrollTrigger
- Elk panel toont een grote nummer (1, 2, 3, 4) en een korte tekst:
Panel 1: "Idea — bring your prompt"
Panel 2: "Prompt — describe your goal"
Panel 3: "Build — let AI write the code"
Panel 4: "Ship — push to Vercel"
- Verschillende achtergrondkleuren per panel (subtle gradients)
- Grote serif nummers (text-[20rem])
- Maak hiervoor een client component "HorizontalScrollStory"
PROMPT 4 — Parallax-blobs
Voeg drie parallax-blobs toe als kleurrijke achtergrond-decoratie:
- Een blob blue (#4361ee), een pink (#ef476f), een yellow (#ffc107)
- Absolute positioned, verschillende posities (top-left, mid-right, bottom-center)
- Width/height rond 400-600px
- Border-radius 50% en blur-3xl voor zachte gloed
- Op scroll: y-translate met verschillende snelheden
(blob 1: 0.5x scroll, blob 2: 0.8x, blob 3: 0.3x)
- Mix-blend-mode: screen of soft-light voor mooie kleurmenging
- Maak hiervoor een client component "ParallaxBlobs", absolute fixed
z-index 0 zodat content erbovenop ligt
PROMPT 5 — Micro-interactions
Voeg de volgende micro-interacties toe:
1. Sticky CTA-button onderaan rechts ("Get early access"):
- Position fixed bottom-8 right-8
- Padding ruim, rounded-full
- Bij rust: bg-pink, tekst cream
- Hover: scale naar 1.05, kleur transitioneert naar yellow
(smooth 0.3s ease)
2. Hover-effect op features-cards: scale 1.03, kleine box-shadow
3. Hero-titel: heel subtiel parallax effect zodat hij langzamer
scrollt dan de rest (0.7x scroll speed)
PROMPT BONUS — Extra blob voor preview-deploy demo
Voeg een vierde parallax-blob toe in groen (#16a34a), bewegend met 0.6x scroll snelheid, ergens links onderaan.
VEELVOORKOMENDE FOUTEN — voor mezelf
| Probleem | Oplossing |
|---|---|
| OpenCode-installatie hangt | Update Node naar 20+ |
| Kimi K2.5 Free niet beschikbaar | Switch naar OpenCode Zen GPT-OSS |
| OpenCode kan repo niet vinden | File → Open Folder opnieuw |
| Build mode wijzigt niets | Je staat nog in Plan mode — Tab |
| Hydration error op Lenis/GSAP | Vraag OpenCode: "Wrap dit in een client component met use client" |
| ScrollTrigger werkt niet | gsap.registerPlugin(ScrollTrigger) in een client component |
| Animatie schokkerig | "Maak smoother met ease-out 1.2s" |
| Vercel deploy faalt | Check of npm run build lokaal werkt |
| Preview URL toont oude versie | Hard refresh |
git push mislukt |
Eerst git branch -M main doen voor de eerste push |
MENTAAL MODEL TIJDENS DE LIVE DEMO
Drie regels voor jezelf:
- Lees letterlijk voor. Tekst op scherm 2. Niet improviseren — dat houdt het tempo strak.
- Refresh na elke prompt. Het magische moment is wanneer studenten de pagina zien groeien.
- Commit per prompt. Eén feature = één commit.
Als iets stuk gaat: blijf rustig. Plak de error in OpenCode, vraag om een fix. Dat is óók een waardevolle demo.
Veel succes.