GYEOL DETAIL CARE — a cinematic scroll film for mobile hand detailing
GYEOL DETAIL CARE is a cinematic scroll-film site for a fictional premium mobile hand-detailing brand. A single champagne guide-light connects trained hands, precise finishing, a mobile atelier, and a nationwide network. Scroll does not jump between sections; it pushes the camera forward through one connected space. View the live site at ononc-gyeol-detail-care.pages.dev.
The challenge
Typical car-wash sites list services as cards and stacked sections. This project had to turn craft, training, mobile service, and coverage into one continuous shot. The film could not feel cut, and the header destinations for service, standards, mobile work, and network had to read as real pages rather than empty templates.
One light connects the atelier
The camera only ever moves forward along the same champagne line. It starts between two silver sedans, then continues through a hand wash, a year-long training bay, close finishing work, a mobile van, and a nationwide operations hall. Place and scale change, but the same specialist, the same car, and the same forward vector keep the shot continuous.
A 30-second film mapped to 921 frames
Six keyframes and five clips were assembled into one film and extracted as 921 native-rate 1024px JPEGs. Scroll progress maps to a frame index, while a sliding ImageBitmap window keeps at most 48 decoded frames in memory. Network load was reduced from 921 individual requests to 77 lossless frame packs, so fast scrubbing does not stall on missing frames.
- Only a small window ahead of and behind the playhead is fetched; bitmaps outside that window are closed immediately.
- At most two pack requests run at once, and work outside the active window is aborted.
- Chapter copy uses a cross-fade so the overlay never blanks between stops.
Header links that actually go somewhere
Service, standards, mobile detailing, nationwide network, and booking are separate pages, not in-page anchors. Each one carries process, training, site requirements, regional coverage, or a consultation form. The right-hand remote keeps the up and down arrows on the same axis as the chapter marks, and forces a clean landing so copy stays fully visible when moving from 01 to 00 or 04 to 05.
Finished as a product, not a demo reel
The cinematic opening is backed by an initial frame loader, safe mobile framing, reduced-motion handling, and clearly labeled fictional business details required by Korean commerce-site conventions. The 365-branch network and contact information are portfolio concept, and the site states that no real booking is accepted.
Stack
Next.js App Router · React · TypeScript
Canvas · sliding ImageBitmap window · 921 JPEG frames · 77 lossless frame packs
Six chapters, chapter remote, independent detail pages
Cloudflare Pages · view the live site
