ATELIER VERTEX

The architecture splits video from scroll via a shared mutable state (world.ts), the same base as AUREX MOTORS. One ScrollTrigger per section writes (scene, progress), and a rAF loop reads it every frame to chase the video's currentTime with damping, so jumping scenes becomes a time dolly, never a hard cut. The film's script lives in one file (scenes.ts) mapping each scene to a fraction of the video's duration. The video itself is encoded with GOP 1, meaning every frame is a keyframe, because without it seeking during scrub stutters. The tradeoff is a larger file, paid knowingly.

The most distinctive scene is 'Prancha' (Blueprint): the video darkens into a light table and the floor plan draws itself in sync with scroll, with walls, furniture, dimension lines carrying real measurements and a drafting stamp, using the same pathLength=1 technique from an earlier project in the same family. The script's boundaries weren't guessed. I extracted frames from the source video every 0.5s to find where the real visual transformation happens, which turned out to be concentrated between 40% and 70% of the duration, then recalibrated the scenes so 'Vedação' and 'Fachada' actually read as different stages. Before that fix, two of the three scenes showed nearly the same static scaffolding.

Like the earlier stadiums project, the site went through a critical self-audit of its design (hero, storytelling, UX, UI, responsiveness, scored 0-10 per axis), run against the actual production build rather than against intent. The most serious finding was the fixed header, which had no real opaque background: any light-colored heading scrolling underneath it turned into illegible text-on-text. The fix surfaced a subtle CSS gotcha. A 'backdrop-filter' on the header becomes a containing block for 'position: fixed', so the fullscreen mobile menu was being sized relative to the header's own height instead of the viewport, until the panel was moved outside that element. After the audit came a real hamburger mobile nav, differentiated CTAs (one closes the film, only the other converts), a film progress rail and a custom cursor.