Concept

Atelier Nevel is een fictief showcase-project (portfolio-commissie, "spoor S" in de Weblify- studio). Het concept: scrollpositie wordt niet lineair op animatie gemapt, maar herverdeeld via een echte, gemeten ademcurve (inademen 4s / vasthouden 4s / uitademen 6s). Op het hoogtepunt van elke "hold" condenseert de naam van een parfumnoot uit drijvende damp tot leesbare letters, om dan weer op te lossen. Bea Van Rompay, de fictieve oprichter, is ook de "smaak-autoriteit" waarmee het ontwerp is opgebouwd: precies, ingehouden, niets luider dan nodig.

Beeldmateriaal

De dampfilm in de hero is gegenereerd met Higgsfield (model Kling 3.0 Turbo, tekst-naar- video), gecureerd uit drie kandidaten. De frames zijn met een lokaal Python-script omgezet naar een WebP-reeks voor de scroll-gestuurde canvas-hero. Het merkteken (de concentrische ringen) is met de hand getekend als grid-based SVG, geen AI-beeld.

Techniek

• Canvas-frame-scrub-hero met een asymmetrische, ademcurve-gebaseerde easing (i.p.v. een constante scroll-vertraging).
• CSS-only animation-timeline: view()-condensatie per geurnoot, met een per-letter scroll-range-verschuiving voor het "letter voor letter"-effect.
• Astro + Tailwind, geen client-side framework; motion via externe scripts en scoped stijlen, CSP-clean (geen inline style-attributen).
• Volledig werkende prefers-reduced-motion-variant: een statische eindtoestand, eerste frame zichtbaar, alle notennamen meteen leesbaar.