Code

The film for the Recipes library, drawn only in text characters like an old terminal. A command types itself, curtains of aurora rise over a ridge as glyphs in green, teal and violet, the cells shrink until the aurora is almost a smooth picture and grow back, and the glyphs settle into the title.

• ASCII shader
• Glyph atlas
• Cell-size zoom
• Title as a mask

The film for this site's Music page, drawn like hand-drawn animation. A sea, a sunset and a small piano are sketched in sepia ink, the lines boil twelve times a second, the piano's keys press on the score's own notes, and a watercolour wash spreads as the sun goes down.

• Boiling line on twos
• Two-pass ink strokes
• Watercolour wash filter
• Keys pressed by the score

Two of my Midjourney stills, joined without a cut. Lantern Festival comes apart from the left into about 32,000 leaves in its own colours, a wind gathers them into one swirling cloud, and they settle, bottom up, into Sea of Blooms.

• Dissolve into leaves
• 32,000 instanced sprites
• Noise-shaped fronts
• Vortex gathering

The film for my free Brand Readiness Check. A scanner line sweeps my own business card, raises it into a relief of ridge lines and stops on eight features, one for each question of the check, then shows the four score bands and the check's headline.

• Height map to ridge lines
• Scanner sweep reveal
• Feature highlights
• Checklist ticks

The film for my article on how to choose brand colours. A swirl of every colour, marbled like ink, goes through the article's five steps: the colours that don't fit drain away, one primary pools out, and the ink separates into a palette of four, tested on a card, a web page and a social post.

• Time-only flow map
• Marbled ink shader
• Hue draining
• Ink into swatches

One ink line that never lifts off the page runs through 100 marks from Marks, my book of 398 logo identities. It closes into each outline and flows into the next, faster and faster, then settles on the JQ mark.

• One-path morph
• Outlines traced from images
• Matched start points
• Score driven by line speed

The film for AI News Curator. About 6,000 scattered fragments line up like iron filings, gather around the six real themes of the workflow, and the strongest six become one daily brief that a person reviews before anything is used.

• Iron-filings field
• Field lines from point charges
• Fragments into a card
• Review gate

The film for JQ AI Skills. A paper terminal types the same long prompt for the 103rd time, then prints the brand-voice-linter skill, folds it along its four steps into a card and files it on a shelf of all 47 skills.

• Paper terminal
• Accordion fold in CSS 3D
• Stamp-to-shelf match
• Camera pull-back

The film for the Prompt Engineering service. A stock AI paragraph has its clichés caught by an anti-pattern scan; they burn into tokens, rain through draft, critique and rewrite, and land as one line in the brand's voice.

• Glyph-to-particle dissolve
• 88,000 GPU particles
• Camera dive through rings
• Particles to type

The film of Marks, my book of 398 logo identities, told in the language of the press: each mark printed plate by plate into register, a dive into the halftone dots, a press sheet folded into a signature, and a riffle through the bound book.

• CMYK plate registration
• Halftone dot-screen reveal
• 3D imposition fold
• Riffle speed ramp

The showreel for the AI Brand Visuals service. A brand guide writes itself and every rule becomes picture: the stills, loops and films on this site fly past, unfreeze, cut on the beat and finally regrade into one brand look.

• Kinetic typography
• Layout choreography
• 3D fly-through
• Iris match cut
• Audio-reactive ridge field

The intro film for this site's about page. Logos from João's branding work cut on the beat, and the camera pulls back through a wall of them until it reads as his portrait, which develops into the photo beside the page's title.

• Photomosaic
• Cut on the beat
• Log-space zoom
• Tile flip reveal

The intro film for this site's blog. The post titles stream past in rows, a live search lights up the matches on the beat, and the river of titles tilts away under the page's headline.

• Kinetic typography
• Live search
• Cut on the beat
• 3D tilt

The intro film for this page. The prompt floods the frame with the real source code of the films, one editor pane per film, and each pane compiles into the film it made. The camera pulls back to a wall where every film plays.

