R10 · Product Films · JQ AI SYSTEMS
One Line
One line never leaves the screen and the film never cuts: a camera rides its head through every scene, then pulls back to show it was one stroke.
40.0s · 1920×1080 · 30fps · one take, no cuts
The film for Product Films, drawn as one unbroken line. It plots an easing curve, lifts type off its baseline, climbs into a chart, outlines a product screen that re-renders into Portuguese, runs as the playhead of an editing timeline, traces three formats, then signs the JQ mark.
An original score composed in code. No spoken dialogue. On-screen text carries the story.
scene breakdown · select a scene to play
The prompt
The brief I gave Claude Code, with the HyperFrames skills installed, to start this film. Approvals and fixes came after, but this is where it began.
Make a 40-second 1920x1080 film in HyperFrames for Product Films, my service that makes product films in code.
It's my showreel, so make it impress. One teal #00BFB4 line never leaves the screen and the film never cuts:
one camera rides the glowing head of the line across a wide world on #111110.
Stations, each on the beat of a 120 BPM score: the line draws an expo.out easing curve on a small graph and
"One line." rises beside it; it becomes the baseline that "Every frame starts as a line." rises from, letter by
letter as the head passes; it climbs a staircase of five bars while a counter runs to "1,200+ brands designed";
it outlines a product card that renders itself (EN to PT under a scan line, the price rolls from 29 to 19 €/mo,
the line fills the Render button); it stretches into an editing timeline as the playhead, cutting six clips a
second apart; it vibrates into a waveform; it traces three formats, 16:9, 9:16 and 1:1, which fill in as each
closes. Then the camera pulls all the way back to show the whole journey was one line ("One line. Forty seconds.
All code."), and the line signs off by drawing the JQ mark as one stroke, which fills. End on "Product Films",
"by João Queirós, designer who builds systems", the three tiers, "First 3 Showreels €900" and
ai.joaoqueiros.com/services/product-films. A small minimap in the corner traces the line all the way.
Libre Baskerville for display, Inter for UI, JetBrains Mono for labels and timecode.
Technique: one painter computes every frame from time; SVG paths drawn with dash offsets; the head follows
getPointAtLength; the camera is a list of keyframes with zoom interpolated in log space.
Score: compose it in code with numpy, 120 BPM in A minor, one progression under the whole take, a hit on every
station, and every sound ending in a release.Remix it
Swap the parts in braces and paste it in. Some starting points:
- A recipe where the line becomes each utensil and ingredient.
- A startup's year as one line through its milestones.
- A city tour where the line is the route.
- A résumé where the line draws each job.
Make a {duration}-second {width}x{height} film in HyperFrames for {subject}. One {colour} line never leaves the
screen and the film never cuts: a camera rides the line's glowing head across a wide world on {background}.
Stations, each on the beat: {station_1}, {station_2}, {station_3}, {station_4}, {station_5}.
Things react to the head, not the clock: {reaction}.
Then the camera pulls all the way back to show the whole journey was one line, and the line draws {mark} as
one stroke. End on {title}, {tagline} and {url}.
SVG paths drawn with dash offsets, camera keyframes with zoom in log space, a minimap tracing the line.
Score composed in code at {bpm} BPM: {score_idea}, a hit on every station.Ingredients
- stack
- HyperFramesHTMLSVGGSAPPython (score)
- length
- 40 s · 1920×1080 · 30 fps · one take, no cuts
- world
- About 11,000 × 3,400 px, one camera with 18 keyframes
- palette
- #111110 · #F5F5F0 · #00BFB4 · #A3A39F
- type
- Libre Baskerville · Inter · JetBrains Mono
- sound
- 120 BPM in A minor, composed in Python, -16 LUFS
- cost
- €0, all free and open source
how it's built
01 · 00:00
One world, one camera
Every scene sits on one wide world, and the camera is a list of keyframes for position and zoom. Zoom is interpolated in log space, so the pull-back moves at an even pace.
02 · 00:02
The line is a set of paths
Each scene's path has its own start, end and ease and is revealed with a dash offset. The glowing head reads its position with getPointAtLength, so it always sits on the line.
03 · 00:05
React to the head, not the clock
Letters rise as the head passes them, chart bars grow when it reaches them, keyframes pop under it and the waveform lights up behind it.
04 · 00:13
A product card that renders
The line draws the card's outline, a scan line swaps the copy from English to Portuguese, the price rolls on the beat and the line fills the Render button.
05 · 00:18
A real edit
In the timeline the head of the line is the playhead: six clips cut a second apart in the preview while the timecode counts.
06 · 00:29
The pull-back
The camera zooms out to show every scene on one line, while a minimap in the corner has traced the same paths all along.
07 · 00:33
Signing the mark
The mark's four outlines and three short hops are drawn as one stroke, then the hops fade and the filled mark takes over.
gotchas
- Divide the stroke width by the zoom, with a floor, or the line disappears in the pull-back.
- A linear zoom from 1 to 0.17 rushes at the start and crawls at the end: interpolate it in log space.
- Clips inside a scaled world still need their own start times, and stay muted: the score carries the sound.
source
Take the whole project
MIT for the code, composition and score. The JQ AI SYSTEMS logo and mark, the names JQ AI SYSTEMS and João Queirós and the clips of the other films are not included in the licence.