Arwes – Futuristic Sci-Fi / Cyberpunk Graphical User Interface Framework | Hacker News Reader

Arwes – Futuristic Sci-Fi / Cyberpunk Graphical User Interface Framework

arwes.dev

1,326 pointskeiferski225 comments

Glad to see this posted on Hacker News. I used this for our internal tool and the first time I showed it, almost the whole company were in awe. I made a kind of public version here if you're interested: https://scan-viewer.vercel.app/scans/1

Edit: Guess I should explain a bit more about this tool. Our main product is a handheld scanner that can take an individual’s body measurements while they are fully clothed. You take a 360° body scan and get a few point clouds back. This tool is mostly for debugging 3D reconstruction issues.

Edit 2: You should open this in a desktop browser. In mobile view some widgets are not showing.

I'm getting "An unexpected error has occurred." after a short loading screen. Let me know if you need more info!

I had to enable webgl for it to not error

I love the TODO. Awesome loading spinner too, and graph!

Now, the frequencies used by the buttons are grating on me with headset on. I wonder if there are free sounds we could use for those. Or, if they could be procedurally generated, so as not to be the same sound every time.

I want to use it all the time for everything, including desktop.

There's edex-ui for linux systems. (https://github.com/GitSquared/edex-ui)

I've not personally used it so I can't speak to how functional it actually is but it has a very similar feel to it.

I have to ask, but how does the scanner work - if i am clothed how does it reconstruct my underneath self?

Or is it actually penetrating the cloth?

BTW - great idea. It has to be the future of clothes shopping

Yeah the scanner has a radar sensor which can penetrate clothes. We used multiple sensors and developed a "morphing" algorithm to reconstruct the whole body accurately.

I'd love to learn more about the company and technology! Using radar is an interesting adaptation. Do you have a site?

Yes. Here is our website: https://bodidata.com

What's the elliptic, flat, angled disc near the kidney in the radar reconstruction?

Ha good catch. I think it's due to an incorrect raw radar point there. This is the reason why we need this tool: to quickly find these issues. There is actually an AR version of this where we have a human-size 3D point cloud - much easier to debug [1]

[1]: https://photos.app.goo.gl/iTyFKrZtVDiBrNJx7

It seems to be a hidden ninja throwing disc, concealed to avoid airport detection.

Probably just an artifact. There's a 'radar raw' point in there, if you zoom in it is clearly associated with the disk.

What widgets are you using for the gauge and line graph? They integrate in well.

I use svg-gauge[1] and recharts[2]. I think any libs can do the job, you just need some css with cyan on black background

[1]: https://github.com/naikus/svg-gauge

[2]: https://recharts.org

This is cool man,UI and believe the scanner too What is the tech stack you used for UI and the scanner, just curious to understand any libraries out there, if you don't mind sharing any insight please?

If you're need mobile, then try cyber punk like this: https://animationcpu.com/

The feel of this interface is incredible. What's most interesting is that it evokes lots of memories from the games I played more than 20 years ago, and yet it is very distinct and doesn't copy any of them. Feels almost like something very familiar, but you can't quite grasp where you saw it.

This is incredible and I'll be following this project, and probably will do something with this framework, too.

This actually shows something interesting: that there is a coherent visual language for interfaces within the sci-fi subgenre of graphic design that just kind of appeared by implicit consensus. Which I guess can be said for many visual design trends - many of us can guess both when and for what purpose a product was designed based on its graphic design.

Btw, the Holo interface we saw in Android 4 was very influenced by this type of design. It was rather stylish, even if difficult to use consistently. But of course since then it was replaced by Material Design, starting with Android 5.0

God, I miss holo. It was so much nicer on the eyes. "Dark Mode" is... ugly. I'm glad it exists, but it's still uglier, than holo was.

Problem with Holo it was hard to follow this concept and create visually distinct apps. They would all be cold white and blue. Material design gives for more variability.

Some apps did change the accent color, but it was very non-trivial. Material design comes with tintable controls out of the box.

There were two Holo themes: dark and light. You'd pick one and extend it with the style of your brand. My only gripe with it was that there's no built-in mechanism to add shadows to things — you have to use pre-rendered shadows as bitmaps or generate them on the fly.

Anyway, "dark mode" is totally doable with Holo.

Of interest to me is that a lot of the graphics and sounds are based on '70's and '80's tech with the constraints of the circuits and display technology that were "state of the art" then, but then "futurized". Such that advanced tech now spends computer cycles simulating analog circuits, CRTs, etc, for the purpose of nostalgia...

You might like the book "Make It So" [0] about interface design language in science fiction.

[0] https://rosenfeldmedia.com/books/make-it-so/

Also that coherency is probably why many Star Trek reboots often look off

It definitely is for me. The LCARS interface is as much of a character of the story as the as the Enterprise herself (substitute with Voyager, Defiant, or São Paulo if you wish) and I’d go a step further of saying ship interfaces and systems inform us as much about the era of Star Trek one is watching as does the plot and narrative at any given moment to the discerning and attentive Trekkie :)

Strongly agreed. Which is why I was glad to see LCARS returning in Lower Decks, and the series is experimenting with tweaking the design a little to include some lessons in UI design learned over the past decades. Despite being animated comedy, I like it better than post-Enterprise installments, because it brings back the design language of TNG/DS9/VOY/ENT era.

