KennisBank

Immersive Interview Framework

Uit wiki.jimvandenbreemen.nl, de persoonlijke kennisbank van Jim van den Breemen

2 minuten leestijd

Immersive Interview Framework

Definitie

Het Immersive Interview Framework is een HTML/JS-architectuur voor portretinterviews op jimvandenbreemen.nl. Het combineert een volledig-scherm scrolldrive met een optionele redactionele leesmodus. De gold-standard referentie is test-interview-immersive.html (Thijs Janssen-interview).

Context

Ontwikkeld in maart 2026 als onderdeel van het brutalisme-iteratieproces voor jimvandenbreemen.nl. De architectuur is gedestilleerd na een design-audit van 14 problemen op een eerdere prototype-versie. Correcte implementatie vereist strikt volgen van het GSAP-patroon en de gelaagde scene-opbouw; afwijkingen (verkeerde fonts, scene-architectuurfouten) werden als kritieke bugs aangemerkt.

Kernpunten

Twee modi

Het framework kent twee presentatiemodi die via een view switcher wisselen:

  • Immersive scroll: volledig-scherm, scènegedreven, GSAP ScrollTrigger
  • Read editorial: asymmetrische 2-koloms layout, 65/35 verdeling, full-width

Viewport- en scènestructuur

position: fixed  →  viewport-container (scherm staat stil)
position: absolute →  scenes (bewegen binnen de container)
800vh             →  scroll-spacer (geeft scroll-ruimte)

Elke scène bestaat uit vijf visuele lagen, in volgorde:

  1. scene-bg img op 120% breedte (schaalbare achtergrond)
  2. grain overlay (0.18 opacity)
  3. vignette overlay
  4. cutout (optioneel, portret-effect)
  5. text-layer (koppen, body)

Cutout-effect

Portretfoto’s krijgen een uitsnede-effect puur via CSS:

  • mix-blend-mode: screen op de portret-laag
  • contrast() filter op een donkere achtergrond
  • Geen extra JavaScript of SVG-maskers vereist

GSAP ScrollTrigger-patroon

ScrollTrigger.create({
  scrub: 0.5,
  // per scene:
  transitionScene()  // via gsap.to / gsap.fromTo
  animateTextIn()    // stagger op data-anim="sN"
})

Easing: power2.inOut voor scene-overgangen, power3.out voor tekstanimaties. Geen CSS-variabele strings als easing-waarden (breekt GSAP).

Data-attributen voor animatievolgorde: data-anim="s1", data-anim="s2", etc. per scène.

UI-elementen

  • View switcher: toggle tussen Immersive en Read
  • Chapter dots: vierkant (geen border-radius) in brutalism-variant
  • Ambient particles canvas: achtergrond-animatielaag
  • Progress bar: 3px hoog, bordeaux

Scènevolgorde Shindar Khalil

Als illustratie van een werkende implementatie: Hero, De Ontmoeting (met portret-cutout), Damascus, De Vlucht, Opnieuw Beginnen, Het Klaslokaal, Reflectie, Outro.

Read mode

De 65/35 asymmetrische layout heeft een brede tekstkolom links en smallere context- of beeldkolom rechts. Full-width container, geen beperkende max-width.

Verbanden

Bronnen

Geen externe bronnen; kennis is gedestilleerd uit prototype-iteraties en design-audit.

Sessie-herkomst

Verbanden

  1. Zie ook: wiki-jimvandenbreemen-design-systeem
  2. Gerelateerd project: 03-projecten/jimvandenbreemen.nl
  3. Technisch verwant: wiki-remotion-workflow (video, ander domein)

Backlinks

Grafiekweergave