Prism
Boomerang Video Background Hero
Timeline
3 days
Year
2026
Category
Concept Work
Summary
A full-viewport hero section that captures frames from a hidden video element and plays them forward and backward in a seamless boomerang loop at 30fps — no external video players, no heavy libraries.
The Challenge
Background videos are common, but they typically play in a single direction and restart with an awkward jump. The client wanted a boomerang effect — fluid forward-and-backward playback that feels cinematic and intentional. The catch: no Framer Motion, no GSAP — pure CSS transitions and vanilla JavaScript.
The Approach
We built a custom BoomerangVideoBg module that streams a video into a hidden element, captures each frame to an offscreen canvas at full resolution (capped at 960px width), and stores them as an array. Once the video finishes loading, the hidden video is swapped for a display canvas that walks through frames forward then backward at 30fps — creating an infinite, seamless boomerang. The navbar and overlay elements use CSS-only transitions for a cohesive, performant experience.
Technologies Used
For a client project, this phase would include real metrics, user research findings, and post-launch performance data. This case study represents a concept exploration.