ENT in particular was interesting, when I went back and re-watched it after finally getting to TNG/DS9/VOY (ENT being the first one I saw): They IMO successfully crossed real-world interfaces with TNG-era LCARS [0], creating something that looks vaguely like a tiled window manager, has a minimize function akin to the Windows start-bar (the icons on the right are minimized windows, used on rare occasion in the show for discreet messages), but with a whole bunch of hints of a natural progression into what it would become later in-universe.

[0] https://memory-alpha.fandom.com/wiki/Desktop_monitor?file=22...

It's also interesting how they included design hints of how this would evolve in to TOS era design later (the bulky monitor for example).

It's kind of ironic actually: we as viewers expect that kind of historical consistency, and complain about changes that feel disconnected, but in reality the history of interface design is full of such kind of radical shifts!

That sounds really interesting! Could you share some examples?

It's various minor things. Like PADDs being proper LCARS tablets with a bit more space for content, smaller bevel[0] and even portrait mode[1]. Or the experiments with circular (radial) elements on display, which arguably are now decorative, but still they fit in, so are a good starting point for further exploration.

Or, and I can't find a screenshot of it now, that one tiny joke that made me almost spit out my tea. A scene on the bridge, the captain talking to someone over the viewscreen; she makes a gesture to cut off audio, the tactical officer presses a button on his console, and a small icon of a crossed out speaker appears on said console. Immediately recognizable even for non-StarTrek audience, and still they made it fit the style.

[0] - https://www.yourprops.com/PADD-replica-movie-prop-Star-Trek-...

[1] - https://www.yourprops.com/Medical-PADD-replica-movie-prop-St..., though there was precedent in DS9, AFAIR.

Everything old is new again.

If you take away some of the animations and sound, this looks like around half of all the websites I visited in 1998. (Which mainly revolved around hacking and Quake.)

Flash websites used to look incredible. Completely unusable, and without accessibility, but they did look gorgeous.

