Interactive DOS Experience

The screen is black with green text, and line by line a boot screen types itself out: ERIK-DOS v6.22, a memory test, MSCDEX.EXE and MOUSE.SYS, until the C:\ERIK> prompt appears. Scanlines, a dark edge, a glow around the letters and a slight flicker turn it into an old monitor. It is all plain CSS: a repeating gradient for the scanlines, a radial gradient for the edge, a double text-shadow for the glow and an animation that switches the opacity between 98 and 100 per cent every 0.15 seconds. The whole demo is one PHP file without a framework, with plain JavaScript and GSAP 3.12.5 served from the site's own folder.

The commands are DIR, CD, TYPE, CLS, VER and HELP. They work on a simulated file system: a JavaScript object with folders and files, each with a size and a date. DIR shows the contents in the old column layout, down to "524,288 bytes free". C:\ERIK holds README.TXT and ABOUT.TXT with a short description of Erik, CAROUSEL.EXE and the folders PHOTOS and SYSTEM. SYSTEM holds a CONFIG.SYS with lines such as DOS=HIGH,UMB and FILES=40. TYPE on a JPG gives "[Binary file - cannot display]", TYPE on CAROUSEL.EXE "Access denied - executable file".

There are jokes too. FORMAT C: answers "Nice try.", DELTREE "Nee." and EXIT "There is no escape." Type ls, pwd or cat and you are pointed to the DOS command: "This isn't Linux, friend. Try DIR." Anything else gives "Bad command or file name."

CAROUSEL.EXE, or RUN CAROUSEL, starts the transition. First come a few loading lines and a progress bar of sixteen blocks. Then the terminal text disappears and 120 separate characters (█ ▓ ▒ ░) are scattered across the screen. A GSAP timeline sends them flying apart in 1.5 seconds, with random rotations around three axes, while they change from green to the site's light blue. In the next 1.5 seconds they pull towards the centre and shrink to nothing. Meanwhile the background goes from black to dark blue and the scanlines fade out.

The carousel is a ring of ten photos in CSS 3D. Each photo sits 36 degrees further round, with its pivot 500 pixels back and a perspective of 2,000 pixels. GSAP turns the ring a full circle in eight seconds. Dragging with mouse or finger turns it half a degree per pixel; let go and it starts turning by itself again. Hover over a photo and the others become half transparent. The photos are sample images from picsum.photos.

In the bottom-left corner a small C:\> _ blinks. A click plays the transition in reverse: the photos fly off, the blocks turn green again, the background goes black and the CRT effects return. The earlier output is still in the terminal and you can start the carousel again. That round trip needed two fixes. The drag listeners on window are now cleaned up on every visit with an AbortController; before, four were left behind per visit. And stale GSAP inline styles are cleared, so the text panel and the return button stay visible on a second visit.