San Francisco

Fog over the Golden Gate ·

Press play for endless lofiTap to play music is generated live in your browser

San Francisco lofi: Fog over the Golden Gate

A clear, starry night from the top of a steep Russian Hill street. The Golden Gate Bridge's floodlit orange towers rise out of a fog bank that pours in through the Gate and spills over the Marin Headlands, with traffic on the deck and red beacons blinking on top. A cable car climbs past a row of painted Victorians and rings its bell at its stop, while a container ship slides past Alcatraz and its sweeping lighthouse and out under the bridge. Sailboats drift on the bay, sea lions lounge on their floats beside a tall ship at the pier, and fine drizzle glints under a globe streetlamp.

Sounds: Wind, water, a little traffic and fine drizzle, with the bridge foghorn every 48 seconds, a ship's horn in the fog and the cable car's bell.

Landmarks: Golden Gate Bridge, Alcatraz Island, Marin Headlands, Mount Tamalpais, Russian Hill, San Francisco cable cars

About Lofi Cities

Lofi Cities is a free web app that pairs animated pixel-art city nights with endless lofi music generated live in your browser. Pick a city and let it run: every scene is a 480×270 pixel animation that loops seamlessly every four minutes, with its own weather, landmarks and city sounds, while new lofi tracks are composed on the fly.

There is nothing to install, no account needed and no pop-ups. It works on computers, phones and tablets, and makes a calm background for studying, working or winding down.

Every city is drawn by code that AI coding agents write. How it's made

Lofi Cities is on X: @loficitiesapp. Follow along for new cities, and suggest what comes next.

Lofi Cities is live on YouTube: watch the stream.

Every city has a billboard for rent, with a made-up local ad on it until a business takes it. Put your business on one

What's new on Lofi Cities

Cities

All cities on Lofi Cities

How the music works

Every track is composed on the spot with the Web Audio API: a chord progression, a drum groove, a bass line and often a melody, finished with tape wobble and vinyl crackle. Everything is synthesized in real time, with no samples, no recordings and no AI model, so the stream never runs out.

The Vibe panel picks the style: jazzhop (the default: a Rhodes, jazzy chords and a swung boom-bap beat at 68 to 88 BPM), piano (a sleepy felt piano with soft drums), ambient (slow warm pads with barely a beat, for sleep and deep focus), bossa (nylon guitar over a bossa nova groove), synth (80s city-pop synths), house (lofi deep house on a soft four-on-the-floor kick), guitar (a clean electric guitar, fingerpicked over a lazy beat), sad (slow minor chords and a lonely muted trumpet), neo-soul (a Wurlitzer on lush chords over lazy drums), liquid DnB (a soft rolling breakbeat under dreamy pads), dub (a one-drop riddim through a tape echo), chiptune (cozy 8-bit game music), medieval (a lute and a recorder over hand drums), Japanese (koto and shakuhachi), oud (oud, ney and darbuka in maqam scales), sitar (sitar and harmonium over a tanpura drone and tabla), spooky (a haunted music box and a theremin) or classical (lofi covers of Mozart and Beethoven, from Für Elise to Eine kleine Nachtmusik). A new style starts with the next track.

It also sets the mood, chill (slower and darker) or upbeat (faster and brighter), and plays the full band, no drums, or the chords only.

The Radio switch at the top of the Vibe panel (or O) tunes in to Lofi Cities Radio: one station where everyone hears the same song at the same moment, whichever city they watch, with a new style every hour and a count of who is listening. Nothing is streamed: every browser composes the same tracks from the clock, so tuning in late lands mid-song, like a radio. On the radio the band is still yours: full, no drums or chords only. In the last minute of each track, the listeners vote on the style of the next one.

Track titles are inspired by the city on screen, and a separate ambience layer mixes that city's sounds under the music. The Up next list shows the coming tracks so you can pick one to play right away, and music and city sounds each have their own volume slider. The city sounds mixer goes further, with a slider for each sound of the city: turn the rain up, the traffic off or the bells down, and the setting carries over to every city with that sound.

The Weather chip (W) brings rain, snow, autumn leaves or a clear night to any city, and the city sounds and track titles follow it: rain brings the sound of rain in, snow a hush of wind.