The UI reminds me a bit of a mix between the EoC:IW2 UI (https://gamefabrique.com/games/independence-war-2-edge-of-ch...) and the ingress web UI. The fonts are doing a lot of the leg work for that.

Maybe a bit of EVE Online too.

I got instant and intense flashbacks of Deus Ex.

God I loved that game (IW2). Wasted so many hours just flying around with the physics in that game. I'm in total agreement, I get the same vibes.

Amen, my brother-in-space. It's the game that defined my childhood. The game that made me wish Star Citizen would be better managed.

If I had infinite time I would fuck around Elite Dangerous all day these days, with flight sticks and everything.

StarCraft

more like Homeworld / Outpost / Ascendancy / Invisible Inc / Mass effect 1 to me. But not direct ripoff any of them.

The visuals aren't don't evoke StarCraft to me, but the sounds 100% put me back in to playing StarCraft in high school.

It reminds me of the StarCraft briefing room: https://superiorrealities.files.wordpress.com/2014/04/screen...

Invisible Inc, the sounds are even on point.

I think it's more Freelancer

Syndicate (1993). https://youtu.be/ACVZ5b8wW14?t=5954

System Shock (1994). https://youtu.be/qKchS2GeimE?t=9

Maybe even more so the sequel Syndicate Wars

https://youtu.be/ECHmCzXMFb8

The sounds are very Starcraftian

It's also cool that this is simply a web app. If I want the full desktop experience, I can write the missing components myself (lol) and make this app fullscreen. Nice!

It feels very much like the Introversion games UI’s to me. Especially the hacking game (of which the name escapes me for a bit).

That would be Uplink.

https://www.introversion.co.uk/introversion/#games

Based on the positive responses here, I think I might be the only one who doesn't fancy decorations, whether it's sci-fi or in any form in user interface design - victorian ornamentation, steampunk brass, vaporware aesthetics, etc - they're all artistic endeavors - I think it's fun to explore these and even use them to achieve a particular objective, but I wonder how much of it influences serious designers whose responsibility is to produce functional, objective, straight forward UI that gets the job done. For example, SpaceX cockpit design and the amount of sci-fi influence with touchscreens vs. say F-15 Cockpit (https://news.ycombinator.com/item?id=23702560) which I personally consider as the epitome of interface design. Not directly comparing them, but comparing the underlying philosophy and approach towards UI.

It's not to say that aesthetics itself is a problem, IMO when aesthetics emerge automatically from solving a problem (F-15 philosophy) is far more beautiful, appealing and pleasing, than aesthetics that is forced by the designer's personal taste and then trying to solve the UI problems within that framework (biting on SpaceX again).

Amazing work nevertheless in terms of its artistic appeal.

You are not alone. This framework is a kind of neat idea if your top three priorities are all "man this looks cool". If you actually want to make anything usable, look elsewhere.

ETA: also, a web page should make sounds in exactly one situation, which is when I click the "play" button on a music track or a video.

ETA: also also, I clicked through to the author's personal blog, build with the framework, and scrolling thunks to a halt every time I go down to a new item, I guess while it's being dynamically loaded then animating into view. Barf.

It really depends on the context and the use cases. The F-15 cockpit is an extreme example of a very complex interface that needs to be highly performant under intense life-or-death conditions. Most UIs that people design, including this library, are not meant for anything remotely similar to those situations. A lot of times it's mostly for consuming content.

That video of the F-15 actually features a lot of overlay UI elements that are very similar to this project's sci-fi style. Did you lament that, or wonder if that functional uselessness was influencing the designers of the airplane? Or did it make for a better viewing experience than barebones labels with no animations?

I can't speak to the SpaceX cockpit and how well it performs the job it was intended to, do you know of any testimony from people who have used it? I have to believe that they would put function over form for something like that, but that doesn't mean that form has no place either, they are definitely aiming for the lofty goal of achieving both.

"Most UIs that people design, including this library, are not meant for anything remotely similar to those situations."

You would think that, but that isn't necessarily the case. I worked for a Naval intelligence contractor back in 2007, and I was surprised at the amount of times there were requests at the top to "make it look cooler". War rooms at the time tended to look exactly like the Hollywood depictions. Not because Hollywood got it right, but because generals saw the movies and said, "I want one that looks like that". Even in the most functional of situations, flashy looks sell hearts.

Without getting into specifics, this is absolutely the case.

There was one instance where, when the new ops center opened, getting the tour of it was the thing everyone wanted. The brass thankfully obliged. Over a period of weeks, small groups got to go over and the new center, with it's large blue display edge lighting, and electronically frosting glass. I'll never forget this bemused airman, pressing a button while a circle of us stood around in a half circle, giving a very Simpsons-esq "Oooooooooohh!" as the glass went transparent to opaque, and transparent again.

Was it necessary? Absolutely not. Was it cool? Hell yeah it was. =D

It wasn't my intent to say that people designing serious systems don't like flashy things. More just that a lot of UI designers and projects posted on HN are focused on lower-stakes applications that can accommodate more artistic license.

But, my question is, did that actually make the war rooms less functional? In what ways did Hollywood get it wrong that they copied? Even a war room is a very different application than literally flying a fighter jet, which is arguably the most intense and demanding control experience in existence.

There was a "behind the scenes" style documentary about QinetiQ and/or DERA (it was around the time DERA was split into QinetiQ and DSTL) where the engineers were shown analysing the 3D displays from the "Aliens" dropship sequence for inspiration.

Like this?

https://www.theverge.com/2017/9/19/16333376/us-navy-military...

Tesla’s have a touchscreen instead of analog controls, recently there was a case where a driver attempting to use the touchscreen wiper rate changer got in a collision and was deemed negligent.

Based on them taking arguably the single most important toggle in a car [1] and hiding it behind a touchscreen so that when you already are in shitty conditions and you can’t see, you have to take your entire focus off the road and navigate a touch screen interface, compared to every other car on the market where you can do it subconsciously while keeping your hands on the wheel... let’s just say I don’t think Elon’s companies care particularly much about creating interfaces that are easy and safe to use if it means sacrificing “aesthetic“.

https://www.businessinsider.in/thelife/news/german-court-rul...

[1] wipers and headlights are the 2 “I’m driving a massive hunk of steel at 80mph down the highway and I can’t see shit I need to fix this immediately” controls, and wipers are more likely to be needed at the spur of a moment, so I’d say it is the single most important toggle in a car and replacing it with navigating a touchscreen seems like it ought to be grounds for not street-certifying a car.

Tesla has very convenient wiper hardware button.

That button is the opposite of convenient. It only makes the wipers wipe once. There's no way to start/stop or change interval with it. Probably the worst design flaw of the car.

It wouldn't be a problem if the auto wipers worked, but Elon doesn't think they need a dedicated rain sensor because he believes neural nets can solve any problem just by looking at the autopilot cameras. So they don't work.

(I should note that it's still the best car I've ever driven by far)

Do you really think that changing wiper mode on Mercedes is much better than "touch screen"? It also awful to use and really hard to locate without looking at. I own both vehicles and they are about the same.

In emergency situation you can pres button as long as you want, a little bit weird but in reality very useful. Also pressing this button will open wiper settings and you can blindly pick a different mode.

Not like typical implementation in Mercedes.

I drive an '03 Mercedes and I can tell you that the wipers are absolutely intuitive -- just like almost every other car I've driven, from back before the automotive design industry collectively lost their minds. Touch screens have never belonged in a car, and they still don't.

I’m not particularly interested in whether Tesla is more or less convenient than whatever Mercedes is up to, what matters to me is that is is undeniably less convenient than the standard lever toggle that has been around since as long as I remember. In my 2004 4Runner I can go to any wiper configuration without taking my eyes off the road (or even thinking about it at all), I can do the same for head lights, radio, cruise control, A/C, traction control, transmission toggles, etc. To pay $$$ for a “modern” car that makes every one of those core operations more difficult is, to me, absurd.

I'm not an absolutist about physical controls vs. touchscreens. Of your examples, A/C and traction control are automatic enough that I don't fiddle with them during driving and the touchscreen works great. As for transmission, the Model 3 doesn't have one. Radio, headlights (brights), and cruise control have physical controls that work just fine.

The wiper controls are really my only complaint. It wouldn't even require hardware changes to fix, as they could add a gesture involving holding the button while moving the stalk or something like that; they just haven't bothered, presumably because they think everyone should just rely on the auto wipers.

> The wiper controls are really my only complaint.

Back to my original point: the wiper control is arguably (see above) the single most important important manually operated safety feature in a car (besides maybe the breaks). For them to have such poor design speaks to Elon’s ability to put function over form.

My understanding is that the button toggles enablement of the sensor-driven wiper mode. If this is correct, it means every Tesla driver is betting their life and the lives of those around them that for every instance of something on the windshield blocking their view, either the sensor will accurately respond to it, or they will be able to navigate the touchscreen to activate the manual override before needing to react to developing conditions on the road. Given the reliability of automotive grade sensors (I’m not the only one who has paid mechanics a lot of money to tell me the sensor was bad right?) and the difficulty of interacting with touch screens, that’s not a bet I’d be willing to take. Looking at the German case, I wish more people were unwilling to take that bet.

That button causes the wiper to wipe once, no matter what. No sensors involved. Yes you might have to keep hitting it but you aren't "betting anyone lives" on a sensor or UI.

Driver ended up crashing the car, that’s the result isn’t it.

I have no experience with the S but I can say that every Model 3 made has had light and wiper controls on the stalk.

Not sure, but it is hard to deny that Elon's personal taste in building everything "sexy" has something to do with it.

I think you're delving into the details and you're making valid points, I am mostly talking about the philosophy and approach in an abstract sense.

It's fine to use this library. Otherwise, the world would be a totally unremarkable place. If you consider the central point I was trying to make, to re-emphasize is that I wonder how much of influence do things like sci-fi aesthetics makes in designing serious products [1][2] (I suspect that it is widespread).

[1] https://images-na.ssl-images-amazon.com/images/I/61cGhQ0begL...

[2] https://miro.medium.com/max/800/1*eW4danopMOoMxEr5GBRZOA.png

I think it’s a somewhat orthogonal issue. I think you can approach the design of a serious interface with the F-15 philosophy while also incorporating aesthetic sensibilities. Yes, some people may end up designing serious interfaces that suffer from too much unnecessary chrome (I’ve heard of a lot of frustration with touchscreens in cars).

But I don’t think there is anything inherently wrong with sci-fi aesthetics influencing interface design. What arguments can actually be made against the functional effectiveness of that oscilloscope or the SpaceX cockpit?

The question is the other way around, the onus is on the designer that wants to add unnecessary decorations: What arguments can be made to support adding of unnecessary decorations?

I really like HN design philosophy articulated by @dang here: https://news.ycombinator.com/item?id=23199062

Quoting: > Move slowly and preserve things

Everything should be questioned ruthlessly and UI is not like fashion that needs to keep up with trends. Although, if we are designing a website for a music band, all bets are off :)

What arguments can be made to support adding of unnecessary decorations?

Because without them, the world would be a totally unremarkable place. :) I think there is a lot of value to the images of SpaceX astronauts in their sleek suits, and the general flair with which they go about things. It inspires and excites people, it sparks joy.

