Skip to content
refs
REF-2894Source onlineBlueprint rev 01

Lofi Cities Nightscape Switcher

A 12-second pixel-art web experience cycles through three musical city worlds, then resolves into a branded collage.

Maker @SafaElmaliFor Lofi CitiesOriginal post ↗
Cut timeline · 3 shots00:12
00:0000:0200:0400:0600:0800:1000:12

Starter prompt / by Refs

The creator shared no short prompt. This is ours for making a film like it with Claude.

Make an endless lofi web app: a cozy pixel-art attic room looks out on Paris at night through a rain-streaked window, with string lights, a desk lamp and a cat asleep on the sill, plus buttons to switch to Tokyo, New York or Istanbul with local clocks. Generate the music live with the Web Audio API, jazzy chords, dusty drums and vinyl hiss, writing a new piece every few minutes and naming it in a player bar with key and tempo. Record 12 seconds at 1920×1080 with headless Chrome.

Field notes / why it works

The finished app fills the frame at 0:00, with a playing track, scene choices, rain, and warm room detail visible at once. Hard changes around 0:03 and 0:06 demonstrate range through sharply different palettes, while the name waits until the four-world montage around 0:09.2. The 12-second film stays music-led, so the product's mood is experienced directly rather than explained in narration.

01

Plate 01 / The format in one breath

An immersive app environment fills the screen immediately, with a small but legible control bar proving it is a product. Two scene changes show range; a final mosaic names the app. The post's promise is an endless, browser-composed lofi soundtrack for work, stated in the accompanying caption; the film makes that promise felt through its music and living visual worlds.

Why it works

  • Result-first hook: the furnished rainy room, large window, city tabs, and playing track are all visible at 0:00, with no setup card.
  • Variety arrives on a timer: warm Paris at 0:00, neon Tokyo at 0:03, and tropical Rio at 0:06 make the world-switching idea clear within nine seconds.
  • A product name only takes center stage at about 0:09.2, after the film has supplied sensory proof. The post reached 141,192 views, though that count alone cannot establish why viewers watched.
02

Plate 02 / Format card

Platform · aspect · lengthX · 16:9 · 1280 × 720 · 30 fps · 12.0 s
Pace3 measured shots; 2 definite cuts; 10–15 cuts/min allowing one uncertain change; 15 picture changes/min including the end-card step; mean shot 4.0 s
ScriptNo meaningful spoken script; a single detected “I” at 0:02.3 conflicts with the no-speech finding and appears to be a transcription artifact. UI microcopy and the post caption carry the message.
VoiceNone; no person appears or speaks.
On screen100% recorded or rendered pixel-art web experience; three wide environment views, then a composite brand frame.
CaptionsNo subtitles or kinetic text; small persistent UI labels and a large final product name.
SoundMusic-led lofi instrumental, roughly 80 BPM; full mix −14.9 LUFS integrated, −1.6 dBFS true peak.
StructureResult-first environment → first alternate → second alternate → brand collage; visual payoff by 0:06; no in-video call to action.

Pro / 13 plates + recipe

The first plates are open. The full dissection is Pro.

Get the timed shots, type and sound specs, and the runnable recipe.

Open the full blueprint
  1. Plate 03 / The hook, frame by frame (first 3 seconds)Pro
  2. Plate 04 / Structure (beat sheet)Pro
  3. Plate 05 / Shot grammarPro
  4. Plate 06 / Visual style guidePro
  5. Plate 07 / Voice and deliveryPro
  6. Plate 08 / Sound designPro
  7. Plate 09 / PackagingPro
  8. Plate 10 / Script templatePro
  9. Plate 11 / Production planPro
  10. Plate 12 / PromptsPro
  11. Plate 13 / Edit recipePro
  12. Plate 14 / QA checklistPro
  13. Plate 15 / Make it yoursPro
  14. Recipe / runnable promptPro