Odd Lot

Fictional design studio (Rotterdam), fictional clients and projects. English demo, short copy.

1. Development

• Product truth. A nine-person studio that makes identities, packaging, typefaces and motion. What it can honestly claim is its work; everything else (numbers, quote, prices) is invented for the demo and labelled.
• Audience. Brand and marketing leads with a shortlist of three to five studios. They arrive skimming, they decide on the work, and they want to know what happens after they write in.
• The one action. Start a project: a five-field brief, or email. Secondary: see the work.
• Logline. A marketing lead who has seen a hundred portfolios that look alike wants a studio that can make her brand impossible to miss; five pieces of work that look nothing like one another prove that this one can, and she ends by watching the studio set her own project's name.
• Audience arc. Arrives: "another studio site, another grid of mockups." Leaves: "every project here looks like its client, not like the studio. They'll do that for us, and I know what happens after I write."

2. Casting session

Dramatic problem: range and nerve, proved fast. The studio has to look like it has a point of view and also like it disappears into each client.

Candidate	Mechanism that solves it	Signature shot	Risk / wrong for
Jean-Luc Godard — Pierrot le Fou (1965, Raoul Coutard, Techniscope)	Collage of found objects (paintings, comics, adverts) cut into a story; words as images; primary colour as structure; the film addressing its audience	The opening credits whose letters appear in alphabetical order, blue and red on black	Risk: arch and cold; quotations as costume. Wrong for anything that needs warmth or a single product
Saul Bass — title sequences (Vertigo, Anatomy of a Murder)	One cut-paper symbol that becomes the whole idea	A bar that becomes a column that becomes the logo	Built for a single symbol; a studio of five different clients would be forced into one shape. Also the obvious pick for "design studio"
Edgar Wright — Baby Driver	Process as snap-cut inserts, transitions hidden in whips, everything on a beat	A row of percussive inserts cut to a track	Rhythm without dwelling: the index needs the visitor to linger on a piece of work; a whip-cut site is a showreel, not a portfolio

Cast: Godard, Pierrot le Fou. A studio portfolio is a collage of other people's objects, so the film's habit of inserting found material is native rather than decorative. Bass set aside because his single symbol cannot hold five clients; Wright set aside because his cutting never lets the eye rest on a piece of work.

Could a competitor use this direction unchanged? No: the lead is this studio's own artboard, the loader is its own name sorted A to Z, and the ending is the visitor's own project title.

Mechanisms (observable in the film → visible on the page):

1. Credits in alphabetical order. The opening titles' letters arrive A to Z rather than in reading order → the loader: O-D-D L-O-T lands as D, D, L, O, O, T, blue and white on black, already at hero size. (Frame 1.)
2. Coloured light sliding over the windscreen in the night drive → the showreel's cut: a band of blue-white light crosses the artboard and the work changes under its brightest point. (Hero, autoplay.)
3. Primary colour as structure → each project opens on a flat card in its own colour; the studio's only red means "act here".
4. Words as images, title cards that interrupt the action → opening a project first shows its name as a full-frame card in outline rows, then the work. (Project open.)
5. Direct address to camera → when the visitor stops, the page speaks to them in the status corner, and what it says depends on where they are. (Idle.)
6. Collage of found material → five artefacts that share nothing but the artboard they sit on: transit poster, ceramic boxes, broadcast mark, type specimen, cider label. (Index.)
7. The jump cut → a project opens with a designed transition and closes with a jump: one frame and you are back at its row, marked as seen. (Close.)