How the music on Lofi Cities is made

Keyboard shortcuts

← → 1–9 0
Switch city (while Jam is on, 1–8 play notes instead)
↑ ↓
Another look of the city, where it has one: Rome is the Trevi Fountain or the Colosseum, Tokyo is the street or a room above it (also the chips under its name)
/
All cities: on a globe (or, with Grid, as previews) with their local times, a search by city or country, and region chips
E
City guide: places to see, restaurants and things to do in the city on screen, each a link to Google Maps or OpenStreetMap (also the pill under its name)
C
City tour on or off: a new city every few minutes, or follow the night
K
Heart the city on screen as a favourite, or no longer (also the heart beside its name)
W
Weather: the city's own, rain, snow, autumn leaves or clear, on every city
B
Billboards: all, city ads only or off, on every city (also in Settings)
Space
Play or pause the music
N
Next track (not on the radio: everyone hears the same song there)
Q
Up next: see the coming tracks and pick one
A
City sounds mixer: a slider for each sound of the city
V
Vibe: the style, chill to upbeat, full band, no drums or chords only
O
Radio on or off: the same song for everyone tuned in, a new style every hour
J
Jam on or off: play along with the keys 1–8 (eight pads on a phone); every note fits the music and lands in time
T
Timers: focus (25/5 or 50/10, on repeat) and sleep (fade out and pause), with a task list and notes under them
G
Together: reactions and lanterns
L
Release a lantern over the city
Enter
Chat with everyone listening, in every city (in its text box, : and a name adds an emoji, such as :coffee:)
M
Mute
F
Fullscreen (or double-click the scene)
P
Mini player: the scene, the music and your focus timer in a small window over your other apps
H
Hide or show the interface
S
Save the current frame as a 1080p PNG
U
Share the city on screen: copy its link, or post it on X, WhatsApp, Telegram or Reddit
?
Open or close this panel

Questions

What is Lofi Cities?

A free website at loficities.com that shows animated pixel-art city nights (Paris, Tokyo, New York, London, Rio de Janeiro, Istanbul, Hong Kong, Sydney, San Francisco, Hamburg, Amsterdam, Dubai, Madrid, Rome, Prague, Munich, Vancouver, Seoul, Bangkok, Cape Town and Singapore) with endless lofi music composed live in your browser, plus each city's ambient sounds.

Is Lofi Cities free?

Yes. It runs entirely in your browser, with no download, no account needed and no pop-ups. Signing in with Google is optional, for keeping your city passport and settings on every device.

Where does the music come from?

It is generated in your browser while you listen. Chords, drums, bass and melody are synthesized with the Web Audio API, without samples, recordings or an AI model, so every track is new and the music never runs out. The Vibe button (or V) picks the style (jazzhop, lofi piano, ambient, bossa nova, synth city pop, lofi house, chill guitar, sad lofi, neo-soul, liquid drum and bass, dub, chiptune, medieval lofi, Japanese lofi, oud, sitar, spooky Halloween lofi or classical lofi with Mozart and Beethoven), makes it chill or upbeat, and plays the full band, no drums, or the chords only.

Is Lofi Cities made with AI?

Yes, the code is. Every city is a program that paints its scene pixel by pixel, and that program is written with AI coding agents, directed by Safa Elmali and checked against the real landmark's proportions. So the art is not drawn by hand, and it is not made by an image or video generator either: the weather, the lights and the people are part of the same code, and the previews and video loops are frames of it. The music is not AI-generated: rules written in code compose it in your browser and the Web Audio API plays it, without recordings or a trained model. The one AI model that runs while you use the site translates chat messages. How it all gets built and checked, with a real example: loficities.com/how-its-made/

Why doesn't the music start right away?

Browsers block sound until you interact with a page. Click, tap or press any key and the music starts; the play button pauses and resumes it.

Can I use it as a background for studying or working?

That is what it is made for. Press F for fullscreen and H to hide the interface, or P for the mini player, a small window that stays on top of your other apps on a computer. In Chrome and Edge it holds the scene with play and pause, the previous and next city, the track and your focus timer, which it can start, pause and resume; other browsers that support picture-in-picture float the scene alone. The controls also fade out on their own when you stop moving the mouse.

