Het scherm is zwart met groene letters, en regel voor regel typt een opstartscherm zich uit: ERIK-DOS v6.22, een geheugentest, MSCDEX.EXE en MOUSE.SYS, tot de prompt C:\ERIK> verschijnt. Scanlines, een donkere rand, gloed rond de letters en een lichte flikkering maken er een oude monitor van. Dat is allemaal gewone CSS: een herhalend verloop voor de scanlines, een radiaal verloop voor de rand, een dubbele text-shadow voor de gloed en een animatie die de dekking elke 0,15 seconde tussen 98 en 100 procent laat wisselen. De hele demo is één PHP-bestand zonder framework, met gewoon JavaScript en GSAP 3.12.5 uit een eigen map op de server.
De commando's zijn DIR, CD, TYPE, CLS, VER en HELP. Ze werken op een nagebootst bestandssysteem: een JavaScript-object met mappen en bestanden, elk met een grootte en een datum. DIR toont de inhoud in de oude kolomopmaak, tot en met "524,288 bytes free". In C:\ERIK staan README.TXT en ABOUT.TXT met een korte beschrijving van Erik, CAROUSEL.EXE en de mappen PHOTOS en SYSTEM. In SYSTEM staat een CONFIG.SYS met regels als DOS=HIGH,UMB en FILES=40. TYPE op een JPG geeft "[Binary file - cannot display]", TYPE op CAROUSEL.EXE "Access denied - executable file".
Er zitten ook grappen in. FORMAT C: antwoordt "Nice try.", DELTREE "Nee." en EXIT "There is no escape." Wie ls, pwd of cat typt, krijgt het DOS-commando aangeraden: "This isn't Linux, friend. Try DIR." Al het andere geeft "Bad command or file name."
CAROUSEL.EXE, of RUN CAROUSEL, start de overgang. Eerst volgen een paar laadregels en een voortgangsbalk van zestien blokjes. Dan verdwijnt de terminaltekst en staan er 120 losse tekens (█ ▓ ▒ ░) verspreid over het scherm. Een GSAP-tijdlijn laat ze in 1,5 seconde uiteenvliegen, met willekeurige draaiingen om drie assen, terwijl ze van groen naar het lichtblauw van de site kleuren. In de volgende 1,5 seconde trekken ze naar het midden en krimpen ze tot niets. Ondertussen gaat de achtergrond van zwart naar donkerblauw en verdwijnen de scanlines.
De carrousel is een ring van tien foto's in CSS 3D. Elke foto staat 36 graden verder, met het draaipunt 500 pixels naar achteren en een perspectief van 2000 pixels. GSAP draait de ring in acht seconden helemaal rond. Slepen met muis of vinger draait hem een halve graad per verschoven pixel; laat je los, dan draait hij weer vanzelf. Ga je met de muis over een foto, dan worden de andere half doorzichtig. Het zijn voorbeeldfoto's van picsum.photos.
Linksonder knippert een kleine C:\> _. Een klik speelt de overgang terug: de foto's schieten weg, de blokjes kleuren terug naar groen, de achtergrond wordt zwart en de CRT-effecten komen terug. De eerdere uitvoer staat nog in de terminal en je kunt de carrousel opnieuw starten. Voor dat heen en weer waren twee reparaties nodig. De sleep-listeners op window worden nu bij elk bezoek met een AbortController opgeruimd; eerder bleven er per bezoek vier achter. En oude inline-stijlen van GSAP worden gewist, zodat het tekstpaneel en de terugknop bij een tweede bezoek zichtbaar blijven.
De commando's zijn DIR, CD, TYPE, CLS, VER en HELP. Ze werken op een nagebootst bestandssysteem: een JavaScript-object met mappen en bestanden, elk met een grootte en een datum. DIR toont de inhoud in de oude kolomopmaak, tot en met "524,288 bytes free". In C:\ERIK staan README.TXT en ABOUT.TXT met een korte beschrijving van Erik, CAROUSEL.EXE en de mappen PHOTOS en SYSTEM. In SYSTEM staat een CONFIG.SYS met regels als DOS=HIGH,UMB en FILES=40. TYPE op een JPG geeft "[Binary file - cannot display]", TYPE op CAROUSEL.EXE "Access denied - executable file".
Er zitten ook grappen in. FORMAT C: antwoordt "Nice try.", DELTREE "Nee." en EXIT "There is no escape." Wie ls, pwd of cat typt, krijgt het DOS-commando aangeraden: "This isn't Linux, friend. Try DIR." Al het andere geeft "Bad command or file name."
CAROUSEL.EXE, of RUN CAROUSEL, start de overgang. Eerst volgen een paar laadregels en een voortgangsbalk van zestien blokjes. Dan verdwijnt de terminaltekst en staan er 120 losse tekens (█ ▓ ▒ ░) verspreid over het scherm. Een GSAP-tijdlijn laat ze in 1,5 seconde uiteenvliegen, met willekeurige draaiingen om drie assen, terwijl ze van groen naar het lichtblauw van de site kleuren. In de volgende 1,5 seconde trekken ze naar het midden en krimpen ze tot niets. Ondertussen gaat de achtergrond van zwart naar donkerblauw en verdwijnen de scanlines.
De carrousel is een ring van tien foto's in CSS 3D. Elke foto staat 36 graden verder, met het draaipunt 500 pixels naar achteren en een perspectief van 2000 pixels. GSAP draait de ring in acht seconden helemaal rond. Slepen met muis of vinger draait hem een halve graad per verschoven pixel; laat je los, dan draait hij weer vanzelf. Ga je met de muis over een foto, dan worden de andere half doorzichtig. Het zijn voorbeeldfoto's van picsum.photos.
Linksonder knippert een kleine C:\> _. Een klik speelt de overgang terug: de foto's schieten weg, de blokjes kleuren terug naar groen, de achtergrond wordt zwart en de CRT-effecten komen terug. De eerdere uitvoer staat nog in de terminal en je kunt de carrousel opnieuw starten. Voor dat heen en weer waren twee reparaties nodig. De sleep-listeners op window worden nu bij elk bezoek met een AbortController opgeruimd; eerder bleven er per bezoek vier achter. En oude inline-stijlen van GSAP worden gewist, zodat het tekstpaneel en de terugknop bij een tweede bezoek zichtbaar blijven.
Meer werk
Interactieve 3D WebGL Experience
3D-WebGL-werk met geanimeerde chroomletters, een neon-grid en sterren op warpsnelheid. Beweeg je muis om de camera mee te laten bewegen.
Interactive World Globe
Een 3D-wereldbol van 2000 lichtpunten, gebouwd met Three.js. Kies Nederland, Suriname of Engeland en de bol draait naar dat land, met een korte tekst erbij.
Four by Erik — AI-studio designstudie
Een one-page site voor een fictieve AI- en softwarestudio, gebouwd in SvelteKit met een eigen WebGL-shader, smooth scroll en scroll-gestuurde animaties.