I get what you're saying though and I also appreciate the functional minimalist design of places like HN and Craigslist (I much preferred the original purely text GameFAQs forums vs. alternatives at the time that had a lot of crazy stuff going on). I'm not saying at all that form should step on function in serious UIs but I do think both are important and aesthetics should not be dismissed or lamented.

It is also fun to question aesthetic choices for example - children's iPad apps - why do they need to use "friendly" and "fun" fonts, pastel colors, excessively rounded corners, etc? Nothing in human psyche dictates that children should be exposed to this particular type of aesthetic. I can understand if they're physical products and sharp corners for example need to be blunted, but there is a lot of excessive decoration. Blue/pink color themes with boys and girls toys is a whole another can of worms. I don't think children have any sort of native affinity for soft and cuddly aesthetics - probably the opposite from the evolutionary standpoint and developing early survival instincts.

Lol, I am not saying to develop iPad apps for children that look like F-15 controls, but the society is full of aesthetic subjectivity, noise, prejudices, norms, etc. whatever you wanna call it. Some University's psychology department should study this.

Children have a very strong affinity for bright colors and visual language

There's no such thing as "unnecessary" in an absolute sense. The question is "unnnecessary" to who.

"Unnecessary" decorations are necessary if you want something to stand out. If you don't want your house to look like your neighbor's, you're going to make "unnecessary" changes to it. Paint rooms different colors. Use different furniture. All unnecessary changes... if you don't care about them.

You seem to adopt the somewhat naive functionalist/minimalist philosophy that you can find in early modernist thought (e.g. Loos in "Ornament and Crime" [0]).

What those thinkers missed is that beauty and aesthetics are a function too.

[0] https://en.wikipedia.org/wiki/Ornament_and_Crime

SpaceX touchscreen don’t work under acceleration.

F-15(or any other fighter) can be operated normally at -12G to +12G for important or critical functions.

Pretty stark contrast, oh, and Dragon LCD look so blurry and washed out for aviation display btw.

But hey, we can't criticize SpaceX UI because we're not astronauts and don't have first hand experience. That's the pushback you're going to get for saying anything against SpaceX's rampant disregard for basic aviation and space UI concepts. Just because Doug and Bob doesn't have problem with the UI/UX, doesn't mean that it isn't terrible.

Another example - the abort handle, instead of being painted with a hazard yellow/black stripes or some blaringly evident color scheme, it is painted matte black just like the rest of the dashboard.

Can you spot it in the center? https://cdn.shopify.com/s/files/1/0173/8204/7844/articles/IM...

You can easily mix it up with the handles for support on left and right side when its bumpy in the cockpit.

I can't see any defense to this. It is in a terrible place on the dashboard and on top of that it is painted black to hide it!

