Retro Desktop

About this style

Graphical desktops reached most personal computers in the mid-1990s, and Microsoft's Windows 95, released in 1995, introduced the taskbar and Start menu that many systems echoed. The look came from grey chrome with bevels lit from the upper left, dark blue title bars, 32 × 32 pixel icons in a 16-color palette and instant, unanimated redraws. Busy work was shown with hourglass cursors, block progress bars and small animations such as paper flying between folders. Designers revive the style today in games, portfolio sites and nostalgic interfaces.

Make a 10-second 1990s desktop sequence: icons and a taskbar appear, a folder window zooms open, twelve files copy with a progress dialog, and the menu opens a notepad with a short message.

<inputs>
If I don't give you something, use the default and don't ask.
- System: Tilework 97 (fictional), by Pelican Systems; the menu button reads Go.
- Folder: Holiday Photos, twelve files beach_01.bmp to beach_12.bmp, 300 KB each (3,600 KB in all), copied to Backup (D:).
- Notepad file: backup.txt, reading "Backup done. 12 photos, 3,600 KB. See you next summer."
- Clock: 3:47 PM.
- Length: 10 seconds.
</inputs>

<direction>
- The screen: a 1760×990 desktop at x 80–1840, y 45–1035 inside a 2px dark edge on a charcoal #161616 surround, like a monitor's black border. Every UI pixel is a 2×2 block of stage pixels (a 2× scale), so 1px lines are 2px. Coordinates below are stage pixels.
- Palette: desktop teal #1C7C7A; chrome grey #C3C3C3; bevels white #FFFFFF, light #E3E3E3, shadow #818181 and dark #0A0A0A; title bars #0B2A6E → #2F6DB5 left to right (inactive #808080 → #B5B5B5); selection navy #0B2A6E with white text; text black. Icons use the classic 16-color VGA set.
- Type: "Pixelify Sans" 400 and 600 at 22px for all UI text, title bars in 600 white.
- Chrome: windows are grey panels with a two-step bevel (outer white top-left and #0A0A0A bottom-right, inner #E3E3E3 and #818181), each step 2px; a 40px title bar with a 32px icon, the title, and three 32×28 bevelled caption buttons with pixel glyphs; a menu bar (File, Edit, View, Help); inset status bars. A button presses by swapping to an inset bevel and shifting its label 2px down and right. Square corners, no shadows.
- Taskbar: a 56px grey bar along the bottom of the screen with a white top line: the Go button at left (bevelled, a small tile mark in teal and orange, "Go" in 600), a button for each open window (inset when active), and an inset tray at right with a speaker icon and the clock.
- Icons: 32×32 pixel grids defined in code (each pixel 2×2, so 64px on stage) with dithered shading: Workstation (a beige monitor on a box), Holiday Photos (a yellow folder with a landscape sheet peeking out), Backup (D:) (a drive with a green light), Notepad (a spiral pad) and Bin (a wire basket), in a column down the left with white labels beneath. A selected icon takes a 50% navy checker and a dotted focus rectangle around its label. The twelve photo files show 32×32 thumbnails (sun, sea, sand, a palm), varied by seed.
- Cursor: a pixel arrow (black outline, white fill, 22×36 stage px) moving on gently curved paths over 0.4–0.7s on cubic-bezier(0.45, 0, 0.2, 1); an hourglass while busy, its sand stepping through four drawings a second.
- Opening a window: six dotted outline rectangles expand from the icon to the window's rectangle in 0.24s, then the window appears whole at once.
- Copy dialog (760×300, centered on the screen): the title "Copying..."; two folder icons with a sheet of paper flying in an arc between them (four drawings, one arc per file); the current file name, such as beach_07.bmp; "From 'Holiday Photos' to 'Backup (D:)'"; an inset progress bar 680×36 filling with navy blocks (20px wide, 4px gaps) in whole blocks; "7 of 12 files, 2,100 of 3,600 KB"; a Cancel button. Twelve files at 0.3s each; the bar, the file name and both counts always agree.
- The menu: a 320×470 panel popping up from the Go button, with a vertical navy banner down its left edge reading Tilework 97 from bottom to top in 600 white, 26px; items with 32px icons: Programs ▸, Documents ▸, Settings ▸, Find ▸, Help, Run..., Shut Down...; the hovered item fills navy; Programs opens a submenu (Notepad, Paint Box, Calculator, Card Table).
- UI changes are instant, as on the real thing: windows, menus and dialogs appear and vanish within one frame. Only the cursor, the zoom outlines, the paper and the progress move.
- Premium: pixel-exact bevels lit from the upper left, real 32×32 icons, instant redraws and a copy dialog whose numbers add up. Cheap: rounded modern windows with soft drop shadows, smooth fades and emoji icons.
- Banned: real operating system names or logos, a four-color flag mark, rounded corners, drop shadows, fades or scaling on windows, anti-aliased icons, emoji, gradients other than the title bars, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.5s: the teal desktop; the taskbar appears; the icons appear down the left one by one, 70ms apart.
- 0.5–1.2s: the cursor glides to Holiday Photos and double-clicks; the icon selects.
- 1.2–1.5s: the zoom outlines; the Holiday Photos window (900×560 at x 380, y 150) opens with twelve files in two rows of six and a status bar reading "12 object(s), 3,600 KB".
- 1.5–2.3s: the cursor drags a dotted rubber band over all twelve; they turn navy.
- 2.3–2.9s: it drags them, as dotted ghost outlines, onto the Backup (D:) icon; the drive highlights; drop.
- 2.9–6.6s: the copy dialog appears and the cursor turns to an hourglass; files copy at 0.3s each from 3.0s, reaching 12 of 12 and 3,600 KB at 6.6s.
- 6.6–6.8s: the dialog closes and the arrow returns.
- 6.8–7.4s: the cursor clicks Go: the button presses in, the menu pops up, Programs is hovered and its submenu opens.
- 7.4–7.8s: it clicks Notepad; the menus close.
- 7.8–8.2s: the zoom outlines; backup.txt opens in Notepad (720×360 at x 1020, y 430) showing the message, with a text caret after it.
- 8.2–8.6s: the cursor glides to rest on the empty desktop at lower left.
- 8.6–10.0s: hold: Notepad active in front, Holiday Photos inactive behind it, three taskbar buttons and 3:47 PM; only the caret blinks, once a second.
For other lengths, change the copy time per file; keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: HTML/CSS. Absolutely positioned elements for windows, menus, dialog and taskbar, with bevels built from hard borders or blur-free inset box-shadows, shown, hidden and positioned from seek. Draw the icons, thumbnails, cursor, hourglass and paper into small canvases once at load and display them with image-rendering: pixelated.
- The cursor path, the selection, the copy count and every window's state are functions of t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check bevels are lit from the upper left on every control, every icon is crisp pixel art at 2×, windows appear in one frame with no fades, the copy numbers agree at every step and end at 12 of 12 and 3,600 KB, the menu lines up with the Go button, and the 6s frame shows the copy dialog near the end of its run. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…