
Arwes – Futuristic Sci-Fi / Cyberpunk Graphical User Interface Framework - keiferski
https://arwes.dev
======
longnguyen
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](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.

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

~~~
longnguyen
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](https://photos.app.goo.gl/iTyFKrZtVDiBrNJx7)

------
Andrew_nenakhov
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.

~~~
vanderZwan
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.

~~~
Andrew_nenakhov
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

~~~
pmlnr
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.

~~~
Andrew_nenakhov
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.

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

------
neilpanchal
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](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.

~~~
resu_nimda
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.

~~~
jjcm
"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.

~~~
ckozlowski
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

------
motohagiography
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.

~~~
breakfastduck
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é...

------
dvaun
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/](https://augmented-ui.com/)

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

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

~~~
solstice
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...](https://www.reddit.com/r/Games/comments/9h30rn/why_you_should_play_freespace_2_review/)

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

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

------
cocktailpeanuts
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.

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

------
njsubedi
The author of the project seems to have built his personal website with this
framework, and it looks perfect!
[https://romelperez.com/projects](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!

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

[https://romelperez.com/talks/javascript-
animations](https://romelperez.com/talks/javascript-animations)

Pretty neat.

------
rco8786
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](https://www.youtube.com/watch?v=UHbQmqmmIFk)

~~~
xyzzy_plugh
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.

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

------
dusted
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.

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

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

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

------
omarhaneef
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.

~~~
anthk
>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.

------
hd4
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).

~~~
wissio
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.

------
UI_at_80x24
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.

~~~
ocdtrekkie
> 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.

~~~
inetknght
> _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.

~~~
filleduchaos
> 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.

~~~
inetknght
> 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.

------
ivanceras
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](https://github.com/ivanceras/futureostech)

------
miki123211
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.

~~~
robin_reala
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.

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

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

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

~~~
runawaybottle
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.

~~~
bufferoverflow
It's slow. That alone is extremely annoying.

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

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

~~~
gleapsite2
> 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](https://github.com/arwes/arwes/issues/46)

~~~
52-6F-62
> _" I like to write the technical docs...so I’d be happy to help with that
> too"_

That guy just met an angel.

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

------
crooked-v
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.

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

------
jtolmar
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.

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

[http://csszengarden.com/](http://csszengarden.com/)

~~~
m4tthumphrey
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/](http://www.csszengarden.com/202/)

------
jmnicolas
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.

~~~
rpdillon
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?

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

------
dgellow
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!

~~~
atarian
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.

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

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

~~~
anaganisk
Sure, hire him and get it done

------
somishere
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).

------
anthk
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.

------
cordite
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.

------
nirav72
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.

------
breakfastduck
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!

------
indigochill
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.

~~~
sarosh
You probably have an entry for *.dev; use scutil --dns Details at:
[https://superuser.com/questions/1413402/i-cant-visit-
website...](https://superuser.com/questions/1413402/i-cant-visit-websites-
that-have-dev-domain)

~~~
indigochill
Ah, you got it. Cheers!

------
wiradikusuma
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.

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

------
troughway
2advanced making a come back!

------
brachika
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.

------
miguelmota
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!

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

[https://youtu.be/qFsd4xJKLEQ?t=702](https://youtu.be/qFsd4xJKLEQ?t=702)

Very cool!

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

------
rkagerer
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.

------
vich
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!

------
TeeMassive
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.

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

------
Winterflow3r
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!

------
ForOldHack
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.

------
rglover
Now we're talking! Love the sound effects.

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

------
williamtwild
Reminds me of Ingress. Very well done.

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

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

~~~
flanbiscuit
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.

~~~
Animats
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.

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

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

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

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

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

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

------
tambourine_man
This looks great.

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

------
rizpanjwani
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?

------
sagebird
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...)

~~~
outworlder
How is the PLTR IPO going?

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

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

------
abraxas
I sense Sid Meier's Alpha Centauri vibes

------
m-p-3
It feels quite smooth, that is impressive.

------
ChrisMarshallNY
This is great! Thanks for sharing it!

------
renewiltord
Haha, very entertainingly done!

------
whoisnnamdi
Love this, thanks for sharing!!

------
ceedan
Man this gives me some feels

------
r0b05
I love this! That is all.

------
elchin
This is just so cool!

------
haloblue
Amazing. Thank you.

------
shuringai
too bad it's abandonware

------
sneaksnacks
Bravo

------
endlessvoid94
I love it

------
xwdv
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.

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