As a user, I want all my UI's to be just as elegant, purpose-driven and performant as whatever best of breed example you can think of (perhaps to the point where, like the controls of a cockpit, they feel like a natural extension of my body). Imagine if all Palm or Apple had strived for was "good enough".

The most enjoyable interfaces in games are often simple, functional and still match the theme. Yet many games go over the top with fancy artwork and god forbid time stealing animations. There is definitely a point in trying to stick to the setting with the UI, but it is a thin line.

It's important to note that most popular 'sci-fi/futuristic' styles aren't based on any perceptual studies so may be quite bad choices from an artistic viewpoint of the UI itself. In particular, blue text on a dark background requires much more effort to read than white on dark.

Most of the design choices for UIs in movies are made to ensure they fit the overall aesthetic of the movie, and not because they are good user interface design.

Precisely. Those choices (made for entertainment purposes) infiltrate into the general masses through insane popularity of movies --> into the designer's personal taste through exposure since childhood ---> then those designers get employed at various medical, industrial, military, etc. fields and they try to put aesthetics/taste before everything else ---> decision makers in these companies also love it because it appeals to their childhood influence and taste too ---> sub-optimal UI goes into production which influences more designers to follow the trend. We love shiny things.

This strawman is pretty tall and perhaps I am just getting old and grumpy :).

> In particular, blue text on a dark background requires much more effort to read than white on dark

Use green on dark, then. Or amber.

Amber on black is fairly good I think. At least compared to green or white.

Counterpoint: the Cirrus Vision Jet cockpit - https://i.ytimg.com/vi/8Gex47yq7K8/maxresdefault.jpg

Whether or not the design elements there can be considered 'decorations' is subjective. It is much cleaner, automation took over most 'boring' things which required a myriad of buttons on the F-15. Like engine startup, it's a single button. The F-18 already improves on that.

Or even an F-35. https://4.bp.blogspot.com/-oOmPM403VOo/XLiqWC0ubTI/AAAAAAAAB...

I could pretty much do the F-35 (assuming that's a real image) with this library, given some CSS and font tweaking. Only the animations would be different. And serious software can have animations if it helps enhance understanding.

I strongly agree.

My ideal for user interfaces would be something where the user can skin everything to look like they want it. For example, imagine the web browser version of winamp... a page has text, images, links, and that's it- the browser displays it according to your skin.

Isn’t this the entire point of CSS? And perhaps Semantic HTML as well?

No, CSS is for the website designer to design the page. The point is that every page should conform to the users preferences automatically.

Really dude?! Your taking the "Futuristic Sci-Fi / Cyberpunk Graphical User Interface Framework" seriously?

"I find running a k8s cluster on a raspberry pi to be inconvenient. I prefer a desktop or server class CPU if possible."

Love this stuff. I wonder what it's like for someone too young to remember the constraints that the design references.

Like the cyberpunk fast scrolling effect is a reference to 300baud terminals being dog slow, and the idea that text could zip in that fast implied something fast and powerful. The image loading screens are complex and fast, like a kind of arpeggio of the individual steps sped up. As though to say, "It's doing the thing, fast, powerful, and specific." It's like old xterm boot processes where by the time they finished, each step was confidence that things were right in the world. What I love about the whole retro cyberpunk aesthetic is it is essentially heroic, with anti-hero origins, and the symbology bundles up so much of what I hope the older generations of hackers are able to pass on.

That's an interesting point - I know I got a huge nostalgia blast looking at this. I also think it's awesome.

Do you think someone who never played video games with menus like this would feel the same? Or would it look outdated and cliché...

Beautifully written. I just finished rewatching Halt and Catch Fire. If you haven't watched it, I recommend for the C64 hype and revisiting of the digital revolution.

This reminds me of an older sequence of space games titled “FreeSpace” that were created by Volition. The interface components are very nice!

I might just use this for my blog...

Edit: An additional framework that may pair well with this is augmented-ui[0]. That received quite a bit of attention a year ago[1].

Putting these two together could make a pretty neat interface! I have another project (metareply.net) that I want to complete for a smaller community, Subreply[2], which might be a good candidate for this as well.

Thanks for sharing this!

[0]: https://augmented-ui.com/

[1]: https://news.ycombinator.com/item?id=20923792

[2]: https://subreply.com/

Right! Freespace 2 was great and is still being worked on by a dedicated community. Here's a reddit thread with a review and more info on it: https://www.reddit.com/r/Games/comments/9h30rn/why_you_shoul...

Absolutely seconded!

Try out the knossos [0] front end to install the FreeSpace Open mods. 4k support, up-ressed textures and one of the best single player campaigns ever! And there's a bunch of user created campaigns that rival AAA games [1][2]

[0] https://fsnebula.org/knossos/

[1] https://www.kotaku.com.au/2019/09/get-freespace-2-for-free-t...

[2] http://coin-drop.com/freespace-blue-planet-masterclass-video...

[Edit: you do need the commercial Freespace release to get the most of the mods. Get it from Good Old Games]

I actually used to lurk at hard-light for several years! It's a great community with very dedicated people :)

My father and I were huge fans of the Descent series and, naturally, took up FreeSpace when it came out. Out of most of the games I've played, FreeSpace has always had a unique draw to it.

If anyone happens to be reading this thread I definitely recommend picking it up on Good old Games[0] if you feel that you have the time to spare. It's best played with a joystick and is very immersive.

[0]: https://www.gog.com/

Cool! that's actually a reason to unpack my HOTAS. Freespace was kind of the last great space shooter of that era IMO.

the battlestar galactica mod of Freespace2 was phenomenol, and the first immersive space game I ever played

Oh wait is it complete?! I need to check that out.

Now this is what they mean when they say "Ideas are nothing, it's all about execution".

I admire that you actually went and built a full fledged framework for this. Most people don't go that far.

Just to clarify - I (link submitter) didn't make this. Just found it on the web (/r/cyberpunk, actually.)

The author of the project seems to have built his personal website with this framework, and it looks perfect! https://romelperez.com/projects

Like everyone else said, it's really one of the very few frameworks I wanted to build something on top of as soon as I saw it. Thanks for sharing!

Looks like you can even throw it on some reveal.js slides? Unless he did the slides himself.

https://romelperez.com/talks/javascript-animations

Pretty neat.

Yes, those guys were awesome!

This reminds me of 2advanced studios way back when. They built crazy futuristic flash GUIs like this.

Here's one from 2001: https://www.youtube.com/watch?v=UHbQmqmmIFk

Thank you for bringing up the name of the 2advanced studio! I tried a couple of years ago, but could not remember it. In 2003, their design[1] just blew my mind, they were way ahead of their time.

[1] https://www.youtube.com/watch?v=N-2sKZjawq4

This takes me back. This was a big motivation to learn flash and web development as a whole, and spurred a lot of deep interest in programming for me.

2advanced defined the whole generation of Flash productions done by interactive agencies. Every ambitious studio I knew admired 2advanced.

Looks beautiful. This is probably the first time I've seen a UI framework for web that made me want to actually do something _ANYTHING_ with it (short of using it for my own site, for idealistic reasons).

Some cyberpunk sci-fi online game... now I have to make one.

Yeah, I'm getting serious Uplink vibes here: https://en.wikipedia.org/wiki/Uplink_(video_game)

Gameplay video for anyone who wants to see what Uplink looks like: https://www.youtube.com/watch?v=Owa15O5OArU

Ha! I completely forgot I played that. But yes, this is what the framework reminds me of.

> This is probably the first time I've seen a UI framework for web that made me want to actually do something _ANYTHING_ with it

I felt the same way! I wonder if there are other frameworks out there that elicit this response.

No joke, if your boss is not technical, I bet you could get a raise if you started using this for internal tools.

I like that this is also called "futuristic".

This is the future if we projected it out in the 90s. (I think the popularity says something about the average age of HN users).

However, if we had projected the future in the 80s or 70s or 00s, we would see different interfaces.

Speaking of cyberpunk, I recommend the William Gibson short story Gernsback Continuum that explores this "projected future" concept in more detail.

>This is the future if we projected it out in the 90s.

I have to break some myths, but Mac OS9 in movies and MacOSX specially since Panther was THE dreamt interface from the 90's.

It was so sucessful that even Fluxbox nerds wrote OSX like themes. Even for FVWM!!!

Metallic themes were a thing in late 90's, among with the bloat and bling bling from E16. But OSX was a mix between art, skeumorphing and UNIX zealotism being built-in replacing the OS9 ahem... scrap.

The React version of Her would be a bit too minimalistic :)

