Show HN: Lofi Cities – Pixel-art city nights alongside browser-generated lofi

Hacker News by 11 min read 58x views
Show HN: Lofi Cities – Pixel-art city nights alongside browser-generated lofi

Share Post

About Lofi Cities

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

There is nothing to install, no document and no pop-ups. It plant on computers, phones and tablets, and makes a calm backdrop for studying, operating or winding down.

Every city has a advertisement for rent, alongside a made-up local ad on it until a endeavor takes it. Put your endeavor on one

What's new

  • 27 Sep Lighter on phones and laptops: 120 Hz screens diagram the environment 60 times a second akin all another screen, snow and leaves disbursal small to draw, and switching cities quickly no longer piles up city sounds.
  • 27 Sep The "today" figure under the city name now starts at midnight anywhere you are and lone goes up through your day, alternatively of counting the final 24 hours.
  • 27 Sep More dependable updates: changing cities keeps operating during a new type is deployed, and interrupted offline updates keep the final complete copy.

Cities

  • Paris Rain on the attic window

    A painter's attic under the zinc roofs, rain on the opening and the Eiffel Tower sparkling far off.

  • Tokyo Neon rain by Tokyo Tower

    Neon signs, cherry blossoms and wet asphalt, alongside Tokyo Tower glowing and a train crossing the viaduct.

  • New York Snow complete Brooklyn Bridge

    A snowy winter night by the Brooklyn Bridge, alongside the Manhattan horizon throughout the East River.

  • London Fog on the Thames

    Fog and drizzle on the Thames, alongside Parliament, the London Eye and a Victorian pub on the South Bank.

  • Rio de Janeiro Copacabana summer night

    A terrace complete Copacabana, alongside Christ the Redeemer, Sugarloaf and fireworks complete the bay.

  • Istanbul Bosphorus by night

    A rooftop tea storyline facing the historic peninsula, alongside ferries and gulls on the Bosphorus.

  • Hong Kong Victoria Harbour following dark

    A crowded Kowloon rooftop facing the Hong Kong Island skyline, alongside ferries, a red-sailed junk and a ray display on the harbour.

  • Sydney Jacaranda night on the harbour

    A harbourside park under a blooming jacaranda, looking throughout to the Opera House and the Harbour Bridge.

  • San Francisco Fog complete the Golden Gate

    Fog flowing through the Golden Gate, seen from a steep Russian Hill street alongside a cable car and painted Victorians.

  • Hamburg Harbour lights on the Elbe

    Wind-driven rain complete HafenCity, alongside the Elbphilharmonie, the Speicherstadt and receptacle cranes throughout the Elbe.

  • Amsterdam Bridge lights on the canal

    A mild fountain night on a canal quay, alongside the Westerkerk tower, gabled houses, a houseboat and a bulb-lit bridge.

How the music works

Every track is composed on the place alongside the Web Audio API: a chord progression, a drum groove, a bass row and frequently a melody, completed alongside strip wobble and vinyl crackle. Everything is synthesized in genuine time, alongside no samples or recordings, so the stream never runs out.

The Vibe panel picks the style: jazzhop (the default: a Rhodes, jazzy chords and a swung boom-bap attack at 68 to 88 BPM), keyboard (a sleepy felt keyboard alongside gentle drums), ambient (slow heated pads alongside barely a beat, for sleep and profound focus), bossa (nylon guitar complete a bossa nova groove), synth (80s city-pop synths), home (lofi profound home on a gentle four-on-the-floor kick), guitar (a spotless electric guitar, fingerpicked complete a lazy beat), sad (slow insignificant chords and a lonely muted trumpet) or medieval (a lute and a recorder complete hand drums). A new manner starts alongside the next track.

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

Track titles are inspired by the city on screen, and a distinct ambience tier mixes that city's appears under the music. The Up next catalog shows the coming tracks so you can choice one to perform correct away, and music and city appears all have their own quantity slider. The city appears mixer goes further, alongside a slider for all audio of the city: rotate the rain up, the traffic off or the bells down, and the environment carries complete to all city alongside that sound.

The Weather part (W) brings rain, snow, autumn leaves or a apparent night to any city, and the city appears and track titles prosecute it: rain brings the audio of rain in, snow a hush of wind.

Keyboard shortcuts

← → 1–9 0Switch city

/All cities: a preview of all alongside its local time, and a search

CCity tour on or off: a new city all few minutes, or prosecute the night

WWeather: the city's own, rain, snow, autumn leaves or clear, on all city

SpacePlay or intermission the music

NNext track

QUp next: see the coming tracks and choice one

ACity appears mixer: a slider for all audio of the city

VVibe: the style, chill to upbeat, complete band, no drums or chords only

TTimers: concentration (25/5 or 50/10, on repeat) and sleep (fade out and pause)

GTogether: reactions and lanterns

LRelease a lantern complete the city

MMute

FFullscreen (or double-click the scene)

PMini player: the environment floats in a small opening complete your another apps

HHide or display the interface

SSave the current example as a 1080p PNG

?Open or near this panel

Questions

What is Lofi Cities?

A liberated 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 and Amsterdam) alongside endless lofi music composed live in your browser, affirmative all city's ambient sounds.

