Show HN: React95 – A React components library recreating the look of Windows 95
github.comAnother great resource to create web experiences that look like old versions of Windows is 98.css by Jordan Scales: https://jdan.github.io/98.css/
With it, you don't need to use React to get decent results, see?
I collect niche Operating System CSS!
- [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs.
- [Office 97 clipart in svg format](https://archive.org/details/mso97clipart)
- [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
- [7.css](https://khang-nd.github.io/7.css/)
- [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI
- [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)
- [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/)
- DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme
- [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library
That one is better. These fonts need work. They were true type without subpixel rendering, hinting, anti aliasing, etc, but at size 32, they weren't just bigger boxes. The thing I used on https://bootstra386.com/ is more faithful. In fact, it's written in the HTML of the time.
Also they weren't using off-black greys back then. EGA-16, web-216 or bust. Greys exist, but not those. https://www1.udel.edu/cookbook/web/webcolor/webcolors.html
I readily admit I'm taking some pixeliberties with it. :) The font's because of me, and the purple title bar, but I think I grabbed those grays from 98.css. I might change them to values in my own color lookup table.
...God DAMN dude, don't bury the lede! You made this? http://kristopolous.github.io/BOOTSTRA.386/demo.html This is gorgeous!
It has bugs. I need to go back and fix it.
Your actual Easter egg is really solid. You got lots of small details right on about that one.
Oh good lord. I may have just found the next redesign for my website. That blows this completely out of the water.
I'll be doing a v.5 eventually and fix up v.4 - looking like August.
This isn't a bootstrap "theme". It's more of a fork, the code goes through significant changes but maintains compatibility.
It's used in weird places, like on Gentoo for April fools 2015 : https://jappie.me/website-launch.html (images go through a number of filters to emulate ega-16 color reduction).
Pretty funny to see this as one of my most successful projects. Most people think I'm terrible at front end design.
I want it to be good enough that I'm genuinely tricked by it.
React isn’t really for showing a static page of elements. It shines when you have a UI tree of many views and sub views and various menus and windows.
I don’t think you need React but this page isn’t demonstrating that you don’t need it.
> https://jdan.github.io/98.css/
Subpixel antialiasing (I think) turns the text on that site green.
I used this library as part of a major redesign for my personal website (https://hat.fo), and thought that others might get a kick out of it. Fun little components library :-)
Nice work! The most surprising part for me was that your websites says you are 20 years old – so I gotta ask, what was the motivation?
I'm 39, born in 1983, so I have serious nostalgia around Windows 95. I was 12 when it came out, my parents bought a Dell when it was new and those years were very formative for me. I assumed that nostalgia would be the only driver to do this... But you weren't born until ~8 years after it was released. I'm genuinely curious (and impressed!)
Can't speak for them, but I'm 25 and have a massive amount of nostalgia for windows 2000, for the weird reason that the first computer I ever got free-reign over was a give-away machine from the IT department from my mother's job at the time. Maybe around 2007-8? I'd have to bet it's something like that for GP too!
Same for me. I'm 22, and Windows XP makes me nostalgic. It was the computer I was able to play Flash / web games on when I was 8-12.
+1, came here to ask this same question. Interestingly, even though I started with DOS and Windows 3.1, I have no nostalgia whatsoever for the latter. I often very much miss the simplicity of DOS and still enjoy the aesthetics of DOS programs, but not so with Win 3.1.
Looking back, Win95-2000 was indeed an excellent UI. Looks as though ReactOS has recently moved away from having that look as its default, though: https://reactos.org/gallery/
Well, for some context, I had a website prior to this that was pretty bare-bones - the whole thing was basically just a terminal prompt. Realized pretty quickly that was a terrible idea for mobile & general UX, so I wanted to stick with something that still felt ... retro, and that integrated well with the web stack (React/Next.js, Tailwind CSS, Vercel) that I've been using at work. I'm also a huge retro hardware enthusiast, so finding this library checked every box.
Also some nostalgia from that time! My dad was an early adopter of technology (as part of his work - he was head of R&D for a large corporation), so he'd bring home all sorts of cool computers that would be handed down to me. First laptop I ever remember using (when I was 5 or so?) was a ThinkPad (before Lenovo ruined the brand) running Windows XP. I was raised fending for myself in SMF / phpBB forums & IRC chatrooms, so I still hold an appreciation for the times pre-iPhone :P
Not the person you’re asking, but I’m 22 and personally I just love the pixelated OS aesthetic
I love pixel art, and Windows 95 looks so cute!
We must also not forget the most relevant add-on for the Windows 95 UI: https://en.wikipedia.org/wiki/Blue_screen_of_death#/media/Fi...
BTW, it is quite enjoyable how the linked Wikipedia article illustrates the evolution of BSOD into the polished, polite and careful error screen of current Windows. "We're always getting everything ready for you" vs "Dude, your data is surely gone; maybe get a different job? Error code for your brain: BFF9B3D4".
I still prefer the brutality, though. Like a bucket of cold water.
I thought that was odd, since I’m much younger and they were formative for me too. Then I realized I’m 36 xD
Anyway, I think it’s probably something like how the brutalist architecture was all built before I was born, but it’s still something I can appreciate now.
... there's a VM on here?! (Start menu > Programs > Doom Linux) That got a real belly laugh out of me. Looks like https://github.com/copy/v86?
Awesome work! The whole aesthetic is well done.
Thanks! Yep - I wrote a custom React component wrapping v86 (see: https://github.com/hatf0/hat.fo-next/blob/master/components/... - needs some cleanup). The most shocking part is that Doom runs shockingly well through it, too. Looking into getting networking integrated with v86 too via Tailscale.
This is an awesome library, thank you for sharing! :)
Just for future reference, Show HNs are for things you've made yourself, so while your website could be a Show HN, this would be a regular submission. More details here: https://news.ycombinator.com/showhn.html
Nice linux in there, I run vim and edited a file there. Cool.
What a treat! I enjoyed the little easter eggs.
Where do I find COMMAND.COM?
great taste in music @hatf0
It was a decent list until I saw Jesus is King
https://react95.github.io/React95/
The uncanny valley comes to mind. It resembles Windows 95, but the fonts and spacing feel wrong.
I think it's pretty dang close. I wonder how much of where it's not quite there is modern font rendering.
It's literally the wrong front. The font here looks like Arial, but the Windows 95 font was something else. I'm pretty sure it was one of those fonts that starts with MS.
IIRC it was MS Sans Serif, which was pretty dang similar to Arial but with wider glyphs and looser spacing. Not much room for design flourish with 10x12 pixels.
Huh - looking at screenshots, you're right. The spacing is wrong and the glyphs are narrow, as per the sibling comment. TIL.
It's close enough for web crimes, though.
Not to be confused with ReactOS, the OS that not only recreates the look but also the functionality of Windows NT.
I have to ask, does anyone actually use ReactOS outside of tinkering with it in a VM? That project was always fascinating to me because of how herculean the task was (basically reverse engineering Windows).
You can set the gradient to the same colors (that dark purple hue) of w95 from left to right in the title bar and choose the Classic theme and it's pretty close.
Great stuff! Keep it up and perhaps you could build a whole operating system. You could call it… ReactOS ;)
There's another repo on GitHub that does the same. If the number of stars is of any significance, they have more. See: https://react95.io/ or https://github.com/react95-io/React95
Does anyone have a link to the HIG for Windows 95? I learned a lot from reading the HIG for later versions of Windows, but I don't remember seeing anything for the older versions.
This looks fun! Someone tells a serious use case please haha
This is sick - been thinking about adding 'themes' to a project and would love to offer this. Will have a play.
Crazy to think OP wasn’t even born when Win95 was used. Congrats on the job!
For a moment I hoped this was about forking ReactOS to be more 95-ish.
That's really fun, but to be sufficiently poe-faced for HN, it does maybe highlight some of the issues that cause people to grouse about web apps vs native apps (not that many apps are truly native these days). The set of controls apps use has changed over time and some of the old "power user" controls just aren't there anymore. I think this is maybe part of what people get at when they express a preference for native UI. Classic desktop OS widget toolkits like ComCtl32, Cocoa, Swing, JavaFX, Qt etc were built up over very long periods of time and thus have a lot of very powerful controls and subtle behaviors that helped you be productive.
In contrast, HTML5 has an absolute poverty of UI controls. The web community ended up settling on React + "design systems" to try and patch their way out of this, but because theming and widget toolkits get blended together in this approach the widgets are constantly being reinvented and end up half baked compared to desktop UI frameworks, which separate theming from widget behavior and thus get way more investment in the core feature set.
This shows up in a lot of subtle ways, and a few not so subtle ways. For example there are some controls common in Win95 apps that are conspicuously missing here:
• Virtualized list view with resizable/movable headers. There doesn't seem to be a list view control at all, in fact. The control they call list is actually a menu!
• Yet there's no menu bar, and the menu ("list") doesn't seem to be a real context menu. Right click an item in the tree view and you get the browser context menu, which is useless.
• There's no tree table view.
• The range control doesn't have notches or the ability to see the value you're sliding.
etc. And of course you can forget about all the little features Win95 widgets had like proper keyboard support (try using the up/down arrows in the tree view, it doesn't work).
Now obviously this is just a fun hobby project. It's not meant to be an actual widget toolkit competitive with Windows 95, so the criticism above isn't "real" criticism, it's just a springboard for a bit of technical observation: it's 2023! Why does the web still not have a UI framework competitive with an OS that came out nearly 30 years ago? If you wanted to make a Win95 theme for Qt or JavaFX then it would be quite easy and you would actually be able make apps that were competitive with Win95 apps in terms of UI features. But the React+DOM approach can't manage that because the effort required to flesh out the widgets is split between a thousand design systems. That seems wrong and is part of why web UI feels kinda dumbed down compared to what we once had.