• Code as picture
• Scanline reveal
• Cut on the beat
• Pull-back reveal

The intro film for this site's Films page. A render bar folds open into cinema letterbox bars, the films cut on the beat with each one riding in on a wave, and the last shot pulls back into a wall where every film plays, vertical cuts included.

• Wave-shaped wipes
• Letterbox and slate
• Cut on the beat
• Pull-back reveal

The intro film for this site's Music page, drawn by the music itself. The prompt presses play on Tranquil Tides; the horizon is the track's real waveform, a sea of ridges is its spectrum rolling in, and the covers rise like suns on the music's phrases.

• Audio-driven visuals
• Spectrum ridgelines
• Waveform horizon
• Phrase-synced reveals

The intro film for this site's Motion page. Frozen frames of a kingfisher slide past on a filmstrip, the strip spins up to 24 fps until the frames are the moving loop, the camera pulls back through the page as each card unfreezes, and the last card is one tile of a wall where every loop plays.

• Filmstrip spin-up
• Flash and focus pull
• Page unfreeze
• Pull-back reveal

The intro film for this site's Stills page. Its own prompt types out, an eye resolves out of diffusion noise in forty steps, the camera dives through the pupil into the page as it renders, and the last card pulls back into the wall of every still.

• Diffusion denoise
• Dive through the pupil
• Page render
• Pull-back reveal

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.

• One continuous camera
• Path drawing
• Re-render morphs
• Procedural score

A narrated promo for Phone Webcam Bridge, which turns an Android phone into a Windows webcam. The camera in your pocket, the real dashboard, USB or Wi-Fi, the local meeting path, and a release that keeps everything on your devices.

• Word-level captions
• Split-tilt cards
• Signal path draw

Fourteen seconds of a branding career: the portfolio brochure opens and thumbs through eight client projects, bursts into a wall of logos counting up to 1,200+ brands in 40+ countries, and folds back into the mark on its cover.

• CSS 3D page flips
• Tile burst and card turns
• Seamless loop

The JQ AI Systems launch film, built in the page itself: real type, CSS 3D and real product screens, with a synthesised score. From a Monday-morning problem to the systems shipped, the proof and the first call.

• DOM film engine
• CSS 3D card fans
• Odometer counters

Fifteen seconds for JQ AI Systems, drawn live in a single canvas with a score composed in code. Hours become minutes, think becomes build becomes automate, four systems pass, the numbers count up and the mark resolves.

• Generative particle fields
• Procedural score
• Kinetic type

A motion reel for Thumbnail Studio, a local-first packaging studio for YouTube. The colorway rotates: every cut sweeps in the next of the app's seven colours as one brief becomes seven thumbnails, a duel, a 168 px test and a title scored against the winner.

• Colorway rotation wipe
• Sticker slaps
• Live overlap meter

A motion reel for Grid Studio, twelve free Instagram tools that run in the browser. The film is a grid: every cut is a wipe of numbered tiles in posting order, and one coastline photo is cut, posted and reassembled on a profile.

• Posting-order tile wipe
• Profile reflow
• Tool micro-loops

A motion reel for Snapline, a screenshot and screen-recording manager for Windows. The film captures itself: every cut is a screenshot, and each capture is filed, found by its own words, marked up and beautified.

• Capture overlay
• 3D card flight
• OCR scan and lens

A motion reel for OutreachIQ, a self-hosted outreach workspace. A flood of easy sends freezes, one honest funnel narrows, and a single email passes the gate only when a human clicks Approve.

• Particle stream
• Live data re-sort
• Gate mechanism

A motion reel for Tembr, a voice cloning studio that runs on your own machine. One amber bar becomes the logo, records, clones, speaks in a real cloned voice and reaches three leads.

• Audio-reactive motion
• Shape-match logo build
• Live captions

A motion reel for Klatea, a private prep studio and live copilot for the meetings that count. One loop, four moves: prepare, go live, get help, debrief.

• Match-cut transitions
• Camera journey through UI
• Logo assembly