CineCameraClear

How does a cinema camera work?
A spinning shutter that is dark half the time, glass filters that throw away nine stops of sunlight, and a crew member whose whole job is turning one focus wheel. Film a tiny 3D set through a working cinema camera and see what makes moving pictures different.

▶ Play with it  ·  Read the 60-second explainer  ·  Watch the 40-second video

In 60 seconds

1. A sensor in a box, with a rig around it. A cinema camera is a plain body holding a sensor behind a heavy prime lens on a PL mount. Rods, a follow focus, a matte box, a monitor and a V-mount battery bolt on, and it rides on a fluid head, tripod and dolly. On film, a claw pulled each frame into the gate; a 1,000 ft magazine lasted about 11 minutes.
2. 24 frames, each open for 1/48 s. Cinema samples time 24 times a second. A rotary shutter is open for part of each frame: at 180° that is half, 1/48 s, which gives natural motion blur. Narrow angles look crisp and jittery, wide ones smear. Shoot at 120 fps and play at 24 for 5× slow motion; shoot one frame every 2 s for a time-lapse.
3. Sensor size and lens decide the look. A bigger sensor sees wider with the same lens, so you use a longer lens and get shallower focus. Cinema lenses use T-stops so exposure matches between lenses, and a focus puller moves the thin slice of sharpness between actors. Anamorphic lenses squeeze a wide picture sideways, giving oval bokeh and streak flares.
4. Keep the shutter, cut the light. Because the shutter stays at 180°, bright sun can be about 9 stops too much. ND filters in the matte box cut it evenly. Modern cameras hold about 14 to 17 stops of dynamic range, which only survives if you record log instead of Rec.709. Waveforms and false colour check exposure on set.
5. How the camera moves changes the shot. Pans and tilts turn on a tripod; dollies and tracks travel on rails and show parallax; cranes lift the camera high; Steadicams and gimbals float it while someone walks; drones fly it. A dolly zoom, rolling in while zooming out, keeps the actor the same size while the background stretches.
6. Terabytes a day, copied three times. Digital cameras write RAW or ProRes files to media cards, as much as 2 TB an hour for RAW. The DIT copies every card to several drives, checks them with checksums and makes small proxies for the edit, which is later relinked to the originals for the grade.

Words worth knowing

Term	Meaning
Frame rate	How many pictures a camera takes each second. Cinema plays at 24 fps.
Shutter angle	The fraction of each frame the shutter is open, as a slice of a 360° disc. 180° at 24 fps is 1/48 s.
Overcranking	Shooting faster than playback, which gives slow motion. 120 fps played at 24 is 5× slower.
Crop factor	How much smaller a sensor is than 36 × 24 mm full frame. Super 35 is about 1.4 to 1.5×.
T-stop	An aperture number corrected for light lost in the lens, so all cinema lenses expose alike.
Depth of field	The zone from near to far that looks sharp. Long lenses, wide apertures and big sensors make it thin.
Anamorphic lens	A lens that squeezes the picture sideways onto the sensor, stretched back later to a wide 2.39:1.
ND filter	Neutral density glass that cuts light without changing colour. Each 0.3 of density is one stop.
Log recording	A flat-looking curve that keeps all the sensor's stops for the colour grade.
DIT	The digital imaging technician, who copies, checks and backs up footage on set and makes proxies.

A short history

From twelve cameras and a galloping horse in 1878 to digital sensors, drones and phones, with film still refusing to die.

• 1878 · Twelve cameras catch a galloping horse (Eadweard Muybridge, Palo Alto, California, USA)
• 1895 · The Cinématographe and the first paying audience (Auguste and Louis Lumière, Lyon and Paris, France)
• 1913 · India's first feature film (Dadasaheb Phalke, Bombay (now Mumbai), India)
• 1937 · The Arriflex 35 lets you see through the lens (Arnold & Richter (ARRI), engineer Erich Kästner, Munich, Germany)
• 1953 · CinemaScope squeezes a wide world onto film (20th Century Fox, with Henri Chrétien's lenses, New York, USA)
• 1976 · Steadicam makes the camera float (Garrett Brown, Philadelphia, USA)
• 2002 · Feature films shot without film (Pitof; George Lucas, France; USA)
• 2007 · The RED One shakes up the camera business (Jim Jannard, Red Digital Cinema, California, USA)

The full story, with 30 moments, charts, people and 58 sources: glassbox.how/e/cinecameraclear/history. The data lives in history.json.

Video and slides

Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.

File	What	Size
glassbox/reel.mp4	Reel / Short, with captions and soundtrack	1080×1920
glassbox/video.mp4	YouTube video, with captions and soundtrack	1920×1080
glassbox/slide-1…10.jpg	Instagram carousel	1080×1350
glassbox/thumb.jpg	YouTube thumbnail	1280×720
glassbox/cover.jpg	Share card and repo social preview	1200×630
glassbox/history-reel.mp4	“History in 10 moments” Reel / Short	1080×1920
glassbox/history-slide-*.jpg	History carousel	1080×1350
glassbox/post.json	Post copy and schedule used by the publish kit

Privacy

This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.

It remembers a few things in your own browser only, and never sends them anywhere:

Browser storage key	What it holds
cinecameraclear.v1	Which chapters you have opened, your best quiz scores, and sound on or off.

Exactly what each one sees is at glassbox.how/privacy.

Licences

• Code: MIT. Use it, change it, ship it.
• Explanations, text, images and videos (glassbox.json, glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/cinecameraclear”.
• Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
• The Glassbox name and logo aren't covered by either licence. See the terms.

Found a mistake? Open an issue. Corrections happen in public.

Run it

It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.

python3 -m http.server 8000

Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.

Then open http://localhost:8000.

How it's built

File	What
index.html, css/app.css	The page and its styles
js/app.js, js/stage.js, js/ui.js, js/kit.js	The shared Glassbox 3D engine: chapters, 3D stage, controls, quiz, video director
js/chapters/*.js	One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes
js/cine.js	The shared film set, camera rig and supports, optics and exposure maths, and the live viewfinder: a second camera that films the set into an HDR target, then applies motion blur, depth of field, sensor clipping, log or Rec.709 and false colour
glassbox.json	Title, question, explainer beats, key terms, browser storage and credits shown on glassbox.how
reel in each chapter	The storyboard the Glassbox studio records into short videos
glassbox/	The published video, slides, thumbnail and post copy
fonts/, vendor/three/	Self-hosted Geist and Instrument Serif (SIL OFL 1.1) and three.js (MIT)