WikiWall

Turn your idle screen into a window to the world.

WikiWall pulls random articles from Wikipedia and displays them as beautiful full-screen wallpapers — a striking image, the article title, and a two-line description. No ads, no noise, no subscriptions. Just something genuinely worth looking at.

---

Why

Most smart TVs go idle and either blank the screen or throw up a screensaver you've seen a thousand times. Fire TV shows ad banners. Apple TV shows Aerial. They're fine — but they don't teach you anything.

WikiWall replaces that with something interesting. Every 30 seconds you get a new image: a mountain range, a historical monument, an obscure species, an architectural wonder, a moment in history. The kind of thing you glance at while walking past and end up reading.

Perfect for:

• 🖥️ Smart TVs and Fire TVs on idle
• 📺 Living room ambient displays
• 🏢 Office lobby and waiting room screens
• 🖥️ Second monitors you're not actively using
• 🍓 Raspberry Pi displays
• 💻 Laptop screensavers

---

Live demo

wikiwall.2dapps.com — open it on any screen and it works immediately. No install, no account.

---

Quick start

WikiWall runs as a Cloudflare Worker — you'll need Wrangler to run it locally or deploy it.

Run locally:

npx wrangler dev

Then open http://localhost:8787 on any browser — including the browser on your smart TV if it's on the same network.

Deploy to Cloudflare Workers for a permanent public URL:

npx wrangler deploy

---

Batch logic

WikiWall cycles through wallpapers in batches. Here's how the timing works:

Unit	Duration
1 wallpaper	30 seconds
1 loop (10 wallpapers)	5 minutes
1 batch (5 loops)	25 minutes
After 25 minutes	Fresh batch loads seamlessly

Each batch replays 5 times before rotating. You'll recognise the same images across a sitting — and come back an hour later to a completely fresh set.

A background cache of 20 articles is always pre-fetched, so batch swaps are instant with no loading screen.

---

Customisation

All key values are constants at the top of the script block in index.html:

const BATCH_SIZE      = 10;     // wallpapers per batch
const CACHE_SIZE      = 20;     // pre-fetched backup count
const LOOPS_PER_BATCH = 5;      // how many times each batch replays
const SLIDE_DURATION  = 30_000; // ms per wallpaper — set to 5000 for testing

---

How it works under the hood

WikiWall is a Cloudflare Worker serving a static HTML page with a small API endpoint.

Architecture

Browser → GET /api/batch?count=N (same-origin)
              ↓
         Cloudflare Worker (_worker.js)
              ↓
         Wikipedia REST API × waves of 10
         (filtered, transformed, returned as JSON)
              ↓
         Browser displays slides

The Worker (_worker.js)

The Worker owns all the heavy lifting:

• Wave fetching — hits en.wikipedia.org/api/rest_v1/page/random/summary in parallel waves of 10, with a 300ms pause between waves to stay polite
• Quality filter — only keeps articles where the original image is at least 1280×720 (good for 14" MacBook and up). Low-res thumbnails, portraits, and diagrams are discarded
• NSFW filter — scans title, description, and extract against a keyword blocklist covering graphic medical content, violence, and explicit material
• Transform — rewrites the thumbnail URL to request a 1920px-wide version for crisp display, trims the extract to two sentences
• User-Agent — sends a proper WikiWall/1.0 identifier to Wikipedia as required by Wikimedia policy (browsers can't set this header client-side)

All of this runs server-side — the browser makes one request and gets back a clean array of display-ready slides.

The client (index.html)

The client is intentionally thin:

• Calls /api/batch?count=30 once on startup — gets 30 articles back, uses 10 immediately and caches 20
• On each batch swap, takes 10 from the local cache (instant) and fires a /api/batch?count=10 in the background to refill
• Two background layers (#bg-a, #bg-b) crossfade between slides with a 1.6s CSS transition
• A requestAnimationFrame loop drives the gold progress bar

Why a Worker instead of calling Wikipedia directly

Direct browser requests to Wikipedia trigger CORS preflights that fail inconsistently across origins. Running the fetch server-side eliminates CORS entirely, and means User-Agent and rate-limit behaviour are under our control rather than the browser's.

---

License

PolyForm Noncommercial 1.0.0 — free to use, modify, and share for any non-commercial purpose. Commercial use is not permitted.

© Dani Akash (https://github.com/DaniAkash)