Space Viewport Studio

A self-contained procedural WebGL generator for a deep-space panorama, built to be cropped into three synchronized 480x480 videos for Lian Li TL LCD case fans. The canvas is three 480x480 fan-widths wide plus an adjustable gap between them, matching the physical spacing between fans in the case, so each fan samples a slightly different, correctly-offset slice of the same continuous scene rather than looking artificially seamless edge-to-edge. Themed after the Nostromo, the hauler ship from Alien (1979): cold, sparse starfields with occasional derelict-feeling debris drifting past, no glossy sci-fi flourishes.

Run

Open index.html directly in Chrome or Edge. No build step, web server, or internet connection is required.

Controls

• Star density / brightness / motion speed / near-star streak / blue tint - tune the look of the field.
• Fan gap - pixel spacing between the three 480x480 fan crops, matching the physical gap between fans in the case. The canvas resizes live to 3x480 + 2xgap.
• Reverse direction, tiny twinkle, scripted flybys, planet horizon - toggles for playback behavior. Planet horizon shows a huge, mostly-offscreen planet whose curved limb peeks up across the full width, with a bright backlit sun grazing its edge. It stays at constant size and drifts continuously in the same direction as the stars, completing one pass per loop.
• Seek slider - scrub to any point in the loop; it pauses playback and shows the current time.
• Timeline buttons - jump straight to a scripted event (see below).
• Fan guides - overlay showing where the 1440x480 canvas splits into the three 480x480 fan crops.

Export

Choose a loop duration up to 180 seconds and click Record 3 fan videos. This crops the live canvas into its three 480x480 fan regions (honoring the current Fan gap spacing) and records/downloads them as three separate, frame-synced video files - one per Lian Li TL LCD fan.

The recorder asks the browser for MP4 (H.264) first and only falls back to WebM if the browser can't encode MP4 directly. Whichever it picks, the downloaded filenames say so: space-viewport-fan1/2/3-<seconds>s-480x480.mp4 or ...webm. Chrome and Edge on Windows can usually record MP4 directly; if you end up with .webm files and L-Connect wants MP4, convert with ffmpeg:

ffmpeg -i space-viewport-fan1-180s-480x480.webm -c:v libx264 -pix_fmt yuv420p space-viewport-fan1-180s-480x480.mp4

(repeat for fan2 and fan3). -pix_fmt yuv420p maximizes compatibility with hardware/embedded players like the fan controller.

The scripted three-minute timeline contains:

• 0:34 - small asteroid
• 1:27 - distant shuttle
• 2:23 - larger asteroid

Star movement, twinkle, and scripted events are all deterministic and return to the same state at the loop boundary, so the recorded video loops seamlessly.

Project structure

• index.html - layout and controls
• js/shaders.js - GLSL (starfield, asteroids, shuttle)
• js/renderer.js - WebGL setup and draw loop
• js/app.js - UI wiring, timing/seek logic, layout, and the MP4/WebM recorder
• css/main.css - styling

See CLAUDE.md for the full project brief and conventions.

Credits

• Asteroid texture: Asteroid from FreePNGimg.com