Arwes: Futuristic Sci-Fi UI Web Framework

[x7ci]

I'm building my personal website[1] also inspired by FUI design systems. I don't think usability is an issue at all, at least with the design approach I've taken. They're just React components which you could easily feed real data. The visualizations and animations are more difficult to replicate.

[1] https://x7ci.engineer/

[mythz]

Very cool, reminds me of 2advanced.com - a very slick flash website from 2001 that now only exists in a museum.

https://www.webdesignmuseum.org/gallery/2advanced-studios-v3...

[unintendedcons]

Very cool, but distracting that the very first top left attention grabbing glyph is an unrelated company's logo https://polygon.technology/

[ssgodderidge]

Love the fade-in animations. Really awesome.

The only problem I have (on laptop) is the font combined with the text size (10pt) on the blog is a bit on the smaller side. I recommend bumping up the font of the body to at least 14pt to increase readability for most screens.

[drBonkers]

This is so sick. Blows Arwes out of the water.

[joshmarlow]

I love this.

Arwes is about 20% too over the top for me or I would really be tempted to build something in it.

But the style ofyour site is almost exactly what I want. Are you open sourcing your component library/styling by any chance? Also, what does 'FUI' mean in this context?

[krychu]

Very impressive, and works well on mobile (iOS). Congrats and thanks for sharing.

[muhammadusman]

wow, that is really cool! are you using a UI library or are these custom built?

[re-thc]

Maybe you can make a UI library out of it too!

[synthsec]

I really like this, thanks for sharing.

[airstrike]

this is beautiful, congrats and thank you for sharing

[lusus_naturae]

This is what early internet thought "the future" looks like for the web. I am wondering why there isn't design diversity (not using the sociological meaning of the word here) for forward-looking web technologies? Somehow the conversation typically centers around AR/VR or inserting crypto into everything. VisionOS is stereotypically "clean and modern". Web design in general seems so derivative and uninspired, which is strange given that a web page is the main point of interaction for most people.

[javier_e06]

The future looks there comes in dark aqua tones and chirping noises when information scrolls up and down. The effort reminds me of Star Treks LCARS https://www.thelcars.com where orange blue and purple are prominent and is all touch screen. The future can be very distracting.

[alisonatwork]

Windows 8 and Windows Mobile embraced this aesthetic, and I thought it the best mainstream UI we've gotten since the 32-bit era. Everything resolves back to a straight edge, because computer screens are largely square, not round. Every object has a bold, flat color so you can easily and immediately identify it. And the background is matte black. None more black. Windows Mobile on an AMOLED display was a thing of beauty. It's too bad the design regressed in Windows 10 before proper dark mode was released for desktop, because by the time we finally got the clean backgrounds that would really make stuff pop outside the start menu, they'd already ruined the whole UI (including the start menu).

Of course this latest Windows feels like Microsoft designers have fallen completely into Mac OS X redux, which to me makes computers look like some kind of ridiculous hand-carved artifact from antiquity instead of the modern, practical tools they are. Alas, what could have been.

[dylan604]

But it looks so pretty on camera

[axismundi]

2advanced Studios was always my favorite, especially

https://www.youtube.com/watch?v=IWkNkQoQY_8

I remember Eric Jordan, the man behind it all, mentioned in an interview that the key was to make the animations flow with a rhythm.

[charcoalhobo]

Thank you for this walk down memory lane—2advanced was a huge inspiration for me when I started web design and learning flash, but I couldn't remember the name of the site until now. Their 2003 design is burned into my memory.

[od0]

This is the first thing I thought of when I saw this! I began learning how to build websites during this era and was always in awe of their work.

[vas1]

Yes! 2advanced served as an inspiration. I remember surfing it in awe of what was possible to do.

The quirkiness of the web has been somewhat lost. However, I do wonder whether that is just a factor of its expansion and whether somewhere in the depths it still lurks, waiting to be uncovered.

[radicaldreamer]

Thank you! This brought back memories, I never thought I'd come across that UI again

[Pulcinella]

I’m glad that they include pictures of apps that have been made with it. I would appreciate it if there were more sample pictures, but at least there is something included.

Too many GUI and other graphical projects fail to include any images or screenshots, which is poor marketing.

[joshmarlow]

