ONBIT Dongincheon — a cinematic scroll film built from 936 frames
ONBIT Dongincheon is a cinematic scroll-film site for a fictional residential brand. A single bronze line connects the development, Dongincheon Station, the West Sea, Sinpo Market, and an architectural finale. Scroll does not move between sections; it advances one continuous camera move. View the live site at onbit-dongincheon.pages.dev.
The challenge
Typical property sites list location benefits as cards and stacked sections. This project had to turn five separate selling points into one memorable journey through the city. Transitions could not feel like cuts, and reversing the scroll could not let the footage and copy drift apart.
One line connects the city
The camera only moves forward, following the same bronze route. It starts in the residential district, crosses the station axis, becomes a reflection on the West Sea, threads through Sinpo Market, and resolves into a structural grid. The location, scale, and material change, but the line and camera vector preserve continuity.
A 39-second film mapped to 936 frames
Five clips were assembled into a 39-second film and extracted as 936 JPEG frames at the native 24fps. Scroll progress maps to a frame index, while a sliding ImageBitmap window decodes only the frames around the current position. The result supports fluid forward and reverse scrubbing without keeping the whole film resident in memory.
- A short interpolation lets the camera follow input smoothly instead of snapping to every wheel event.
- Only a small window ahead of and behind the current frame is prefetched; old bitmaps are released immediately.
- Keyframe fallbacks prevent an empty canvas while a requested frame is still arriving.
Footage and copy share one timeline
The five headlines, statistics, bottom caption, and chapter remote all use the same normalized progress value. At every stop, one chapter reaches full opacity while the next remains at zero, preventing overlapping copy. The Sinpo chapter was aligned to the exact frame where the market scene resolves, at 75.73% of the film.
Finished as a product, not a demo reel
The cinematic opening is supported by practical interface details: a five-stop chapter remote, an initial frame loader, safe mobile framing, prefers-reduced-motion handling, a secondary information page, and clear calls to action. The site also states that all property claims and contact details are fictional portfolio content.
Stack
- Next.js App Router · React · TypeScript
- Canvas · sliding ImageBitmap cache · 936 JPEG frames
- Five chapters, chapter remote, scroll-synchronised copy
- Cloudflare Pages · view the live site
