AI Shader-effecten: Hoe ik 3JS-magie Bouwde in 4 Minuten
Zes uur. Zo lang staarde ik naar GLSL-code de eerste keer dat ik probeerde een vervormingshovereffect toe te voegen aan de galeriepagina van een klant.
Niet zes uur voor het bouwen van de hele pagina. Zes uur voor één hoveranimatie die precies 0,4 seconden duurde wanneer de muis van de gebruiker over een afbeelding bewoog.
De vertex shader was prima. De fragment shader werkte op zichzelf. Maar de uniform-variabelen correct doorgeven? De muiscoördinaten normaliseren? Omgaan met het canvas-formaat op verschillende viewport-maten? Ik bleef tegen muren oplopen die ik niet wist dat ze bestonden.
Ik leverde de pagina op zonder het shader-effect. Gewoon een saaie CSS-opaciteitsovergang. De klant merkte het niet. Maar ik wel.
Vorige week paste ik vijf verschillende shader-hovereffecten toe — wobble, wave, chromatische aberratie, vervorming en een RGB-splitsing — op een volledige galeriepagina en leverde alles op in minder dan 45 minuten. Eén effect van niets naar een werkende preview? Vier minuten.
Het verschil was niet dat ik eindelijk GLSL had gemeesterd. Ik kan nog steeds geen displacement shader schrijven zonder documentatie open te hebben. Het verschil is dat ik een Claude Code-skill heb gebouwd die het voor mij doet.
Waarom Shaders Buiten Bereik Blijven (En Waarom Dat Niet Jouw Schuld Is)
Hier is het probleem met shaders in front-end development: de kenniskloof is geen leercurve. Het is een steile rots.
CSS-animatie? Je leert door te doen — dingen kapotmaken, dingen repareren, dingen opleveren. GLSL (OpenGL Shading Language) is anders. Het is een C-achtige taal die rechtstreeks op de GPU draait, vertices en fragmenten parallel verwerkt met bijna nul tolerantie voor het vage "goed genoeg" begrip waar je mee weg kunt komen in JavaScript.
Het echte pijn is niet dat shaders moeilijk zijn. Het is dat shaders moeilijk zijn ten opzichte van hoe vaak je ze nodig hebt.
Maar — en dit is het deel dat ertoe doet — ze zien er ongelooflijk uit. Een goed uitgevoerd chromatisch aberratiehovereffect op een galerij kan het verschil zijn tussen een site die aanvoelt als een premium product en één die aanvoelt als een template.
Wat een Claude Code-skill Eigenlijk Is
Wanneer developers zich AI-code-generatie voorstellen, zien ze een chatbot die iets genereert dat je in je project kopieert en plakt en daarna een uur handmatig aanpast.
Een Claude Code-skill is anders. Denk er aan als een geversioned, herbruikbare instructieset die:
- Persistente context heeft — het weet welke projectstructuren het verwacht, welke opties beschikbaar zijn
- Je codebase eerst leest — voordat het één regel schrijft, scant een goed gebouwde skill je project
- Wijzigingen chirurgisch aanbrengt — het wijzigt alleen wat gewijzigd moet worden
- Configureerbare parameters accepteert — shader-type, intensiteit, animatiestijl worden doorgegeven als gestructureerde opties
De shader-skill die ik heb gebouwd — noem het apply-shader-hover — werkt precies zo.
De Vier Shader-effecten: Wat Er Echt Onder de Motorkap Gebeurt
Vervorming — De Vloeibare Warp
De vervormings-shader buigt de afbeeldingsgeometrie rond de muispositie, waarbij een beleffect wordt gecreëerd.
Sleutel-uniforms die het effect aansturen:
u_mouse— genormaliseerde 0.0–1.0 muispositie in schermruimteu_time— verstreken tijd voor vloeiende animatie in/uit bij hoveru_intensity— scalaire vermenigvuldiger
Wave — De Elegante Rimpeling
Wave is subtieler dan vervorming. In plaats van te buigen rond de cursor, creëert het een rimpelpatroon dat uitstraalt vanuit het interactiepunt.
Het interessante technische detail hier is de animatiestijlparameter. "Snappy" gebruikt een exponentiële vervalkurve. "Languid" gebruikt een langzamere curve met een lichte overshoot. "Smooth" gebruikt eenvoudige cosinusinterpolatie.
Chromatische Aberratie — De Gene Die Reacties Krijgt
Dit is consistent het effect dat mensen midden in het scrollen doet stoppen. Chromatische aberratie simuleert de kleurrand van een lens die niet alle golflengten op hetzelfde brandpunt focust.
In de fragment shader besampl je de textuur drie keer:
- Roodkanaal:
texture2D(u_texture, uv + offset) - Groenkanaal:
texture2D(u_texture, uv)— geen offset, dit is het anker - Blauwkanaal:
texture2D(u_texture, uv - offset)
Wobble — Die in de Vertex Shader Leeft
Wobble is het meest speelse van de vier, en technisch gezien het meest onderscheidende — het werkt in de vertex shader in plaats van de fragment shader. In plaats van te manipuleren hoe pixels gekleurd worden, manipuleert het de geometrie zelf.
De Skill Bouwen: Het Echte Proces, Niet de Demo-versie
Ik wil eerlijk zijn over iets: deze skill verscheen niet kant-en-klaar uit een enkele promptsessie. Het kostte 8-10 iteratieve rondes om het te krijgen tot de kwaliteit waarbij ik het zou inzetten op een klantproject.
De eerste versie was pijnlijk naïef. Ik promptte Claude Code om "een skill te maken die Three.js shader-hovereffecten toepast op galerij-afbeeldingen." Wat terugkwam was syntactisch correcte code die niet draaide — omdat het aannam dat een module-bundler beschikbaar was.
Ronde 2 corrigeerde de omgevingsdetectie maar brak wanneer afbeeldingselementen genest waren in complexe galerijtrapstructuren.
Elke mislukking werd onderdeel van de kennisbasis van de skill. Ik voegde gedocumenteerde voorbeelden toe van elk patroon.
Het inflectiepunt was toen ik begon "mislukking-modus-documentatie" toe te voegen — niet alleen beschrijven wat de skill zou moeten doen als alles werkt, maar expliciet documenteren wat het zou moeten doen als dingen fout gaan.
De Werkelijke Workflow: Van Aanroep tot Preview
Stap 1: Aanroepen vanuit het project
/apply-shader-hover
De skill stelt onmiddellijk twee vragen:
- Welk bestand bevat de galerij?
- Welk shader-effect? (vervorming / wave / chromatisch / wobble)
Stap 2: Parameters configureren
Voor chromatische aberratie:
Intensiteit: subtiel | middel | sterk
Animatiestijl: vloeiend | snappy | languid
Toepassen op: alle galerij-afbeeldingen | specifieke selector
Stap 3: Codebase-context lezen
Voordat er code wordt gegenereerd, leest de skill het doelHTML-bestand, de CSS van het project, en eventueel bestaand Three.js-gebruik.
Stap 4: Generatie en injectie
De skill genereert:
- Three.js-initialisatie (renderer, scene, camera, canvas-element)
- GLSL shader-bronstrings voor zowel vertex als fragment shaders
- Uniform-beheer en update-lus
- Muiseventlisteners
ResizeObserver-integratie- Opruimen/verwijderen bij het verlaten van de pagina
De Eerlijke Beoordeling: Wat Dit Werkelijk Verandert
Wat echt beter werd:
De grootste verschuiving is niet tijdsbesparing — het is toegang. Het chromatisch aberratie-effect dat ik beschreef? Ik zou dat nooit aan een klant hebben aangeboden vóór deze skill. De implementatiekosten maakten het onpraktisch voor de meeste projecten.
Wat nog menselijk oordeel vereist:
De skill weet hoe je een sterk chromatisch aberratie-shader op elke afbeelding in een galerij toepast. Het weet niet of een sterk chromatisch aberratie-shader zou moeten staan op die galerij. Die beslissing is nog steeds van jou.
Bouw Je Eigen Versie: De Aanpak Die Ik Zou Aanbevelen
Begin niet met prompting vanaf nul. Vind de beste bestaande Three.js shader-effect-implementatie die je kunt — iets dat werkelijk werkt in productie. Gebruik dat als het fundamentele voorbeeld in de kennisbasis van je skill.
Bouw incrementeel:
- Begin met één shader-type toegepast op één projectstructuur
- Test het op 3-4 echte projecten (geen demo's met schone HTML)
- Documenteer elk geval waarbij de uitvoer handmatige correctie nodig heeft
Voeg vroeg foutmodus-afhandeling toe. Vertel de skill expliciet wat te doen wanneer Three.js niet beschikbaar is, wanneer de selector niets vindt, wanneer WebGL niet wordt ondersteund.
De galeriepagina die vorige week werd opgeleverd — chromatische aberratie die bij hover draait, RGB-kanalen die splijten en terugsnappen naarmate de muis elke afbeelding kruist — zag eruit als het soort werk dat ik vroeger afschreef als "voor iemand anders om te bouwen."
Laten We Samenwerken
Wil je AI-systemen bouwen, workflows automatiseren of je tech-infrastructuur opschalen? Ik help je graag.
- Fiverr (maatwerk & integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (enterprise-oplossingen): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