They actually have a site with a playground (linked from the Github page) - https://playground.arwes.dev/

[rafark]

This should apply to all products. Have a framework or a library? Show me some examples, use cases, demos of what it can do and how it does it.

[revskill]

Reason: They don't want to be usable by users (yet).

[anyfoo]

I clicked straight on the first example of a real website that uses it, and, surprisingly, I really like it: https://soulextract.com

Normally I'm a "no nonsense" kind of guy for the web, actually preferring plain text as much as possible, but for creative/artistic stuff, it's different. It reminds me a bit of the extravagant flash sites of the early 2000s. Playful, and all the whimsy is part of it.

I even like the sounds this website makes. You'd think it would be cheese, but here it just works?

[joshmarlow]

I actually listen to Soul Extract regularly now after finding it through this UI library!

[prolapso]

Futuristic UIs peaked decades ago:

https://www.youtube.com/watch?v=_xfTryfN050

https://www.youtube.com/watch?v=exz1KzuthrQ

https://www.youtube.com/watch?v=kC3k0d4u5BQ

I really wish we had more interesting and functional examples nowadays - the web is bloated anyway, why not make more elaborate use of that bloat? Here's another example, albeit just a singular art project:

https://virtualself.co/

Still, it requires taste and an eye for design, and balancing all the maximalist elements makes it especially hard to nail.

[101008]

A bit unfair to compare a new framework with websites made in Flash decades ago... nothing can compete against Flash websites.

[DoneWithAllThat]

On all of those but especially the second two you can really see the influence The Designers Republic had on pop culture and graphic design in the late 90s and early 00’s.

[smallnix]

His website is also very interesting: https://porterrobinson.com/

[vanjajaja1]

Futuristic design is ironically very retro

[JodieBenitez]

Unusability peak IMO.

[Chris2048]

It's funny how this still feels "futuristic". I'd argue sci-fi, or retro-punk (retro-sci-fi?). The elements of design are those from the past about the future, like 80s sci-fi movie design/tropes that became stuck with the genre, along with beige CRT monitors and large floppy disks.

[anotherhue]

60's themed UI: https://neilyoungarchives.com/timeline?day=1&month=1&year=20...

[DarthNebo]

I yearn for a frosted UI which has chilly condensation which shifts around the edges. Something from TRON but mixed with John Carpenter's 'Thing' vibe which white, blue & other nordic colors.

[jasfi]

That sounds amazing. I wonder what the closest thing to that available today is.

[tyingq]

The Albertus font would be a must-have.

[Run_DOS_Run]

Oh, this is pretty awesome. It looks like these old scifi browser games.

I often use exotic frameworks like TuiCss (DOS-like) and 98.css (Windows 98-like) for private projects and this framework looks perfect for it-security projects with clichéd 80s flair.. or a low-quality sci-fi mobile game.

[JusticeJuice]

https://www.hudsandguis.com/ - more FUI work, one of my favourite sites.

[jasfi]

They're a bit short on components. I see there's an open issue to add a Select component: https://github.com/arwes/arwes/issues/137

I'd need this at minimum before I'd considered using this in a real project.

[b_mc2]

Looks really cool! Gives me similar vibes as EDEX-UI[1]

[1] https://github.com/GitSquared/edex-ui

[darklycan51]

Reminds me of the starcraft 1 main menu mixed with sc2 a bit for the background, cool

[Animats]

In the future, everything will be cyan.

This seems to be a thing in anime and movies. It dates from the early 1980s, when displays were mostly green. Fiction needed something different. It also works well for see-through displays which allow the audience to see the actor's face.

On stuff you actually have to interact with, it's more of a cliche now.

[rmuratov]

Related: https://augmented-ui.com/

[lurknot]

I am making a UI framework written completely in the webgpu api rendered purely with particles. DM me if you are interested.

[maxwindiff]

Not OP but I'm interested. How should I DM you? (couldn't find one on your HN profile)

[nottorp]

Hmm a good few of their examples look like they have much better contrast than modern grey on grey stuff.

Didn't click on them to be horrified by beeps and animations if there are any, but some are pretty readable.

[sgt]

Perfect for building my next homepage! I'll start off with something simple, maybe add an under construction gif or two to ensure people know content is coming soon.