Edit: I wanted to check if I was right and it's all voice, and found this playlist on Sci-fi UI:

https://www.youtube.com/watch?v=m7WtNgesVbQ&list=PLAT7Dwp-tD...

And in particular, the protagonist of that short story who is so happy he lives in his grim and grotty but real cyberpunk future, instead of the sterile, facile utopia imagined by the retro-futurism aesthetic.

It's an interesting idea! You can learn a lot about a decade by studying what they thought their future would look like. And in the 90s we were definitely thinking it would involve neon translucency.

A lot of the elements of 'the future' used are a lot older (and weirdly persistent!) - the notions that a 'computer' or some piece of gear outputs text slowly, makes noises while doing so and prints in a special font were themselves once real artifacts of what was then seen as futuristic technology.

I love how this channels Syndicate Wars. That game probably solidified the cyberpunk aesthetic better than any game before or after it, possibly with the exception of Shadowrun (or the upcoming cp2077).

This specifically reminded me of Syndicate Wars user interface. Partly its the sounds that make it, I guess. I applaud the author for an excellent interpretation.

wissio's comment here (sibling) is dead. I don't know why.

I really like the look of this. Kudos to the creator. It's legible, fast, and doesn't make my eyes bleed from the brightness. This is excellence in proper use of contrast.

I'm tempted to use this on all my sites.

Side note: I don't get any audio in Firefox. I had to load the page in Chromium to hear audio.

> Side note: I don't get any audio in Firefox. I had to load the page in Chromium to hear audio.

This sounds like a feature rather than a bug. Website UI should not make sounds.

> This sounds like a feature rather than a bug. Website UI should not make sounds.

While I usually agree, the sounds that it does make are not intrusive. They're only in response to user events (page loading/loaded, something was clicked), aren't stupid-loud (IMO), are very brief, and don't include any spoken words. Think of hearing button feedback in sci-fi videos.

For what it's worth, I'm also using Firefox 79 and the sounds _do_ work after telling NoScript to enable Media from the site. They're loaded as MP3s.

> the sounds that it does make are not intrusive

That's quite arguably false.

> Think of hearing button feedback in sci-fi videos.

