VOREL

A self-initiated concept: one continuous, scroll-scrubbed walk through three rooms. Scroll does not move the page — it turns the frames of a 4K sequence on a fixed canvas, with each room’s text gated to appear only once the room has settled. Click a project and the same canvas opens like a door into its page.

Brief

Most architecture sites are a gallery of static renders. I wanted something closer to the experience of the space itself: walking, not flipping pages. The brief was a cinematic flow — one shot, no cuts — that still loads fast, respects prefers-reduced-motion, and reads in two languages.

Work

• A canvas frame-sequence engine: scroll progress (0..1) is the single source of truth — it drives the frame (lerp-smoothed) and gates the text so none of it shows mid-transition
• Two transition scenes × 121 frames, preloaded behind a loader and a progress hairline
• Adaptive resolution: true 4K (3856px) on desktop, lighter tiers (2.2K / 1.5K) on laptop and mobile — chosen by viewport × DPR
• The canvas is the door: clicking a project zooms the canvas and opens a project view with location / year / typology, with no page change
• Lenis smooth scroll + GSAP + SplitText for the reveals; a full prefers-reduced-motion fallback
• Bilingual EN/EL via data-attributes — switch with no reload, from a single button
• Hash routing (#work/slug, #studio…) so reloads and deep links keep asset paths valid
• Vanilla — zero framework, ~33KB of JS; the images carry the weight, not the code

Highlight

The hard part was never letting the illusion break. Text must appear only once the room has settled — otherwise you read a title over half a transition. The fix: strict dwell windows on the 0..1 progress, a lerp on the frame so it does not jitter on fast scroll, and preloading every frame before scroll is unlocked.