ScenarioExplorations One Logo, 42 Worlds

One bouncing logo. 42 worlds. All drawn in code

One logo, 42 worlds.

Same bounce.
Every world.

The Scenario logo bounces from a green terminal to Van Gogh's sky, past op art, lasers and a 1928 steamboat.
Several worlds are tributes to art. The soundtrack is on the same timeline, so its beats land on the bounces.

01 / 39

World 01 Terminal (binary) · speed A

0:00 / 0:40

How it was made

One timeline, drawn and scored in code.

Made entirely in code. Every world is drawn with SVG and CSS on one shared bounce timeline, and every soundtrack is synthesized from that same timeline, so the kicks land on the landings and each world's sound effect lands on its own on-screen moment.

  1. 1

    Trace the mark, set one clock

    The four diamonds are traced from the official logo file. One function, markMotion(frame), gives the mark its position, squash, spread and tilt, and every world gets exactly one bounce, so every cut lands with the logo.

    Withcode · SVG

  2. 2

    Build the worlds

    70 styles, each one a component: a binary terminal, a 1928 steamboat cartoon, a Da Vinci notebook, cymatics sand, an infinite zoom and more. 39 made the film, and each one reacts to the landing.

    WithSVG · CSS · canvas · public-domain art as reference

  3. 3

    Set the pace

    Five speeds, eight worlds each: 1.23, 1.0, 0.9, 0.8 and 0.7 s a bounce. At 11 of the cuts the next world arrives as a 12-frame pixel dissolve.

    With39 worlds · 1,191 frames · 1080 × 1080 at 30 fps

  4. 4

    Paint with simulations

    Some worlds are small simulations. Van Gogh's sky is thousands of brushstrokes traced along evenly spaced flow lines, and the mark pushes them aside as it bounces.

    Withcanvas · flow lines

  5. 5

    Score it from the timeline

    A Python script reads the film's timeline and synthesizes every note: a kick on each landing, a clap on each apex, and each world's own sound on its own event.

    WithPython · NumPy · SciPy

  6. 6

    Write the classics as notes

    Public-domain pieces are written out as notes on the same engine, next to original chiptune, funk and a galop. All 11 soundtracks share the clock.

    With11 soundtracks · default: In the Hall of the Mountain King

Tip

Put the clock first. When the picture and the music both read one timeline.json, nothing can drift.

Lines of code

≈ 7,600

For 70 styles, 39 in the film, and 11 soundtracks.

Skill · ZIP

Make your own logo film with an agent

SKILL.md, references, the real scripts and a timeline example.

Download ↓

PDF · 8 pages

The illustrated making-of

Seven chapters, from the mark to the receipt.

Open ↗

Scenario

Make yours

Start with your own logo and your own worlds.

Open Scenario ↗