Is Lofi Cities free?

Yes. It runs entirely in your browser, alongside no download, no document and no pop-ups.

Where does the music arrive from?

It is generated in your browser during you listen. Chords, drums, bass and melody are synthesized alongside the Web Audio API, without samples or recordings, so all track is new and the music never runs out. The Vibe clasp (or V) picks the manner (jazzhop, lofi piano, ambient, bossa nova, synth city pop, lofi house, chill guitar, sad lofi or medieval lofi), makes it chill or upbeat, and plays the complete band, no drums, or the chords only.

Why doesn't the music commencement correct away?

Browsers obstacle audio until you engage alongside a page. Click, tap or media any key and the music starts; the perform clasp pauses and resumes it.

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

That is what it is made for. Press F for fullscreen and H to conceal the interface, or P for the mini player: a picture-in-picture opening that keeps the environment floating complete your another apps (on a computer, in browsers that assistance it). The controls additionally diminish out on their own whenever you halt moving the mouse.

Can it toggle cities by itself?

Yes. The Tour part next to the city picker (or the C key) moves on to the next city all 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 as the hours pass. Cities on the identical clock, akin Paris, Hamburg and Amsterdam, obtain turns.

Can I alter the climate or the season?

Yes. The Weather part next to the Tour part (or the W key) brings rain, snow, falling autumn leaves or a apparent night to any city, or goes rear to the climate the city was drawn with: winter snow in New York, autumn in London and Hamburg, fountain blossom in Tokyo and Sydney. The city appears prosecute it, so rain brings the audio of rain in, and your choice stays for the next visit.

How many group are listening correct now?

The glowing pill under the city name shows it, for example "23 current now · 5 in Tokyo · 480 today": group alongside Lofi Cities open correct now, how many of them are on your city, and browsers that came by today, since midnight anywhere you are. When nobody alternatively is on, it shows the day solitary ("480 current today"), and it stays hidden if nobody alternatively came by today. You can say hello to the group on your city too: choice a heart, note, celebrity or moon alongside the Together clasp in the participant (or G), afterward tap the environment to drift it up from that place on everyone's display there, or publish a document lantern (L) that rises complete the city for concerning a minute, in the identical location for everyone, including group who attain during it is in the air. It is all anonymous, alongside no chat, names or accounts: a random id in your browser's local retention (not a cookie) makes your tabs figure as one individual and the server forgets it concerning 25 hours following your final visit. Your leaf additionally tells it whenever your day began, so "today" starts at your midnight, and that is forgotten whenever you leave. The lone another item it keeps is the lanterns motionless in the air.

Is there a Pomodoro or sleep timer?

Yes. Press T or the clock button. The concentration timer runs 25 minutes of concentration and 5 of interrupt (or 50 and 10) on repeat, alongside a gentle chime at all interrupt and a chime to call you back. The sleep timer fades the music and city appears out following 15 to 90 minutes, afterward pauses.

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

Yes. Add a Browser origin set to 1920×1080 alongside a city page's location 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 alongside the origin to toggle city alongside the arrow keys, skip a track alongside N or alter the climate alongside W, or add &weather=snow (rain, leaves or clear) to the address.

Does it activity on phones and tablets?

Yes. In picture inclination all city's landmark and advertisement remain in view, you can drag the environment sideways to appearance about it, and swiping former its end switches city. All controls activity alongside touch.

Does it activity offline?

Yes. Open it formerly during online and it keeps operating without a connection, all city and the music included, since the two are generated in your browser. You can additionally instal it as an app alongside your browser's Install or Add to Home Screen choice (on iPhone and iPad: Share, afterward Add to Home Screen).

Can I preserve a environment as a wallpaper?

Yes. The preserve clasp in the participant (the downward arrow) saves the current example as a 1080p PNG, and S does the identical alongside a keyboard.

Can my endeavor appear in Lofi Cities?

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

Who made Lofi Cities?

Lofi Cities is made by Safa Elmali. You can assistance it on Buy Me a Coffee using the coffee nexus at the top right.

Can I petition a new city?

Yes. Send your idea to Safa Elmali on X at https://x.com/SafaElmali (Request a city, at the end of the city picker, or the X nexus at the top correct of the site). New cities are added complete time: Hong Kong, Sydney, San Francisco, Hamburg and Amsterdam joined the archetypal six.

Can I buy the city videos?

Yes. Get the 11-city gathering on Gumroad through the Get video loops nexus or the preserve menu. Each AI-assisted video is a four-minute 1920×1080 MP4 iteration at 60 fps, without audio. Personal use and video or livestream backgrounds, including monetized content, are allowed alongside the Lofi Cities credit stated on the merchandise page. The music and city appears you comprehend on this location are not included in the downloads. The website stays free.

Does Lofi Cities use cookies?

No. There is no sign-in and no cookies. Anonymous use statistics, specified as which cities are viewed, are collected without cookies, and browsers that dispatch Do Not Track are remaining out of them (the live figure motionless counts the tab, anonymously). Your settings (such as the final city, volumes and vibe) and anonymous random ids for the data and the live figure are kept in your browser's local retention instead.

Other Article Hacker News
↑
Close Right Ads
Close Left Ads