Can it switch cities by itself?

Yes. The Tour chip next to the city picker (or the C key) moves on to the next city every 5, 10, 15 or 30 minutes, or follows the night: it shows whichever city is closest to 1 am local time, moving west from Sydney to San Francisco and Vancouver as the hours pass. Cities on the same clock, like Paris, Hamburg and Amsterdam, take turns.

Can I keep a list of my favourite cities?

Yes. Tap the heart beside the city's name (or press K) and the city is a favourite; tap it again to take it off. The Favourites chip in the city picker shows only them, and Favourites only in the Tour chip's menu has the city tour go through your favourites alone, every few minutes or following the night, once you have two or more. Your favourites stay in your browser, and if you sign in with Google they follow you to every device.

Can I change the weather or the season?

Yes. The Weather chip next to the Tour chip (or the W key) brings light drizzle, rain, thunderstorms, snow, falling autumn leaves or a clear night to any city, or goes back to the weather the city was drawn with: winter snow in New York, autumn in London and Hamburg, spring blossom in Tokyo and Sydney. The city sounds follow it, with soft rain for drizzle and heavier rain with distant thunder for storms. Storm light is disabled when your device prefers reduced motion, and your pick stays for the next visit.

How many people are listening right now?

The glowing pill under the city name shows it, for example "23 here now · 5 in Tokyo · 480 today · 12,345 all time": people with Lofi Cities open right now, how many of them are on your city, browsers that came by today, since midnight where you are, and every browser that has come by since the launch. When nobody else is on, it shows the rest ("480 here today · 12,345 all time"). The city picker (/) shows how many people are in each city right now. You can say hello to the people on your city too: pick a heart, note, star or moon with the Together button in the player (or G), then tap the scene to float it up from that spot on everyone's screen there, or release a paper lantern (L) that rises over the city for about a minute, in the same place for everyone, including people who arrive while it is in the air. If you would rather watch the city on your own, Settings (the gear in the player) hides the reactions and lanterns. The Chat button beside Together (or Enter) lets you talk with everyone listening, in one chat for every city: short messages of up to 80 characters, without links, under a random two-word name such as "sleepy fox" that stays the same for your browser (signed in, you can pick a name of your own instead, which shows with a ✓ and nobody else can take), with the city you are watching beside it (tap someone else's city to go there), and its header shows how many other people have the chat open right now ("3 in chat", or "no one in chat"). The smiley button beside the text box adds emoji, and so does typing a colon and a name, such as :coffee: for a cup of coffee. The small smiley beside a message puts one of six emoji under it (❤️ 😂 👍 🔥 ✨ 😢), with how many people did; tap one to add yours or take it back, and hover over it (or press and hold on a phone) to see who. Messages written in another language show in your browser's language, with "original" beside them to see what was written (they are translated by Cloudflare Workers AI, which does not train on them). Without an account, a random id in your browser's local storage (not a cookie) makes your tabs count as one person, the server forgets it about 25 hours after your last visit, and other people only ever see your two-word name (with a short tag after it when someone else in the chat has the same one). The all-time count is a single number: your browser notes once that it was counted, and the server keeps no list of who. Your page also tells it when your day began, so "today" starts at your midnight, and that is forgotten when you leave. Besides that it keeps the lanterns still in the air and the chat's last 100 messages, each with the city it was sent from, its translations and the emoji people put under it, for 24 hours at most, and the names signed-in people picked, until they change them or delete their account. You can hide anyone's messages on your screen; when a few people hide the same person, their messages go for everyone, their picked name goes back to the random one, and they can't chat for an hour.

Is there a Pomodoro or sleep timer?

Yes. Press T or the clock button. The focus timer runs 25 minutes of focus and 5 of break (or 50 and 10) on repeat, with a soft chime at each break and a bell to call you back. The sleep timer fades the music and city sounds out after 15 to 90 minutes, then pauses. Under the timers there is a short task list to tick off (up to 12 tasks) and a notepad for whatever comes to mind while you work. They stay in your browser, or in your account if you sign in, until you clear them.

Can I use Lofi Cities as a stream background in OBS?