Filmography check (last three: Sciamma / Retour, Anno / Tieout, Fincher / 北辰). Differs on director, medium (flat primary cards + SVG artefacts, Latin type, no paper, no line, no 3D), form (hover index + click-opened overlay, one short scrubbed scene), type (Syne 800 + Hanken Grotesk, Latin), lead (the artboard), interaction (hover-to-preview, then title your own project), ending (the visitor's title on the card), instruments (frame-label breadcrumb, reel counter with pause, live studio clock that turns into direct address). Eight of eight.

3. Medium

Designed: flat primary cards, set type and five inline-SVG artefacts drawn for the demo, no canvas, no photographs, no generated images. Godard's collage becomes a page of distinct designed objects pinned to one artboard because the work, not a camera, is what a buyer is judging. Why not 3D: the film is flat colour, cards and print; depth would turn the work into mockups.

4. Lead, location, asset call

• Lead: the artboard. A flat rectangle with a frame label at its top-left corner, the studio's own working surface. Verb: it sets things (titles, holds, presents). States:
  1. Empty frame on black (loader): the label draws, the name's letters land A to Z.
  2. Reel (hero): the artboard plays five projects under passing light.
  3. Preview in the hand (index): small, it follows the pointer as a tool.
  4. Title card (open): it grows from the preview to the whole frame, in the client's colour, carrying the project's name.
  5. The work, whole (case): the artefact at full size.
  6. Seen (index after close): a small blue mark stays on the row.
  7. Yours (enquiry): the card titles itself with the visitor's working title; on sending, its last row fills red.
• Location: a black projection room (hero, enquiry) and a paper table (index, statement, facts), lit flat; colour comes only from the cards.
• Asset call: none to make. Brief excludes paid generation; all five artefacts are drawn as SVG for the demo (stand-ins for real client work). Marlow's typeface is shown with Fraunces (OFL) as a stand-in. No open-licensed images used, so no credits beyond fonts.

5. Screenplay

All visible words are in copy.md.

6. Storyboard

Form: a short document with set pieces. Hero (flow, autoplay), index (flow, hover), one pinned scrubbed statement, facts (flow, enter-play), enquiry (flow, input), footer (flow, autoplay). Projects open in a fixed layer above the page with a real URL hash (#/work/tidewater), so the scroll position never moves under them.

Award pass

WORLD OBJECT   the artboard: a flat rectangle with a frame label top-left (name · index · size). Loader (label draws, name lands), cuts
               (preview artboard grows into the project card), CTA (red artboard with four selection handles on focus), cursor (red
               "Open" chip on the preview), progress (frame-label breadcrumb "Odd Lot / Index / 03 Night Shift Radio"), enquiry card, footer.
LEAD STATES    empty frame → reel → preview in the hand → title card → the work → seen mark → your title, last row red
LOADER         black; frame label draws; ODD LOT arrives A→Z (D D L O O T), solid; the solid letters drain to outline as the
               outline rows rise: the loader becomes the hero's signature move without a cut
CUT MATERIAL   light (the reel's band of blue-white light), the artboard itself (preview → full card, clip from its own rect);
               the exception: closing is a jump cut, no motion at all
ACCENT         red #E2261C = "start something here": CTA, cursor chip, the enquiry's final row; ≤ 3 % of any frame.
               Blue #1D3ED6 is structure (cards, fills, seen marks), not accent
TYPE           Syne 800 display (extended, French) · Hanken Grotesk 400/500 text · switch: one word per line in Syne caps
               inside the text face ("the cap word"). Display at the huge extreme: name 11–13 vw, project titles on cards 10+ vw
INSTRUMENTS    top-left frame-label breadcrumb (where you are), top-right red CTA (pole star), bottom-left studio clock
               "Rotterdam 14:32 · in the studio" that becomes the idle line, hero reel counter "02 / 05" with pause
VERB           the visitor titles their project and watches the studio set it (input), after choosing work by pointing at it
TRIGGERS       autoplay (loader, reel, name, footer) · hover/focus (index preview, select box, CTA) · click (open, pause, step,
               send) · scroll scrub (statement only) · scroll enter-play (facts) · input (enquiry card) · idle (direct address)
               · time of day (clock). 1 of 15 performances is scrubbed
TYPE CAST      signature outline-fill (opening, turn, ending) + headline-swap, select-box, odometer, read-fill, typewriter,
               stretch, giant-marquee
RHYTHM         set pieces: hero, project open; calm documents: index, statement, facts, enquiry. Phone: index rows become
               tap-to-select with a bottom preview sheet; hero stacks name over a square reel

Trigger table

Beat	Performance	Trigger	Keyboard / touch	Reduced motion
Loader	ODD LOT lands A→Z, then drains to outline	Autoplay once (1.6 s)	Nothing to do; content and CTA are live underneath	Name complete, no sequence
Hero name	Outline rows fill in sequence	Autoplay loop; pauses with the reel, off-screen, hidden tab	Pause button	Frozen at rest pose
Reel	Light band crosses, work changes under it; caption swaps under a blue bar	Autoplay (4.8 s per work)	Pause / Play button; Prev / Next buttons; ←/→ on the reel	Paused on 01, steps are instant
Index preview	Artboard follows pointer with lag; red "Open" chip	Hover	Focus anchors the preview beside the row; tap selects and shows a bottom sheet	Appears in place, no follow
Index title	Select box draws round the title, real width label	Hover / focus / tap	Same	Shown at rest
Open project	Clip grows from preview rect to full card; title outline-fill rows rise and fill once; work rises	Click / Enter / hash	Enter on a row; tap on the sheet	Instant, at rest
Close	Jump cut to the row; seen mark stays	Click "Back to index", Esc, browser Back	Esc / Back	Same
Statement	Read-fill, word by word	Scroll scrub (pinned 220 vh)	Space / Page Down scroll it	Fully lit
Facts	Three odometers roll to their values	Scroll enter, plays once	—	Final values
Idle	Typewriter line in the status corner, context-aware	9 s without input	Any key, pointer or scroll dismisses it	Line shown whole
Clock	Live Rotterdam time, in / out of the studio	Time of day	—	Same
CTA	Letters spring off the baseline	Hover / focus	Focus	No motion
Enquiry card	Outline rows retitle to the visitor's working title	Input	Typing	Rest pose updates
Send	Card's last row fills red; confirmation	Submit	Enter	Instant
Footer	Giant name drifts, ticker beneath	Autoplay while on screen	—	Frozen

Type cast

Effect	Job	Trigger	Where
outline-fill (signature)	A name being set by the studio	Autoplay (hero), click (project card), input + submit (enquiry card)	The name; each project's title card; the visitor's working title
headline-swap	Says which work the reel is showing	Autoplay, keyed to the reel	Reel caption
select-box	Answers attention like a design tool	Hover / focus / tap	Index titles
odometer	Proof that runs once	Scroll enter, then play	Studio facts
read-fill	The studio's one statement, read with the visitor	Scroll scrub	Statement
typewriter	The page addressing the visitor	Idle	Status corner
stretch	The action answering a hand	Hover / focus	"Start a project" buttons
giant-marquee	Title ground at the end	Autoplay continuous	Footer

Shot list

#	Scene	Copy	Shot / blocking	Light, colour	Build	Cut out	Length	Energy	Money frame	Mobile
1	Hero hero (flow)	Name, descriptor, CTA, See the work	Wide. Name in four outline rows left 7/12; artboard 4:5 right with label and reel caption below	Black ground, white outline, blue/white fills, light band	outline-fill, reel, headline-swap	Push to paper: the index's first row is already in view under the fold	100 vh	8	Row two filling blue while the light band crosses the artboard	Name three rows over a square artboard
2	Index index (flow)	Selected work, five rows	MS rows of display type at 6.4 vw, meta in text face right	Paper, ink; preview in the client's colour	hover preview, select-box, cursor chip	Push	content	4 → 9 on hover	Row 03 hovered: selection box, preview with the broadcast mark, red chip	Rows at 9.5 vw, tap selects, sheet at bottom
2b	Project layer (fixed)	Title, brief, what we made, result, next	Full card in client colour; title 3 rows; artefact large; three short paragraphs	Client colour; artefact	open state function render(x, s)	Jump back	—	9	Tidewater card mid-open, the clip edge still visible over the index	Same, stacked
3	Statement statement (pinned)	Statement	CU of a paragraph, 3.4 vw, left-aligned to the index grid	Paper, ink, dim copy at 20 %	read-fill scrubbed	Push	220	3	Two-thirds lit, the cap word lit	7 vw
4	Facts facts (flow)	Facts, quote, clients	Three numerals at 9 vw in a row, quote below	Paper; numerals ink	odometer on enter	Push into black	content	5	Numbers landed	Stacked
5	Enquiry enquiry (flow)	Offer, form, reassurance	Split: the visitor's card left (sticky), form right	Black; card blue; red button	outline-fill on input, form, confirmation	Push	content	6 → 8 on send	The card reading the visitor's title, last row red	Card on top, form below
6	Footer credits (flow)	Marquee, fictional notice, fonts	Giant name marquee band, small print	Black, blue band	giant-marquee	—	content	2	—	Same

The audience's part. Action: type a working title for your project. Response: the artboard sets it in the studio's outline rows as you type. Consequence: the title rides into the confirmation and the card's last row fills red when the brief is sent. Equivalent: any text input method; the form works without it.

Skeleton. Cold open on type (the loader is the name) → high (reel) → attentive low (index) with visitor-made spikes (each open) → quiet (statement, facts) → rising (enquiry) → ends on the visitor's words on the card: a rhyme with the opening rows.