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.
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'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.
Or is it actually penetrating the cloth?
BTW - great idea. It has to be the future of clothes shopping
This is incredible and I'll be following this project, and probably will do something with this framework, too.
Anyway, "dark mode" is totally doable with Holo.
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!
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.
 - https://www.yourprops.com/PADD-replica-movie-prop-Star-Trek-...
 - https://www.yourprops.com/Medical-PADD-replica-movie-prop-St..., though there was precedent in DS9, AFAIR.
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.)
Maybe a bit of EVE Online too.
If I had infinite time I would fuck around Elite Dangerous all day these days, with flight sticks and everything.
System Shock (1994). https://youtu.be/qKchS2GeimE?t=9
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.
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.
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.
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.
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
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.
Based on them taking arguably the single most important toggle in a car  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“.
 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.
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)
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.
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.
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.
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  (I suspect that it is widespread).
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?
I really like HN design philosophy articulated by @dang here: https://news.ycombinator.com/item?id=23199062
> 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 :)
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.
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.
"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" ).
What those thinkers missed is that beauty and aesthetics are a function too.
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.
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!
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.
This strawman is pretty tall and perhaps I am just getting old and grumpy :).
Use green on dark, then. Or amber.
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.
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.
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.
Do you think someone who never played video games with menus like this would feel the same? Or would it look outdated and cliché...
I might just use this for my blog...
Edit: An additional framework that may pair well with this is augmented-ui. That received quite a bit of attention a year ago.
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, which might be a good candidate for this as well.
Thanks for sharing this!
Try out the knossos  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 
[Edit: you do need the commercial Freespace release to get the most of the mods. Get it from Good Old Games]
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 if you feel that you have the time to spare. It's best played with a joystick and is very immersive.
I admire that you actually went and built a full fledged framework for this. Most people don't go that far.
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!
Here's one from 2001: https://www.youtube.com/watch?v=UHbQmqmmIFk
Some cyberpunk sci-fi online game... now I have to make one.
I felt the same way! I wonder if there are other frameworks out there that elicit this response.
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.
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.
Edit: I wanted to check if I was right and it's all voice, and found this playlist on Sci-fi UI:
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.
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.
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.
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.
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.
Some of the frequencies used in the audio do make my ears bleed though. :\
Of course, a screen reader doesn't notice the sci-fi style (except the sounds), but the framework seems usable.
Still checking it out, but at first glance it’s obvious this person gets the details right.
The high-pitched noise every time you click on a link will get old very fast.
Posted 24 days ago by the author:
That guy just met an angel.
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.
Edit: Here is the movie theatre! 
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.
The irony that tomorrow a technician is coming to install fiber internet to my home is not lost on me.
Don't give up the good fight but maybe spare this poor guy and point your righteous indignation at the truly deserving.
Cool at first, but annoyingly slow and distracting
in the next interactions.
It's better than Deus Ex 2.
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!
Maybe the familiarity is what makes this so good.
In the mainstream, of course, we have the square corners / round corners cycle, and the grey/black/putty/chrome color cycle for appliances.
The use of React components gives a post-apocalyptic feel to it.
Add a sweeping crosshair reticle animation, tOp seCReT labels and a rotating bald eagle point cloud.
(I wish this comment was satire...)
Don't use this for a real application. Real as in used for making real money.