MOVE ME
01
Kinetische typografie
GSAP · pointer-tracking
Koppen die reageren op de cursor vallen op en verhogen de aandacht voor je kernboodschap.
Pillar — Interactief webdesign & animaties
Interactief webdesign dat beweegt én verkoopt
Micro-animaties, WebGL, scroll-storytelling en kinetische typografie — niet als decoratie, maar om aandacht te sturen en je merk voelbaar te maken. Probeer het hieronder zelf.
Live showcase
Probeer het zelf
Zes technieken die we dagelijks inzetten. Beweeg, klik en scroll — alles hieronder draait live in je browser.
Wat we bouwen
Van micro-interactie tot WebGL
Elke beweging heeft een functie: richting geven, feedback geven of je verhaal vertellen.
- 01
Micro-animaties
Hover-states, toggles, formulierfeedback en bevestigingen die een interface betrouwbaar en menselijk maken.
- 02
Kinetische typografie
Koppen die letter voor letter verschijnen, reageren op de cursor of meebewegen met je scrollsnelheid.
- 03
Scroll-storytelling
Secties die vastpinnen, opbouwen en transformeren met GSAP ScrollTrigger en Lenis smooth scroll.
- 04
WebGL & shaders
Generatieve achtergronden en beeldeffecten op de GPU, in een paar kilobyte en met een fallback.
- 05
Interactieve tools
Configurators, calculators en prototypes zoals op onze sectorpagina’s: interactie die leads oplevert.
- 06
Magnetische UI
Knoppen en links die de cursor “aantrekken”, met elastische easing — alleen op apparaten met een muis.
Performance-budget
Beweging zonder vertraging
Spectaculair mag, traag niet. Elk project krijgt een vast budget waar alle animaties binnen moeten blijven.
- 01
CLS 0
Animaties gebruiken transform en opacity en staan buiten de documentflow: niets verspringt tijdens het laden.
- 02
INP onder 200 ms
Interacties reageren direct; zware berekeningen draaien buiten de main thread of pas na interactie.
- 03
Alleen wat in beeld is
Effecten starten met IntersectionObserver en pauzeren buiten beeld, ook WebGL-canvassen.
- 04
Minder beweging = rust
Met de systeeminstelling “minder beweging” zie je direct alle content, zonder animaties.
Bewegingmet een reden,of geen beweging.
Aanpak
Van idee naar 60 fps
Motion-concept
We bepalen welke momenten in je verhaal beweging verdienen, en welke juist rust.
Prototype
Snelle motion-studies zodat je het gevoel ervaart voordat we alles uitwerken.
Implementatie
Productieklare GSAP- en WebGL-code, geïntegreerd in Bricks en herbruikbaar.
Tuning
Testen op echte apparaten, finetunen van timing en easing, en performance-metingen.
FAQ
Interactie vragen
Maken animaties mijn website trager?
Niet als ze goed gebouwd zijn. We animeren alleen transform en opacity op de GPU, laden scripts uitgesteld, starten effecten pas als ze in beeld komen en houden een vast performance-budget aan.
Wat is het verschil tussen GSAP en WebGL?
GSAP is een JavaScript-bibliotheek voor het animeren van HTML-, SVG- en CSS-eigenschappen, zoals scroll-animaties en kinetische typografie. WebGL tekent via de GPU direct op een canvas en is geschikt voor shaders, 3D en generatieve achtergronden.
Werken interactieve elementen ook op mobiel?
Ja. We ontwerpen voor touch: effecten die alleen met een muis zinvol zijn, zoals magnetische knoppen en tilt, schakelen we op touchscreens uit of vervangen we door een passend alternatief.
Zijn animaties toegankelijk?
We respecteren de systeeminstelling “minder beweging”, laten content nooit afhangen van een animatie en zorgen dat alles met het toetsenbord bedienbaar blijft.
Helpen animaties echt bij conversie?
Gerichte beweging helpt de aandacht te sturen naar wat belangrijk is, zoals een CTA of een kernboodschap. Animatie als decoratie doet dat niet; daarom koppelen we elk effect aan een doel.
Verder lezen
Alles hangt samen
Van strategie tot sector: dit zijn de pagina’s die het beste aansluiten op wat je net hebt gelezen.