Yes. Add a Browser source set to 1920×1080 with a city page's address followed by ?obs, for example https://loficities.com/tokyo/?obs. The interface stays hidden and the music starts on its own; tick Control audio via OBS to bring it into your mix. Interact with the source to switch city with the arrow keys, skip a track with N, change the weather with W or hide the billboards with B, or add &weather=snow (drizzle, rain, thunderstorm, leaves or clear) or &nobillboard to the address.

Does it work on phones and tablets?

Yes. In portrait orientation every city's landmark and billboard stay in view, you can drag the scene sideways to look around it, and swiping past its end switches city. All controls work with touch.

Does it work offline?

Yes. Open it once while online and it keeps working without a connection, every city and the music included, since both are generated in your browser. You can also install it as an app with your browser's Install or Add to Home Screen option (on iPhone and iPad: Share, then Add to Home Screen).

Can I save a scene as a wallpaper?

Yes. The save button in the player (the down arrow) saves the current frame as a 1080p PNG, and S does the same with a keyboard.

Can my business appear in Lofi Cities?

Yes. Every city has a billboard for rent, where your café, shop, studio or brand can be drawn in pixel art. Fill in the short form at tally.so/r/rj7bY5 to get in touch.

Who made Lofi Cities?

Lofi Cities is made by Safa Elmali, with AI coding agents writing the code (see "Is Lofi Cities made with AI?"). You can support it on Buy Me a Coffee using the coffee link at the top right.

Can I request a new city?

Yes. Request a city, under the city picker's globe or at the end of its grid, opens Buy Me a Coffee at https://buymeacoffee.com/safaelmali: buy a coffee and name the city in your message. Add the name you'd like to be thanked by, and when the city arrives, What's new thanks you by that name beside it; leave it out to stay anonymous. You can also suggest one to Lofi Cities on X at https://x.com/loficitiesapp (the Follow on X link at the top right of the site). New cities are added over time: Hong Kong, Sydney, San Francisco, Hamburg and Amsterdam joined the first six, then Dubai, Madrid, Rome, Prague and Munich, then Vancouver, Seoul, Bangkok, Cape Town and Singapore.

Can Lofi Cities tell me when a new city arrives?

Yes, if you ask it to. Turn on New city alerts in Settings (the gear in the player) and your browser shows a notification when a new city arrives, and nothing else; tap it to go to the city. Your browser asks for your permission first, and the site never asks on its own when a page opens. It works in Chrome, Edge, Firefox and Safari on computers and Android. On iPhone and iPad, add Lofi Cities to your Home Screen first (Share, then Add to Home Screen; iOS 16.4 or later) and turn it on there. No account is needed: the server keeps only the address and keys your browser's push service gives it to send to, nothing about you, and turning the alerts off deletes them.

Can I buy the city videos?

Yes. They come on Gumroad in collections of 16 to 21 cities, four so far, or all 56 cities in one purchase with the Everything bundle, through the Get video loops link or the save menu. Each video is one four-minute loop of a city, exported frame by frame from the same code that draws it on this site (code written with AI assistance), as a 1920×1080 MP4 at 60 fps, without audio. Personal use and video or livestream backgrounds, including monetized content, are allowed with the Lofi Cities credit specified on the product page. The music and city sounds you hear on this site are not included in the downloads. The website stays free.

Can I keep my passport and settings on another device?

