Lathien Pictures · Playground
Cinematic Demos
Thirteen web effects borrowed from filmmaking. Scroll down ↓
Demo 01 · Scroll storytelling
Horizontal Scroll
The section pins in place and scrolling down slides full-screen panels sideways, like walking through your process one stage at a time.
Develop
Every project starts with the idea and the plan.
Shoot
Crew, cameras and lights on location.
Edit
Story, pace and polish in post.
Deliver
Final cuts, ready for every screen.
Demo 02 · Scroll storytelling
Page Turn
A book pins in place and each stretch of scrolling turns a page. The paper bends as it lifts, and the last page asks for an email address.
Lathien Pictures
Our Process
01
Every project starts with the idea and the plan.
Develop
02
Crew, cameras and lights on location.
Shoot
03
Story, pace and polish in post.
Edit
04
Final cuts, ready for every screen.
Deliver
05
Have a project in mind? Leave your email and we'll reach out.
Let's talk
Demo 03 · Cinematic
Rack Focus
Text is soft until it reaches the middle of the screen, then snaps into focus, just like a focus pull. Keep scrolling and it softens again.
Every
frame
has a
focus.
Demo 04 · Cinematic
Letterbox In
The section pins in place and black bars slide in from top and bottom until the frame is 2.39:1 widescreen.
Now we're in movie mode
Demo 05 · Cinematic
Iris Reveal
A six-bladed lens aperture opens (and twists) as you scroll, revealing the shot behind it.
Scroll to open the iris
Demo 06 · Cinematic
Clapperboard
Scrolling closes the slate. When it snaps shut, the screen flashes, like a section intro that says "action."
Demo 07 · Show your work
Before / After Color
Drag across the frame to compare flat LOG footage with the final grade. Swap in two stills from a real project.
LOG
GRADED
Demo 08 · Show your work
Scroll-Scrubbed Footage
Your scroll wheel becomes a jog wheel: a slow push-in toward dusk. Scroll back up and it plays in reverse. The real version swaps in a frame sequence exported from your edit.
● FRAME 001 / 120
Demo 09 · Show your work
Editing Timeline
Scrolling moves the playhead across the clips. The "monitor" shows whichever clip is under it, with running timecode.
Develop
00:00:00:00
Demo 10 · Show your work
Film Strip
Your portfolio as a strip of film. Scrolling down pulls it sideways through the frame, sprocket holes and all.
Demo 11 · Show your work
Hover-to-Play Grid
Each tile sits still until you hover over it (or tap on a phone), then it plays. The real version uses short muted clips from your reel.
Demo 12 · Little touches
Viewfinder Cursor
Move your mouse over the shot. The cursor becomes a camera frame with a blinking REC light.
REC
Demo 13 · Little touches
Word-by-Word Reveal
A statement lights up one word at a time as you scroll, so the reader takes it in at your pace.
We make the kind of work that makes people stop scrolling.