520 lines
21 KiB
Markdown
520 lines
21 KiB
Markdown
# 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.zip` uitgepakt 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.
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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.**
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
1. **Lees letterlijk voor.** Tekst op scherm 2. Niet improviseren — dat houdt het tempo strak.
|
|
2. **Refresh na elke prompt.** Het magische moment is wanneer studenten de pagina zien groeien.
|
|
3. **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.
|