abegerstein.com
The site you are looking at. No template and no page-builder — every component, animation, and performance decision designed and written deliberately.
A developer portfolio has one job: prove the claim it is making. A template cannot do that, because the thing being demonstrated is the ability to build something that isn't a template. So the site had to be worth looking at on its own terms, and it had to be built the hard way for that to mean anything.
The parts that carry the weight.
Scroll-driven film
Seven clips are generated, cut into frame sequences, and scrubbed by scroll position on a canvas. Pinned sections hold the viewport while a clip plays, then release. There is no video element and no scroll listener — one animation frame loop drives every clip on the page.
Smoothness as engineering
A damped playhead so wheel jitter never reaches the picture, fractional-index crossfades so frames never step, and a cumulative-motion curve so scroll distance is spent where the picture is actually changing rather than on the held frames these clips are mostly made of.
Drawing-office design language
Hairline grids with crosshair intersections, dashed measure rules, mono index numerals, and media panels cut with a bracket notch. Nothing on the page is outlined — borders are replaced by drawn marks, which is what stops a layout reading as a stack of boxes.
Assets built, not bought
Every clip starts from a pair of generated plates, is rendered with keyframes at both ends, then cropped to its display aspect, alpha-keyed where it sits on white, and level-matched to the page.
Why it's built this way.
- 01
Frames are cropped to the panel's aspect at extraction rather than by object-fit, which is the difference between spending pixels where they are visible and upscaling a middle slice around three times.
- 02
Sequences are lazy-loaded a screen and a half ahead, so the page does not pay for clips you have not reached.
- 03
The animation loop does every layout read before any style write — interleaving them forces a synchronous layout per clip per frame.