Normally making designs like this on the web is really tedious and a bit challenging. You'd have to do things like add a new element to the dom, rotate it 45deg, position it perfectly, draw just one border and make the background match what's outside the box to cover up the square border underneath the main element. (and that's just one corner of one element)
All you have to do now (after including the CSS file (no js or images, etc)) is this: <button augmented-ui="bl-clip exe">...
From there, there's a bunch of options that are just CSS. (and there are several other options, not just a simple corner clip!) You can set the size of the clip, change the border on the element to anything, including images and gradients (which is nearly impossible when done the traditional way). You can give it a background inset a distance from the border, leaving a transparent gap (so it'll work over any background at all) and much more!
I made all this possible with the polygon feature of clip-path so full-support reaches over 91% of global web users. Check out the CSS behind it all here if you want to see CSS being used as a programming language: https://unpkg.com/augmented-ui/augmented.css
Great work! One bug I noticed is that text runs out of the panels as seen on your page. I suggest making them overflow: auto to make it scroll when necessary, also with the required padding/margin to keep everything tidy within the parameters so it's not kissing the edge of the panel if the characters happen to line up perfectly to fit the width of the panel.
I'll work on it. The site was secondary to the project and I cut a lot of corners making it as fast as I could, putting all the real effort and focus in the project itself
I started getting ready to write a response saying, no, why the hell would you clip and make shapes in the DOM and not regular CSS, till I finished reading the rest of your post.
Great job on the animation, it really highlights how cool your augmentation system is. I have no doubt this will see a lot of use.
Sure. Each aug is a clip-path partial. That is, a series of points meant to be put inside a clip-path: polygon(...here...); stored in custom properties.
All augs, by position, store their partial in the same internal variable. (--aug-_TlPath and --aug-_BPath for example).
So <div augmented-ui="tl-clip"> would store in the --aug-_TlPath a partial polygon path that draws the simple clip shape on the top left corner. Other augs in the tl position would do the exact same.
Then, to actually perform the clip, you use an executable option (exe for simplicity) like so: <div augmented-ui="tl-clip exe">
That executable option creates a clip-path: polygon(var(--aug-_TlPath), ...); on the element which combines all the partial paths into a single final path. They're applied clockwise from tl on.
Each partial is packed with calc() for every point, math based on the size options available for the position/aug, and sets up a lot of other internals. (like corners leave behind a variable for where they start/end so augs on the edge can find the mid point and center itself between the corners)
These vars are all applied to the same one element so even though the vars are set up in separate rules, they all have visibility with each other. With appropriate defaults in the custom properties, eg var(--aug-_TlPath, 0 0) this enables a pick-and-choose sort of plugin system for each partial.
In total there are 3 clip paths created. One for the element itself, one for the inside edge of the border (that loops back around and outside the element, creating a frame), and one for the inset.
Each aug in each position is responsible for providing all 3 paths. Each layer inward also degrades or compounds its size based on border width and inset distance respectively so a constant border and gap width are drawn the whole way around.
...That's pretty much it.
Oh and the automatic elliptical border radius fallback for pre-chromium Edge and iOS < 11 does the exact same thing with corner aug data but instead of making a clip-path, it makes a border-radius rule.
Are there any resources or articles you'd recommend to get a more in-depth view of CSS? I'm a frontend developer but I always struggle with CSS beyond the basics.
Understanding how you you created this is very enlightening.
I land on css-tricks constantly. That's loaded with neat ideas.
For me, learning is always easiest when I'm learning what I need right now Soo my personal suggestion would be: just keep making things and don't let what you already know how to do be a limit for you.
Would it be better to use the css border-image property? If you don't want to use images I guess you could embed svg in it. That should give you around 98% of all browser users according to caniuse.
Border image property with svg was one of the first approaches I tried and tried. It got about half way to about half the options and required more setup than just a single CSS file.
I got slightly further to what I wanted with border-mask, but still fell really far short.
Some of the biggest limits on both of those is: 1) the size definitions is only 4 numbers so same-edge corners share a dimension (reasonable but very limiting) 2) changing the color of the border required more effort than setting a css property 3) doing more than using a color was a no-go without hands-on svg work and dom insertion required. 4) applying it to a larger element meant the border got wider. You'd have to have separate svg parts for each width built in, which sucks.
It took almost a week before I realized I could do everything I wanted by using clip-path. As soon as I did though, I went all in. Clip path was the most work up front but resulted in the most possible options, the easiest setup, and the easiest general use. Borders and the inset are full-featured CSS backgrounds that support practically anything, the augs along the edge could have different positions with simple css properties, it scaled to any element without changing the border width or inset distance, and it all worked out of the box with a single CSS file added to your project.
There are 8 positions, top-left, top, top-right, right, bottom-right, and so on.
Each position can have an aug equipped so the left side could have 3.
If you mean like stacked, I suppose you could add extra dom elements inside and augment each layer as you wish to.
There isn't a way built in to put multiple different augs in a given position/slot.
If you have anything even as crude as an MS Paint mockup so I can better see what you mean, I'd be happy to take a look and consider it or let you know if it's possible as-is!
This is really cool! I am actually more of a backend engineer though, and I use dashboard templates like you would find with bootstrap and then just tweak the template a bit to accept data from my backend. Are there any dashboards/consoles/portals/anything templates written with this augmented-ui that someone could just take and tweak what data populates it?
I use viewport units (vh, vw) in my CSS to ensure everything scales to different screens/resolutions; so far augmented-ui seems to handle that very well.
oh my gosh man this is so cool I legit almost teared up a bit. It looks awesome even without it but I cannot wait to see where you land using augmented-ui.
This is the first time I've got to see someone use it for a big project ^__^
Did the Deus Ex series influence your design choices? I remember after playing Human Revolution, I was doing graphic design for a fitness supplement company, and I went on a sort of dystopian/tech UI tangent that fit really well with the product line. It was fun.
That text effect is super cool, as is the whole project, nice work!
I started trying to figure out different ways to do this because I was watching a 12 hour playthrough of Deus Ex Human Revolution on youtube. Took about 5 days until I realized I could do everything I wanted with clip-path.
Really hope we get a sequel to Mankind Divided some August, too many loose ends!
Just in case you’re not aware (maybe you are making a joke?) the series consists of six games: Deus Ex (2000), Deus Ex: Invisible War (2003), Deus Ex: Human Revolution (2011), Deus Ex: The Fall (2013), Deus Ex Go (2016) and Deus Ex: Mankind Divided (2016). The original from 2000 is one of the most beloved games in the genre.
The original games, how well loved they might be, are kinda awful to play on modern day standards though. I guess they are referencing how Mankind Divided ended kind of abruptly and deserves an sequel.
Not in my opinion. I played through the original again last year, and enjoyed it just as much as I always have. The relatively poor graphics by today's standards don't bother me.
People still love Casablanca. Nobody cares that it's in black and white.
Yeah, I guess jokes don't always work in this format on the Internet.
If I remember correctly, Invisible War was so bad that the entire team was fired. I've played the original several times. It's a classic. I wouldn't regard any of the supposed sequels as sequels. I played IW once. It was hot garbage.
I haven't tried HR and beyond, but from gameplay videos it doesn't look as though they've captured the spirit of the original.
Human Revolution was my favourite, after the original. In terms of replayability, I come back to it more often. The atmosphere, particularly in Hengsha, were quite immersive. I would generally recommend it.
Invisible War - some say nowadays it got more flack than it quite deserves, but I absolutely cannot make myself go back to it :<
Mankind Divided - I'm halfway through, and quite enjoy it. I do understand that most people find it unfinished and short though. It does have a different vibe to original.
It's nothing like Invisible War either. I would consider Invisible War a bad sequel, while I would consider Human Revolution a spiritual succesor. Neither game is like the original but Human Revolution/Mankind Divided are great games in their own right (ignoring that Mankind Divided was cut short)
Me too, the story was building so well and the pieces of the puzzle were being placed down. Then they threw half the pieces away and the game ended! I have read there might be a sequel after their current project, I am hopeful.
It looks really cool, but it spikes my browser's (Firefox and Chromium on Ubuntu 19.04) CPU usage whenever it's active. Not even scrolling, just visible.
On a side note, I've been forced to install The Great Suspender[0] extension because so many non-active tabs will simply take over CPU usage in Chrome.
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
The animations are using WebAssembly which runs directly on CPU and results in tons of dom updates every frame. The biggest current actual flaw in it is that it doesn't shut off or pause when it's out of frame so all js animations on that page run constantly. It's on the todo list
Thank you very much for checking it out and providing feedback!
If you mean the main site, that uses an animation library that uses WebAssembly. It's faster than plain js but does lean on cpu directly. Lots and lots of dom updates to run the animations too, which is expensive.
Other pages like the test page and docs page don't have animations and probably don't tax your cpu very much. Buuut I'd be curious to hear if your system/browser disagrees on those pages too :)
This is really cool! It's interesting that you call it "cyberpunk," though. With a few exceptions, it seems like generic sci-fi to me; it wouldn't be out of place on Star Trek, I think.
If you asked me to imagine "cyberpunk web design," I would probably say HTML 1.0 with green-on-black text. Cyberpunk as a visual aesthetic is usually rooted in the dark future as seen from the '80s, all CRTs and chunky cables and Japan Inc.
mmmmm yeahhh, not gonna argue that, I think you're probably right on all points. haha
The reason I made it though is because of my love of the Cyberpunk genre specifically. Deus Ex, Tron Legacy, Cyberpunk 2077, and so many more shows, games, and movies are where I draw inspiration from.
They always feature this style as if it was easy to do, just wanted to give back and help bring that to reality.
Thank you!
edit: also, augmentations/augs by that name, I think, are specifically cyberpunk. Augs as an idea fits very well as an analogy for both how this works under the hood and how it's used on the surface. Soooo it's more specifically Cyberpunk than generic sci-fi in that regard, imo. :)
I find it fascinating that the "spliced" screen animation, an phenomenon unique to CRT screens, still persists as a cyberpunk trope. No doubt it's because cyberpunk imagery has its origins in the 70s/80s when all we had is analog screens. I think it will continue to be one of those weird anachronisms future generations won't know why it exists unless you do some deep digging (or were around for its origins).
It's funny watching the flamewars on r/cyberpunk about what does and doesn't count as "cyberpunk." Some people hate it when real-world images pop up there. They can't get their heads around the fact that cyberpunk isn't strictly sci-fi anymore; we've been living in it for at least 20 years.
Yup this is a nice take - sometimes these libraries can be a bit cumbersome, but the syntax is simple - similar to bootstrap.
I think the big thing is the design - this looks straight out of Mass Effect or something - really clean, and feels fully transformed - like you're not even looking at the web we already see everyday.
If I do anything futuristic based I'll definitely be using this. Good job.
Looks fun, happy to see a great usage of CSS custom properties, but a little baffled and let down that it seems to use invalid HTML attributes :/
When writing HTML you can invent any custom attribute you want so long as it begins with `data-` [0], and in JavaScript there's even a special dataset interface that makes working with these custom data-* attributes simple and easy [1].
This could be improved without changing any of the design at all - just by updating it to not rely on writing invalid HTML.
I gave this a lot of thought. I used to be a stickler for valid markup. augmented-ui had a data- prefix as an option up to right before initial release.
Here are my reasons for not including it (yet):
1) data- isn't a great fit for it. It's not specifically data, it is visible, and I didn't want to clutter the dataset property for people using it with database output
2) invalid attributes are used everywhere, constantly. Even google.com uses them a few times. (this is the reason I'm not a stickler for it any more - if you get to the point where you're using js frameworks to build scalable web apps, chances are you're going to use invalid attributes in every single viewmodel file, or your coworkers will)
3) "data-" adds 5 extra characters to clutter and type on every single element and each selector in the main project css file. People who use augmented-ui are likely to use it on many many elements, and it adds up fast when you're building something big.
4) The only likely reason an invalid attribute might break is if the spec expands to use that exact same attribute. In the unlikely event that "augmented-ui" becomes a standard attribute, I will happily write the (grunt or w/e) script to patch every file in a project since this is very very easy to detect with regular expressions. (I've written large scale migration scripts and dozens of code parsers for work AND for fun)
5) I didn't want to split the userbase, especially at launch, with different options that can't be interchangeable. (interchangeability comes at a cost of exponentially large selectors in the fallback css because of Edge - the 5 layers of fallback support for Edge becomes over 30 selectors with just 2 different options) In the future I will have a dist folder that has a safely minified option at least. I may also have data- prefixed versions as a mutually exclusive option in the dist folder at that time if there is demand for it.
6) The first few commits were using class names instead of the attribute but even that was annoying to use because the class names were prefixed to avoid stepping on toes and the class list got way too cluttered. The "augmented-ui" attribute saved typing characters, looked cleaner, and felt cooler to use. (subjective, I know)
I understand and respect if you choose not to use it because of wanting valid attribute markup. Hopefully though this at least gives you perspective into my reasons and careful considerations that ultimately lead me to choose not to include it.
- The looping animations are from a JS animation library that I wrote so that means lots of dom updates every animation frame, which is expensive. Also, the animation lib uses WebAssembly which runs directly on CPU. Aaand they don't shut off or pause when they're out of frame (haven't got to that yet)
- Awesome, thank you! Hoped it would be helpful :)
I was making this "ad" for it over the weekend and got a pretty good laugh from it too. Especially at the "Wow!" text on the right haha: https://i.imgur.com/vbdEOXo.png
Does the augmented-ui property have to live inline on the html tag, itself? ... or is there are way to define the whole exe process within the CSS class without having to inline the augmented-ui property in the HTML?
in the CSS file and it will automatically apply the dom element attribute to whatever matches the CSS selector. The plugin needs work and optimizing and is my current priority, but the basics are there and it's functioning!
CSS custom properties don't need JavaScript to work - they're a platform feature. You can read them and interact with them from JavaScript just like any other CSS property, but just like any other CSS property it can be used 100% independently from any JS.
Cool, I tried to make a UI some time ago, with interlocked boxes that had depth [0], and it was a real hassle to get everything lined up properly with the borders. So much I didn't bother getting it done as it was only for a fun workshop. Could this be done with this css?
wow that is remarkably similar to the ui I sketched out of an idea I had a couple years ago.
But yep, that would be fairly easy to do with augmented-ui. The only "tricks" would be the parts that extend out would just be layered ontop of the orange clip instead of being a child element. The orange clip wouldn't actually need to have a hole. Where there is a hole visible though, you can just draw a piece with the same color as the background so it looks like a hole.
Normally making designs like this on the web is really tedious and a bit challenging. You'd have to do things like add a new element to the dom, rotate it 45deg, position it perfectly, draw just one border and make the background match what's outside the box to cover up the square border underneath the main element. (and that's just one corner of one element)
For example: https://i.imgur.com/yY66cdv.png and https://i.imgur.com/A2Pyeur.png on Cyberpunk 2077's website this is roughly how they do it.
I set out to fix that with augmented-ui.
All you have to do now (after including the CSS file (no js or images, etc)) is this: <button augmented-ui="bl-clip exe">...
From there, there's a bunch of options that are just CSS. (and there are several other options, not just a simple corner clip!) You can set the size of the clip, change the border on the element to anything, including images and gradients (which is nearly impossible when done the traditional way). You can give it a background inset a distance from the border, leaving a transparent gap (so it'll work over any background at all) and much more!
Here are the docs on the border: http://augmented-ui.com/docs/#--aug-border-bg (click show in codepen if you want to play with it, jsfiddle's post feature is currently down)
I made all this possible with the polygon feature of clip-path so full-support reaches over 91% of global web users. Check out the CSS behind it all here if you want to see CSS being used as a programming language: https://unpkg.com/augmented-ui/augmented.css
Aaaand this is all free to use in any project! Check it out on NPM, I'd really really love to see what you make with it: https://www.npmjs.com/package/augmented-ui
Happy to answer questions! <3 Get augmented! ;)
Great work! One bug I noticed is that text runs out of the panels as seen on your page. I suggest making them overflow: auto to make it scroll when necessary, also with the required padding/margin to keep everything tidy within the parameters so it's not kissing the edge of the panel if the characters happen to line up perfectly to fit the width of the panel.
Ditto in firefox mobile. Parts of text not readable
I'll work on it. The site was secondary to the project and I cut a lot of corners making it as fast as I could, putting all the real effort and focus in the project itself
Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.
Logical Equivalence:
I just didn't make it properly responsive there yet. augmented-ui doesn't care what size the elements are.I started getting ready to write a response saying, no, why the hell would you clip and make shapes in the DOM and not regular CSS, till I finished reading the rest of your post.
Great job on the animation, it really highlights how cool your augmentation system is. I have no doubt this will see a lot of use.
This probably deserves to be added to awesome-quirks, especially since it's pure CSS :)
https://github.com/dsalaj/awesome-quirks/
“high tech, low effort” — brilliant!
Thanks! ^_^
thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!
If it's in the SF bay area, I'd totally play in a cyberpunk larp
ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!
> Check out the CSS behind it all here if you want to see CSS being used as a programming language
Could you explain the process behind the CSS, how it works?
Sure. Each aug is a clip-path partial. That is, a series of points meant to be put inside a clip-path: polygon(...here...); stored in custom properties.
All augs, by position, store their partial in the same internal variable. (--aug-_TlPath and --aug-_BPath for example).
So <div augmented-ui="tl-clip"> would store in the --aug-_TlPath a partial polygon path that draws the simple clip shape on the top left corner. Other augs in the tl position would do the exact same.
Then, to actually perform the clip, you use an executable option (exe for simplicity) like so: <div augmented-ui="tl-clip exe">
That executable option creates a clip-path: polygon(var(--aug-_TlPath), ...); on the element which combines all the partial paths into a single final path. They're applied clockwise from tl on.
Each partial is packed with calc() for every point, math based on the size options available for the position/aug, and sets up a lot of other internals. (like corners leave behind a variable for where they start/end so augs on the edge can find the mid point and center itself between the corners)
These vars are all applied to the same one element so even though the vars are set up in separate rules, they all have visibility with each other. With appropriate defaults in the custom properties, eg var(--aug-_TlPath, 0 0) this enables a pick-and-choose sort of plugin system for each partial.
In total there are 3 clip paths created. One for the element itself, one for the inside edge of the border (that loops back around and outside the element, creating a frame), and one for the inset.
Each aug in each position is responsible for providing all 3 paths. Each layer inward also degrades or compounds its size based on border width and inset distance respectively so a constant border and gap width are drawn the whole way around.
...That's pretty much it.
Oh and the automatic elliptical border radius fallback for pre-chromium Edge and iOS < 11 does the exact same thing with corner aug data but instead of making a clip-path, it makes a border-radius rule.
happy to clarify any point you're interested in!
Are there any resources or articles you'd recommend to get a more in-depth view of CSS? I'm a frontend developer but I always struggle with CSS beyond the basics.
Understanding how you you created this is very enlightening.
I land on css-tricks constantly. That's loaded with neat ideas.
For me, learning is always easiest when I'm learning what I need right now Soo my personal suggestion would be: just keep making things and don't let what you already know how to do be a limit for you.
Can't-do almost doesn't exist.
CSS Secrets: Better Solutions to Everyday Web Design Problems (written by Lea Verou) covers a variety of interesting techniques along these lines.
I had to implement something like this during an internship last year and I can confirm that it's a pain. I wish I had augmented back then!
This is fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.
Would it be better to use the css border-image property? If you don't want to use images I guess you could embed svg in it. That should give you around 98% of all browser users according to caniuse.
Border image property with svg was one of the first approaches I tried and tried. It got about half way to about half the options and required more setup than just a single CSS file.
I got slightly further to what I wanted with border-mask, but still fell really far short.
Some of the biggest limits on both of those is: 1) the size definitions is only 4 numbers so same-edge corners share a dimension (reasonable but very limiting) 2) changing the color of the border required more effort than setting a css property 3) doing more than using a color was a no-go without hands-on svg work and dom insertion required. 4) applying it to a larger element meant the border got wider. You'd have to have separate svg parts for each width built in, which sucks.
It took almost a week before I realized I could do everything I wanted by using clip-path. As soon as I did though, I went all in. Clip path was the most work up front but resulted in the most possible options, the easiest setup, and the easiest general use. Borders and the inset are full-featured CSS backgrounds that support practically anything, the augs along the edge could have different positions with simple css properties, it scaled to any element without changing the border width or inset distance, and it all worked out of the box with a single CSS file added to your project.
Thank you for all the insight. I'll be sure to keep clip-path in mind.
Nice work.
I guess there is a mistake in documentation on website. When I hover on --aug-tr, --aug-bl
The description says, Top-left, Bottom-right clip augs. I It should be Top-right Bottom-left.
Fixed! Thank you very much!
Is it possible to have multiple clips on single side of border ?
There are 8 positions, top-left, top, top-right, right, bottom-right, and so on.
Each position can have an aug equipped so the left side could have 3.
If you mean like stacked, I suppose you could add extra dom elements inside and augment each layer as you wish to.
There isn't a way built in to put multiple different augs in a given position/slot.
If you have anything even as crude as an MS Paint mockup so I can better see what you mean, I'd be happy to take a look and consider it or let you know if it's possible as-is!
Cool, I will use it to rebuild my blog's layout.
Looks awesome! Could you add TLS redirect though?
Wow, nice work, thanks for doing this
This is really cool! I am actually more of a backend engineer though, and I use dashboard templates like you would find with bootstrap and then just tweak the template a bit to accept data from my backend. Are there any dashboards/consoles/portals/anything templates written with this augmented-ui that someone could just take and tweak what data populates it?
That's a really good opportunity for quality designers (not me lol).
It's only been 10 days since v1.0.0 released so I'm sure nobody's done that yet. But yeah, great idea, it could make them some money, hope it happens!
I'd definitely kick in money for this on KickStarter or whatever the appropriate platform for this is.
This is really cool, great job!
I'm thinking about integrating this in edex-ui ( https://github.com/GitSquared/edex-ui ), here's how it looks like so far, redesigning pop-ups: https://imgur.com/a/4oABPAT
I use viewport units (vh, vw) in my CSS to ensure everything scales to different screens/resolutions; so far augmented-ui seems to handle that very well.
oh my gosh man this is so cool I legit almost teared up a bit. It looks awesome even without it but I cannot wait to see where you land using augmented-ui.
This is the first time I've got to see someone use it for a big project ^__^
I bookmarked it, will keep an eye on it!
Thank you!!
Hehe, thanks.
I don't think I'll change much things but augmented-ui styles on some elements here and there should give the UI a nice facelift.
I'll make sure to credit you for that really cool package.
you two literally made my day and my entire week. like i became legit happy when i saw both of your UIs. have a great one :)
That is so cool, i'll be keeping an eye on it.
Did the Deus Ex series influence your design choices? I remember after playing Human Revolution, I was doing graphic design for a fitness supplement company, and I went on a sort of dystopian/tech UI tangent that fit really well with the product line. It was fun.
That text effect is super cool, as is the whole project, nice work!
I started trying to figure out different ways to do this because I was watching a 12 hour playthrough of Deus Ex Human Revolution on youtube. Took about 5 days until I realized I could do everything I wanted with clip-path.
Really hope we get a sequel to Mankind Divided some August, too many loose ends!
Thank you! :D
I really hope we get a sequel to Deus Ex some day.
Just in case you’re not aware (maybe you are making a joke?) the series consists of six games: Deus Ex (2000), Deus Ex: Invisible War (2003), Deus Ex: Human Revolution (2011), Deus Ex: The Fall (2013), Deus Ex Go (2016) and Deus Ex: Mankind Divided (2016). The original from 2000 is one of the most beloved games in the genre.
Everyone wants another DX game except for the people writing the checks.
https://wegotthiscovered.com/gaming/deus-mankind-divided-can...
(skip to the bottom) https://www.vg247.com/2019/07/29/deus-ex-mankind-divided-seq...
I think it would take a much smaller game studio to properly do a real successor to Deus Ex.
I can imagine it actually being better with a smaller studio.
The people working on the new Baldur’s Gate. They’re a small studio. It wouldn’t work with EA or whoever.
The original games, how well loved they might be, are kinda awful to play on modern day standards though. I guess they are referencing how Mankind Divided ended kind of abruptly and deserves an sequel.
Not in my opinion. I played through the original again last year, and enjoyed it just as much as I always have. The relatively poor graphics by today's standards don't bother me.
People still love Casablanca. Nobody cares that it's in black and white.
There have been a bunch of remakes of movies and games recently - some people care about the visual aesthetic enough to do that.
Yeah, I guess jokes don't always work in this format on the Internet.
If I remember correctly, Invisible War was so bad that the entire team was fired. I've played the original several times. It's a classic. I wouldn't regard any of the supposed sequels as sequels. I played IW once. It was hot garbage.
I haven't tried HR and beyond, but from gameplay videos it doesn't look as though they've captured the spirit of the original.
Human Revolution was my favourite, after the original. In terms of replayability, I come back to it more often. The atmosphere, particularly in Hengsha, were quite immersive. I would generally recommend it.
Invisible War - some say nowadays it got more flack than it quite deserves, but I absolutely cannot make myself go back to it :<
Mankind Divided - I'm halfway through, and quite enjoy it. I do understand that most people find it unfinished and short though. It does have a different vibe to original.
HR is worth a play. Not quite the same thing as the original, but good in its own right.
It's nothing like Invisible War either. I would consider Invisible War a bad sequel, while I would consider Human Revolution a spiritual succesor. Neither game is like the original but Human Revolution/Mankind Divided are great games in their own right (ignoring that Mankind Divided was cut short)
Jokes work on the internet, but some audiences don't.
To anyone interested, this video touches on the greater themes behind the original Deus Ex, and may inspire you to play the game :)
https://www.youtube.com/watch?v=g_CBF318nBY
Me too, the story was building so well and the pieces of the puzzle were being placed down. Then they threw half the pieces away and the game ended! I have read there might be a sequel after their current project, I am hopeful.
Love it although my cyberpunk distopia dreams do not include Arial/Helvetica, not even in the closing credits. :)
Ohh you give me too much credit. I'm not much of a designer. That's all the generic
lolTry this font: https://www.theleagueofmoveabletype.com/orbitron
Exo is another good option: https://fonts.google.com/specimen/Exo+2
[deleted]
It costs $125 per weight, with a limit of 12500 page views per month. For all weights and up to 1 million page views a month, it costs $10k.
>I'm not much of a designer.
You are too humble. I was quite impressed by the site's design.
It looks really cool, but it spikes my browser's (Firefox and Chromium on Ubuntu 19.04) CPU usage whenever it's active. Not even scrolling, just visible.
Reiterating though, this is really cool!
On a side note, I've been forced to install The Great Suspender[0] extension because so many non-active tabs will simply take over CPU usage in Chrome.
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
[0] https://chrome.google.com/webstore/detail/the-great-suspende...
Thank you very much for checking it out and providing feedback!
If you mean the main site, that uses an animation library that uses WebAssembly. It's faster than plain js but does lean on cpu directly. Lots and lots of dom updates to run the animations too, which is expensive.
Other pages like the test page and docs page don't have animations and probably don't tax your cpu very much. Buuut I'd be curious to hear if your system/browser disagrees on those pages too :)
This is really cool! It's interesting that you call it "cyberpunk," though. With a few exceptions, it seems like generic sci-fi to me; it wouldn't be out of place on Star Trek, I think.
If you asked me to imagine "cyberpunk web design," I would probably say HTML 1.0 with green-on-black text. Cyberpunk as a visual aesthetic is usually rooted in the dark future as seen from the '80s, all CRTs and chunky cables and Japan Inc.
This is a great look, regardless.
mmmmm yeahhh, not gonna argue that, I think you're probably right on all points. haha
The reason I made it though is because of my love of the Cyberpunk genre specifically. Deus Ex, Tron Legacy, Cyberpunk 2077, and so many more shows, games, and movies are where I draw inspiration from.
They always feature this style as if it was easy to do, just wanted to give back and help bring that to reality.
Thank you!
edit: also, augmentations/augs by that name, I think, are specifically cyberpunk. Augs as an idea fits very well as an analogy for both how this works under the hood and how it's used on the surface. Soooo it's more specifically Cyberpunk than generic sci-fi in that regard, imo. :)
I find it fascinating that the "spliced" screen animation, an phenomenon unique to CRT screens, still persists as a cyberpunk trope. No doubt it's because cyberpunk imagery has its origins in the 70s/80s when all we had is analog screens. I think it will continue to be one of those weird anachronisms future generations won't know why it exists unless you do some deep digging (or were around for its origins).
Yeah, totally. I was thinking about that in my other comment. (https://news.ycombinator.com/item?id=20928597) Cyberpunk as a visual aesthetic is rooted in the '80s.
It's funny watching the flamewars on r/cyberpunk about what does and doesn't count as "cyberpunk." Some people hate it when real-world images pop up there. They can't get their heads around the fact that cyberpunk isn't strictly sci-fi anymore; we've been living in it for at least 20 years.
I didn't know what you were talking about until I switched browsers on a hunch. That animation doesn't work in Safari.
Yup this is a nice take - sometimes these libraries can be a bit cumbersome, but the syntax is simple - similar to bootstrap.
I think the big thing is the design - this looks straight out of Mass Effect or something - really clean, and feels fully transformed - like you're not even looking at the web we already see everyday.
If I do anything futuristic based I'll definitely be using this. Good job.
Looks fun, happy to see a great usage of CSS custom properties, but a little baffled and let down that it seems to use invalid HTML attributes :/
When writing HTML you can invent any custom attribute you want so long as it begins with `data-` [0], and in JavaScript there's even a special dataset interface that makes working with these custom data-* attributes simple and easy [1].
This could be improved without changing any of the design at all - just by updating it to not rely on writing invalid HTML.
0: https://html.spec.whatwg.org/#embedding-custom-non-visible-d...
1: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...
I gave this a lot of thought. I used to be a stickler for valid markup. augmented-ui had a data- prefix as an option up to right before initial release.
Here are my reasons for not including it (yet):
1) data- isn't a great fit for it. It's not specifically data, it is visible, and I didn't want to clutter the dataset property for people using it with database output
2) invalid attributes are used everywhere, constantly. Even google.com uses them a few times. (this is the reason I'm not a stickler for it any more - if you get to the point where you're using js frameworks to build scalable web apps, chances are you're going to use invalid attributes in every single viewmodel file, or your coworkers will)
3) "data-" adds 5 extra characters to clutter and type on every single element and each selector in the main project css file. People who use augmented-ui are likely to use it on many many elements, and it adds up fast when you're building something big.
4) The only likely reason an invalid attribute might break is if the spec expands to use that exact same attribute. In the unlikely event that "augmented-ui" becomes a standard attribute, I will happily write the (grunt or w/e) script to patch every file in a project since this is very very easy to detect with regular expressions. (I've written large scale migration scripts and dozens of code parsers for work AND for fun)
5) I didn't want to split the userbase, especially at launch, with different options that can't be interchangeable. (interchangeability comes at a cost of exponentially large selectors in the fallback css because of Edge - the 5 layers of fallback support for Edge becomes over 30 selectors with just 2 different options) In the future I will have a dist folder that has a safely minified option at least. I may also have data- prefixed versions as a mutually exclusive option in the dist folder at that time if there is demand for it.
6) The first few commits were using class names instead of the attribute but even that was annoying to use because the class names were prefixed to avoid stepping on toes and the class list got way too cluttered. The "augmented-ui" attribute saved typing characters, looked cleaner, and felt cooler to use. (subjective, I know)
I understand and respect if you choose not to use it because of wanting valid attribute markup. Hopefully though this at least gives you perspective into my reasons and careful considerations that ultimately lead me to choose not to include it.
Awesome project, I want to build something to try it out! A few comments:
- very high resource usage (animation meter and my system monitor confirms high CPU usage)
- hovering over examples lines of code and displaying a description is very cool
Thank you! I'd love to see what you do with it!
- The looping animations are from a JS animation library that I wrote so that means lots of dom updates every animation frame, which is expensive. Also, the animation lib uses WebAssembly which runs directly on CPU. Aaand they don't shut off or pause when they're out of frame (haven't got to that yet)
- Awesome, thank you! Hoped it would be helpful :)
This is hilarious, and I love it. It makes me really, really nostalgic.
hahaha awesome
I was making this "ad" for it over the weekend and got a pretty good laugh from it too. Especially at the "Wow!" text on the right haha: https://i.imgur.com/vbdEOXo.png
All you need to do is fill it with ads, then it will be really cyberpunk!
Although I heard recently that might be against NPM's TOS...
"Night City 2020"
I see you're a man of rare taste.
In the CSS and HTML example code, you can mouse over each line to get an explanation of what it does. Nice touch.
Does the augmented-ui property have to live inline on the html tag, itself? ... or is there are way to define the whole exe process within the CSS class without having to inline the augmented-ui property in the HTML?
It has to live on dom element.
BUT
I wrote a separate plugin that does exactly what you're thinking: https://github.com/propjockey/aug-attr-spliced.js
It allows you to specify
in the CSS file and it will automatically apply the dom element attribute to whatever matches the CSS selector. The plugin needs work and optimizing and is my current priority, but the basics are there and it's functioning!Hmmm... This doesn't work with external stylesheets due to browser security.
Preprocessing the external CSS and generating static jQuery snippets like the following, works for my use case, though:
$('section > .outer > .inner').attr('augmented-ui', "bl-clip r-clip-y br-round br-inset-clean exe");
...probably pretty important since bigger sites would likely use CSS files from a CDN.
I'll make sure to mention and test around that, it hadn't crossed my mind yet.
Thank you!
Oh, nice! ツ I'll check it out.
Amazing, I've always loved the design but have been a little intimidated by how intricate it can be to implement, so this looks awesomely easy!!
Also, wondering; how does this use custom css properties without using javascript?
CSS custom properties don't need JavaScript to work - they're a platform feature. You can read them and interact with them from JavaScript just like any other CSS property, but just like any other CSS property it can be used 100% independently from any JS.
Really nice! I'll definitely be having a play. Do you think this could be incorporated easily into jekyll/hugo sites?
Although, this cyberpunk at least, tends to stick to TUI's ;)
This is really cool and elegant. I feel like I should start a project to use it somewhere. In fact, I'm running a Shadowrun game. Might come in handy.
Amazing - I didn't even realize that I needed this in my life until now - I'm absolutely going to build my own site using this one!
Cool, I tried to make a UI some time ago, with interlocked boxes that had depth [0], and it was a real hassle to get everything lined up properly with the borders. So much I didn't bother getting it done as it was only for a fun workshop. Could this be done with this css?
[0]: https://i.imgur.com/oA6Cslw.png
wow that is remarkably similar to the ui I sketched out of an idea I had a couple years ago.
But yep, that would be fairly easy to do with augmented-ui. The only "tricks" would be the parts that extend out would just be layered ontop of the orange clip instead of being a child element. The orange clip wouldn't actually need to have a hole. Where there is a hole visible though, you can just draw a piece with the same color as the background so it looks like a hole.
Here you go: https://jsfiddle.net/3tx4ve59/
Really cool, thanks!
Very cool. I want to use this somewhere soon. Just have to free up time to work on passion projects. : )
I'm making a browser based game and I'll definitely use this. Thanks James, looks awesome.
heck yeah! Awesome. ^^ Link me when it's ready? @James0x57 on twitter, reddit, github, etc
It's odd to call IE 11 "ancient". It was last updated 28 days ago.
It's more odd to defend IE 11 though.
:P
Calling ancient is a half-joke meant to purport that augmented-ui is from the future.
I just have to make my new startup website:) looks awesome.
Gonna try this out for one of my side projects, thank you
That is great. Love how smooth it looks.
Really nice ! Thanks for sharing
on ff mobile site"s scroll seriously lagged. nice visual appeal though
This looks nice!
is this a new design trend? i m liking it
Thank you!
Very cool.
Very good project
I am a huge fan since day one ️
good