01
Use the real material
The film uses the portfolio's existing stills, typefaces, brand mark and a capture of the website. The prompt serves as the thread between scenes.
experiment 001 · code
Imagined Worlds · Showreel
15.0s · 1920×1080 · 30fps · 6 scenes
A 15-second reel built from this site: its prompts, its stills, its type and its pages. Six scenes, six techniques, cut to the beat.
Music and sound effects. No spoken dialogue.
scene breakdown · select a scene to play
The study
Turn the material of Imagined Worlds into a short motion reel: the prompts, the artwork, the typography and the website itself.
- tools
- HyperFramesHTMLCSSGSAP
- techniques
- Kinetic typographyImage choreography3D transforms
process notes
02
Build six scenes in code
HTML and CSS define the layouts. GSAP choreographs type, clip paths, image grids and camera-like transforms, with each scene exposing a different motion technique.
03
Cut to the beat
Scene changes follow the soundtrack's beat grid. A drawn-on mark and decoded wordmark close the reel.