How we built a website that works like a video-editing timeline
Behind the build of Keyframe, our reference site for video studios, where scrolling scrubs a playhead and every section is a clip with a real edit transition.
Short answer
Keyframe turns the page into an editing timeline. Each page section becomes a clip on a dock generated from the page itself; scroll position maps to a timecode; dragging the dock scrubs the page; Space plays it like a video; and each section enters with a named transition such as a cross dissolve or wipe.
The best website concepts come from the client's own world. For a video editing studio, that world is the timeline: clips, tracks, a playhead and a timecode that never stops ticking. So for Keyframe, our reference site for editors and motion studios, we made the page itself behave like an editor.
Scroll, and a playhead moves across a timeline docked at the bottom of the screen. Drag the timeline, and the page scrubs with it. Press Space, and the whole site plays like a 90-second edit.
Why build a website around a timeline?
Video studios sell a feeling of control over time: pacing, rhythm, the cut landing exactly on the beat. A generic portfolio grid says nothing about that. A site that behaves like the tools they use every day shows it in the first second, before anyone reads a word.
It also solves a practical problem. Editors' clients are used to scrubbing through footage, not reading case studies. Letting them scrub the website feels natural.
How is the timeline generated?
The timeline isn't drawn by hand. It's built from the page. Every section carries three attributes:
<section data-clip="Showreel" data-title="Selected work" data-transition="dissolve">
On load, a small script measures each section and turns it into:
- a V1 clip named after the section, sized to how much scrolling it takes
- a V2 title clip for its heading
- a transition marker between clips, named after the entry effect
- an A2 "whoosh" sound-effect blip at each cut
- a marker on the time ruler
An A1 track carries a waveform for the soundtrack. Add or remove a section, and the timeline rebuilds itself on the next load or resize. Nobody has to maintain it.
How does scrolling map to timecode?
The whole page is treated as a 90-second edit at 25 frames per second. Scroll progress runs from 0 to 1, and the timecode is simply that progress multiplied by the duration, formatted as HH:MM:SS:FF, the way editors read time.
A clip starts when its section reaches the top of the screen. The clip under the playhead is highlighted, the menu item for that section lights up, and the closing slate prints the exact timecode where the final clip begins, taken from the generated timeline.
What controls does it support?
We copied the controls editors already have in their fingers:
| Control | What it does |
|---|---|
| Drag the timeline | Scrubs the page instantly |
| Click a clip | Jumps to that section |
| Space | Plays or pauses the page at real-time speed |
| K | Pauses |
| J / L | Previous / next clip (L while playing speeds up) |
Playing the page advances the scroll position on every animation frame. Touching the mouse wheel or the screen pauses it, just like grabbing the playhead in a real editor.
Which transitions did we use, and why?
Each section enters with a different, named edit transition, and the same name appears on the timeline:
- Cross dissolve: content fades in from a soft blur
- Wipe: content is revealed left to right with a clip-path
- Zoom blur: content settles in from slightly too close
- Dip to black: a black layer fades away as the content arrives
- Glitch: the headline jitters with an RGB split before snapping into place
The point isn't variety for its own sake. Each transition is a small demonstration of the studio's craft, and every one is labelled so visitors notice it.
How do the previews work without real footage?
Reference sites have no client footage, so every "video" on Keyframe is a procedural animation drawn on a canvas: an equaliser for the music video, a squash-and-stretch ball for the animation reel, a title sequence, a lyric video, a rotating product and a glitch film.
Because each one is a function of time, the thumbnails can be hover-scrubbed: move the cursor across a clip and it plays forward and backward under your hand, like the media bin in Premiere or Resolve. For a real studio, the same interaction works with <video> elements by setting currentTime from the cursor position.
What would we change for a real client?
- Swap the procedural scenes for the studio's own clips, with short, compressed hover loops.
- Put real case studies behind each clip, with credits and the client's brief.
- Keep the timeline simpler on phones. On small screens Keyframe already shows only the main video track.
If you run a video or motion studio and want a site that feels like your edit suite, open Keyframe and scrub around, then tell us about your project.