Most people are in fact not actually in sci-fi videos, and are often in situations where they would not want their device to start beeping and clicking.

> That's quite arguably false.

Arguably indeed. It's an opinion.

> Most people are in fact not actually in sci-fi videos, and are often in situations where they would not want their device to start beeping and clicking.

If my device started beeping and clicking when I don't want to, then I would mute the sounds. Browsers have a mute feature which allows me to mute the browser separately from other apps.

My device even has a physical mute button. If I don't want my device to start beeping and clicking then I would either not browse some random location I found on the internet (because random locations on the internet are well known for starting sounds) or I would use the device's physical mute button.

> and doesn't make my eyes bleed from the brightness

Some of the frequencies used in the audio do make my ears bleed though. :\

I have audio in Firefox 79 / Win10.

Works fine for me in Firefox on OSX.

Works for me in Firefox Android.

worked flawlessly in firefox (80), with ublock and dns adblock enabled.

android Firefox (yeah, the new Firefox for Android) plays it flawless

This is so cool. I made a simplified version[0] of the frame component using only plain html,css,js

[0]: https://github.com/ivanceras/futureostech

Just FYI, played with this for a while with a screen reader, and it even seems mostly accessible. If it has issues, they seem to be fixable issues. I feared painting the whole UI with WebGL on canvas, which would kill accessibility completely, but fortunately we have none of that.

Of course, a screen reader doesn't notice the sci-fi style (except the sounds), but the framework seems usable.

Thanks for raising that. It’s all too easy to get bound up in the technical aspects of building a solution without thinking of the requirements of the people that will be using it.

I am legit trying to get permission to use this to build internal tools.

Honestly? Given how HORRIBLE most internal tools look like, something like this would be a massive improvement.

I want to sooooo much...

It might look fun for a couple of minutes, but it's extremely annoying for the real world use.

How so? On mobile swiping between pages felt very seamless and a well executed transition. That by itself is something most appy sites barely get right.

Still checking it out, but at first glance it’s obvious this person gets the details right.

It's slow. That alone is extremely annoying.

The high-pitched noise every time you click on a link will get old very fast.

The zeep zoop sound with practically every element interaction, for starters.

This seems to be abandoned in the middle of the alpha cycle of the very first release - https://github.com/arwes/arwes

> Since last year I have been delaying the development of the project due to personal reasons. I plan to resume it soon.

Posted 24 days ago by the author:

https://github.com/arwes/arwes/issues/46

> "I like to write the technical docs...so I’d be happy to help with that too"

That guy just met an angel.

I basically want this but in pure css. Highlight aesthetically pleasing!

This is nice-looking, but wow, those loading times are painful. There's also something weird going on in the transitions on the 'Play' page - seems like it's re-routing between selections.

I love the nostalgic feel to it. Can't quite put my finger on it, but just reminds of me late 90's gaming. Looking forward to play around with it!

Kind of reminds me of the UI for the Star Citizen website.

This is super fun! I wouldn't want to see it on a serious website, but for games and such it's a really nice toolkit.

Some minor suggestions:

- The table isn't animated. Bringing in the grid lines the same way that HRs appear to be (like in the project example) would make sense. Possibly cascading the cells like the text renderer.

- The sounds (which are excellent and super nostalgic btw) would be better with some variation. For example the author's portfolio site plays the same chirp every time you scroll a new project in, and sounds repetitive. Games will randomly pick from a set of similar sounds, which are often just the same sound at different pitches or different envelopes. That'd help here.

This makes me wish for a nextgen CSS Zen garden with modern layout, widgets, animation etc.

http://csszengarden.com/

Ahh, I always enjoyed the Starwars and movie theatre designs. I can't seem to find them on the site right now though..

Edit: Here is the movie theatre! [0]

[0] http://www.csszengarden.com/202/

That's awesome. Of course not for standard web interface, I would hate my bank to have something like this, but that would be perfect to create a text adventure or other immersive experiences!

You just reminded me of Citibank's virtual number UI. It had sound effects and would play an animation that would show you a temporary credit card number using a slot-machine-like animation. It was hilarious but I would always dread using it whenever I needed it.

Do you have a screenshot or video? That sounds nightmarish!

Man that App sucks. Still uses Flash so a PITA to make it working with modern browser security

For the love of God will someone think of the people that don't have fiber internet ?

The carelessness of most web devs is infuriating. Don't you care that a not insignificant portion of potential users / customers will just close your website after waiting a few seconds as nothing happens.

To the author that thinks he's making the world a better place with lines of code (written on his GitHub), then walk the walk and actually make it a better place for everybody.

Thank you.

The irony that tomorrow a technician is coming to install fiber internet to my home is not lost on me.

I'm confused - the code for the landing page is about 690k, with a 760k background image, and the code for the "Play" section is another 333k. Are those the sizes you are thinking of when you mention fiber internet? I've never had fiber internet and the site loaded very well for me. Is there something I missed?

That’s 20x smaller than a modern news website :/

My guess, it's a decade-or-two-old sentiment from when effects like this weren't really doable in JS/CSS and needed animated GIFs.

I'm sympathetic to this way of thinking but I'm not convinced this is a real instance of web bloat. I didn't measure files or anything, but I have a pretty terrible internet connection and didn't experience any discernible latency.

Don't give up the good fight but maybe spare this poor guy and point your righteous indignation at the truly deserving.

