Live keyer
Screen gain, clip black and white, softness and despill can be changed, and the matte updates.
Concept · VFX compositor portfolio
Kompozit
Scrub a VFX shot on a timeline, switch between raw plate, matte and final, and adjust a live keyer.
What we did
A compositor's showreel shows the result but hides the work, which is what studios hire for. We tested a portfolio built like a compositing desk, where the visitor takes the shot apart layer by layer.
- Portfolio site
- Green screen key in the browser
- Before and after slider
- Node graph
ConceptA fictional brand we designed end to end to test an idea. Not a client project; every feature on it works and you can open it live.
- Type
- Design concept · fictional brand
- Sector
- VFX compositor portfolio
- Year
- 2026
- Status
- Open to inspect live
Signature
Raw plate, finished comp.
The slider from the concept's shot breakdowns, with the concept's own example shot.
The big idea
The page is the workspace
The site looks like editing software: effect controls, a monitor and a timeline with tracks V1 to V4. Clicking a clip opens its controls, and the green screen key is computed in the browser.
View modes
One key cycles the monitor through final, raw plate, matte and wireframe.
Shot breakdown
Each step, from lens distortion removal to film grain, is listed with its settings.
Editor-style controls
Space, arrow keys and J, K, L work as they do in editing software.
How we did it
Step by step.
- 01
The page as a desk
The first screen is laid out like editing software: effect controls on the left, the program monitor in the middle and four tracks below. Scrolling moves the playhead and the monitor shows the next layer.
- 02
One scene, three shots
Each shot of the example scene has its own breakdown: a slider from the raw plate to the finished comp, the plate details, the passes it produced and the delivery format.
- 03
The node graph
The first shot's script is drawn as a 21-node graph. Colours match the timeline tracks, and pointing at a node explains what it does on the right.
- 04
Steps with durations
The work is described as six steps from reading the plate to delivery, each with its output and a duration bar. The services follow the same pattern: scope, delivery format and days per shot.
- 05
Work as a grid
Nine productions sit in cards. A small grid on each card shows how the work split between keying, CG and clean-up; clicking a card opens the duration, team, techniques and software.
Why we did it this way
A finished shot doesn't show how it was made.
TypicalCompositor portfolios are often a single video of finished shots.
HereEach shot opens from the raw plate to the finished comp, with the layers and passes listed in between.
TypicalThe method is usually summed up as a list of software.
HereThe node graph of one shot is shown, with what each node does.
TypicalDurations and file formats are usually left for the first email.
HereEach service lists its days per shot and its delivery format on the page.
The result
Open to inspect live
- 3Shots broken down layer by layer
- 21Nodes in the graph
- 4Timeline tracks
- 9Productions in the work list
- Chroma keyer in plain JavaScript on canvas pixel data
- Custom 3D renderer on Canvas 2D, without three.js
- Scroll-linked playhead
- React single-page app
Counts are of what is on the concept site; they are not measurements.
Use this theme
Make it yours.
This concept is also one of our ready-made web themes. Start from it instead of from scratch.
Single-site license$190.92
The theme files for one website.
Turnkey setup$722.60
We set it up with your content and launch it.
Files download right after payment.
Tell us about your store.
A free 20-minute call. You leave with a clear next step, whether you work with us or not.