NEON CITY RAIN
Sebuah kota synthwave berukuran 192×108 piksel yang membangun dirinya sendiri. Gedung, jendela neon, dan hujan digambar ulang oleh kode setiap kali halaman ini dimuat — dibingkai di sini seperti jendela kecil menuju malam kota yang tak pernah berhenti.
Dibangun dari angka acak, bukan gambar
Tidak ada satu pun gedung dalam Neon City Rain yang digambar tangan. Setiap siluet, jendela, dan lampu neon lahir dari fungsi acak berbenih (seeded random) yang berjalan langsung di kanvas — hasilnya adalah skyline tiga lapis yang berbaur dengan kabut ungu kota malam.
Hujan jatuh dengan kecepatan dan sudut yang sedikit berbeda pada setiap tetes, papan reklame berkedip mengikuti gelombang sinus yang tidak sinkron satu sama lain, dan seorang pejalan kaki dengan payung menyusuri trotoar tanpa akhir. Semua berjalan pada resolusi asli 192×108 piksel, ditampilkan tajam tanpa penghalusan agar karakter pikselnya tetap terasa — walau bingkainya kini duduk di atas halaman terang.
Suara ambiennya pun bukan berkas audio — melainkan disusun langsung oleh Web Audio API: derau hujan yang disaring, pad synth yang melayang, dan sesekali blip neon acak dari tangga nada pentatonik.
- Resolusi render
- 192 × 108 px
- Skala tampil
- maks. 960 × 540 px
- Lapisan gedung
- Jauh · Tengah · Dekat
- Palet neon
- 6 warna
- Mesin audio
- Web Audio API
- Aset eksternal
- Tidak ada
- Rendering
- Canvas 2D, per frame
- Berkas
- Satu file HTML
Empat lapis digambar ulang tiap frame
Urutan gambar ini menentukan kedalaman: yang digambar lebih dulu jatuh ke latar belakang, yang belakangan menutupi dan memberi jarak.
Gradien & bintang
Langit malam digambar sebagai gradien ungu-hitam, ditaburi bintang yang berkedip lewat gelombang sinus dan bulan dengan glow radial lembut.
Tiga lapis gedung
Setiap lapis punya seed acak sendiri — gedung jauh lebih redup dan kecil, gedung dekat lebih gelap dan menjulang, menciptakan paralaks kedalaman.
Reklame & pantulan
Papan neon berkedip tak beraturan, pantulannya membias di aspal basah, dan seorang pejalan kaki ber-payung melintas perlahan di trotoar.
Hujan & scanline
90 tetes hujan bergerak independen, ditutup scanline tipis dan vignette radial agar seluruh adegan terasa seperti tayangan monitor CRT tua.
Detail kecil yang membentuk suasana
Skyline Prosedural
Tiga lapis gedung dengan seed berbeda menghasilkan kota yang tak pernah tersusun sama persis dua kali.
Ambience Synthwave
Pad synth, derau hujan tersaring, dan blip neon acak — semua disintesis langsung di peramban.
Kaca & Pantulan
Scanline halus dan vignette radial memberi nuansa monitor CRT tua yang menonton kota lewat hujan.
Pejalan Kaki
Satu siluet ber-payung melintasi trotoar tanpa akhir, memberi skala manusia pada kota raksasa.
Satu loop, banyak tempat menaruhnya
Karena tidak membutuhkan aset eksternal, loop ini ringan disematkan di mana saja layar dan peramban tersedia.
Latar layar & wallpaper
Jalankan di monitor kedua atau layar idle sebagai pemandangan kota yang terus hidup tanpa mengulang persis.
Overlay siaran langsung
Tempatkan di sudut layar saat streaming musik lo-fi atau sesi coding malam untuk menambah suasana.
Hero section situs portofolio
Ganti gambar statis dengan adegan hidup yang menunjukkan keterampilan Canvas & Web Audio langsung ke pengunjung.
Instalasi & papan layar
Cocok untuk layar pajangan di ruang pamer atau etalase karena berjalan otomatis dan tak butuh interaksi.
Satu file, siap ditaruh di proyek lain
Seluruh loop — kanvas, animasi, dan suara — hidup dalam satu berkas HTML tanpa dependensi build. Salin markup di bawah untuk menyematkannya sebagai iframe di situsmu.