You must be fun at parties - I would enjoy your icebreaker on how to not make the world a better place.

Great. Now make it work without javascript and you'll have me sold.

Sure, hire him and get it done

Looks awesome(!) .. noted the select box doesn't style correctly in Firefox, but otherwise super slick. Definitely think it will be an interesting challenge to use this creatively / in a way that doesn't end up looking like every other use of it .. tho this comes from someone who actively notes thinly veiled css framework use and deducts 50% from an ongoing internalised competency / legitimacy monologue (for crimes towards homogeneity).

This reminds me of sucky CD-ROM interfaces for software/knowledge base given for free with magazines.

Cool at first, but annoyingly slow and distracting in the next interactions.

This really yanks at the human-to-computer latency. These transitions are incredibly long. Though the execution is delightful.

It's better than Deus Ex 2.

Thanks for sharing. This might be a good option for building a UI for a diy home automation project I'm currently tinkering with using a raspberry pi and 7 inch lcd touch display (official raspberry pi lcd). So far I've looked at Kivy and also JavaFX for the UI. But would prefer it being a web frontend. So might have look into this.

Absolutely fantastic. As a previous commented mentioned, it would be awesome to use this to build internal tools & dashboards.

I actually think it would go down well with management as it would appear 'futuristic' to those that are not tech savvy.

The fact it comes with sounds included is the cherry on the cake!

I may be bad at the internet, but how do people get *.dev domains to load in their browser? Those always break in Firefox/Chrome for me. I was under the impression Google had bought the TLD. I've mostly been able to ignore it, but now I'd like to see this but can't.

You probably have an entry for *.dev; use scutil --dns Details at: https://superuser.com/questions/1413402/i-cant-visit-website...

Ah, you got it. Cheers!

Works for me on chrome... try setting your DNS to 8.8.8.8?

Posts like this make me feel envy because it's not available in <<favorite-UI-framework-here>>. People smarter than me seriously need to separate design with framework and make combining them more like changing clothes.

I started just using bootstrap css in the index.html and class names in react. Much less headache (at least in POC stage)

This is pretty sweet. I would of have thought something like this needed to be built using canvas or WebGL but it looks like it's all JS and CSS. Will be using this for a side project!

Reminded me of the UI for the questionnaire on Spaceship Earth at Walt Disney World

https://youtu.be/qFsd4xJKLEQ?t=702

Very cool!

It's very similar to the UI from the game Frozen Synapse.

This feels like something that I used before or it was influenced by something that I know, but for the life of me I can't point the source/reference.

Maybe the familiarity is what makes this so good.

Amazing.

This is neat, although I hate how contemporary UI libraries or pages often miss basic features I had in my old favorites, such as being able to adjust splitters.

I used to play this online hacking game back in high school, I think it's called "Mother"? Very similar interface. Brought good memories :)

I love this. Not only does it look cool, it is actually good UX. I hope more apps would make more use of sounds to give more detailed notifications.

Wow! I really want to use this! Like some other commenters have said, I finally feel inspired to work on some of my website projects!

Now we're talking! Love the sound effects.

I just wonder who's idea this was, its brilliant, and if you make it a browser, I will pay money! Take my money please.

Absolutely love the design!... but... it's not a progressive option, which make it a big, bad nope for me.

Reminds me of Ingress. Very well done.

Why does the future now have a pale blue glow? We're past the pale blue glow of the CRT era.

This is influenced by the cyberpunk imagery from the 90s so it makes sense. It says "future" but the cyberpunk aesthetic is more of a Retrofuture aesthetic now.

Ah, what TVTropes calls "Zeerust".

In the mainstream, of course, we have the square corners / round corners cycle, and the grey/black/putty/chrome color cycle for appliances.

This is blade runner. I can finally have a blade runner interface of my SF dreams. Thank you

Very reminiscent of Neocron, my favourite game of all time. Anyone in HN population a fan?

Shame this is light on inputs - would be great if it included text boxes, checkboxes etc.

It's nice enough...but when you say GUI Framework I think of something like Qt.

This looks very much like INGRESS, and it seems no due credit is assigned.

To me the cyberpunk aesthetic has been and always will be geocities

Why does it history jack? That makes no sense for a style browser.

This looks great.

The use of React components gives a post-apocalyptic feel to it.

genuinely curious for people who want to use it for their own websites: this seems like a unique UI. Why/How would you use the same thing for your own project?

perfect for creating DOD dashboards to impress upper brass.

Add a sweeping crosshair reticle animation, tOp seCReT labels and a rotating bald eagle point cloud.

(I wish this comment was satire...)

How is the PLTR IPO going?

I wanna make my eleventy blog look like this. It’s so cool

I sense Sid Meier's Alpha Centauri vibes

I don't want to love this... But I do.

It feels quite smooth, that is impressive.

This is great! Thanks for sharing it!

Haha, very entertainingly done!

Love this, thanks for sharing!!

Man this gives me some feels

I love this! That is all.

This is just so cool!

Amazing. Thank you.

too bad it's abandonware

Bravo

I love it

2advanced making a come back!

This is great if you're building a web page as marketing for some sci-fi game or movie.

Don't use this for a real application. Real as in used for making real money.

Oh yeah. Let's ensure internal tools scream <HTML><TITLE>INTERNAL TOOL</TITLE></HTML>

why not?

Reply on news.ycombinator.com