Yes, if you sign in with Google: the person icon at the top right, or Account in Settings (the gear in the player). Your stamps and listening time from every device add up, your settings (style, vibe, weather, volumes, the city sounds mixer, billboards, favourite cities and the rest) and the tasks and notes under the timers follow the last change you made on any of them, and the chat shows you under the same name on each: your random two-word one, or a name you pick in Settings, under Account (Chat name: 3 to 16 letters or digits, nobody else's, a new one once a day). Signing out keeps a copy on the device, and Delete account in Settings removes everything the account keeps. Signed in, you are also on the leaderboards (the trophy in the player) under your chat name: the cities stamped in your passport, and your time listened, day streak, time in each city and chat messages, counted from signing in, this week and all time; Hide me there takes you off them. Signing in is optional: without it, everything stays in your browser as before.

Does Lofi Cities use cookies?

Only if you sign in. Signing in with Google is optional and sets one cookie for live.loficities.com, kept for half a year, with your Google account number and your email, so the site can show which account you use. The account keeps your passport (seconds listened per city), your settings, the tasks and notes you write under the timers and the random id the chat knows you by, never your email, and nothing of it is shared but the chat name you pick, if you pick one, which everyone in the chat sees, and your places on the leaderboards (your chat name, the number of stamps in your passport, and since signing in your time listened, day streak, time in each city and number of chat messages, unless you hide them); Delete account in Settings removes it. Without signing in there are no cookies. Anonymous usage statistics, such as which cities are viewed, are collected without cookies, and browsers that send Do Not Track are left out of them (the live count still counts the tab, anonymously). Your settings (such as the last city, volumes and vibe), your tasks and notes and anonymous random ids for the statistics and the live count are kept in your browser's local storage instead. If you turn on New city alerts, the server keeps your browser's push address and keys, nothing that says who you are, until you turn them off.

San Francisco city guide

Picked by Lofi Cities in October 2026.

Places open in

Places to see in San Francisco

  • Golden Gate Bridge Presidio

    The orange suspension bridge across the mouth of the bay, opened in 1937. Walk out on the east footway, or watch the fog pour past its towers from Fort Point below.

  • Alcatraz Island San Francisco Bay

    The old federal prison on its rock in the bay, with a cellhouse audio tour told by former guards and inmates. Ferries leave from Pier 33; book ahead.

  • Lombard Street Russian Hill

    One block of brick road that zigzags down eight hairpin bends between flowerbeds. Walk down the steps beside it, then look back up from Leavenworth Street.

  • Golden Gate Park Richmond and Sunset

    Three miles of meadows, lakes and woods running out to the ocean. Start at the Music Concourse, between the de Young museum and the Japanese Tea Garden.

  • Painted Ladies Alamo Square

    A row of painted Victorian houses on Steiner Street with the downtown towers behind. Sit on the grass in Alamo Square Park across the road to see them whole.

Where to eat in San Francisco

  • Swan Oyster Depot Polk Gulch

    A family-run fish counter on Polk Street since 1912, with a queue outside and stools at a marble bar. Order oysters, crab salad and clam chowder.

  • Tadich Grill Financial District

    California's oldest restaurant, founded in 1849, with white-jacketed waiters and wooden booths. Order the cioppino, the city's own seafood stew.

  • La Taqueria Mission District

    A Mission taqueria open since 1973, where the burritos come without rice. Ask for yours dorado style, crisped on the grill, with carnitas.

  • Zuni Café Hayes Valley

    A light-filled corner café on Market Street since 1979. The roast chicken for two with bread salad comes from the brick oven; order it as you sit down.

  • Tartine Bakery Mission District

    The bakery on Guerrero Street that has drawn morning queues since 2002. Get the morning bun, sticky with caramel and orange, and a croissant.

Things to do in San Francisco

  • Ride the Powell-Hyde cable car Union Square

    The line climbs Nob Hill and Russian Hill, then drops to the bay at Aquatic Park. Board at the turntable and stand on the outside step for the view.

  • Walk the Lands End Trail Outer Richmond

    A cliff path through cypress woods with the Golden Gate across the water. Start at the lookout and drop down to the ruins of the Sutro Baths.

  • Watch the bridge from Battery Spencer Marin Headlands

    An old gun battery on the Marin side that looks straight along the bridge to the city. Come late in the day, when the fog spills in under the deck.

  • Climb to the top of Mount Tamalpais Mill Valley

    The mountain north of the Gate looks over the whole bay. Drive up to the East Peak, then take the short, steep trail to the old fire lookout at the summit.

  • Shop the Ferry Plaza Farmers Market Embarcadero

    Growers fill the plaza around the Ferry Building, busiest on Saturday mornings. Graze the stalls, then eat looking out at the Bay Bridge.

Billboard for rent · San Francisco

Your business, in pixel art

Put your café, shop, studio or brand on the billboard in San Francisco: drawn in the same pixel-art style, and glowing in the scene while people study, work and unwind to the music.

Get in touch

A short form: your business, the city you want and how to reach you.