Show HN: Cyberpunk web design made easy, really easy
augmented-ui.com
augmented-ui.com
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! ;)
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 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.
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 photo album was made with construction paper and the hole here isn't big enough for the picture in it, so construction paper must be broken.
Could you explain the process behind the CSS, how it works?
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!
Understanding how you you created this is very enlightening.
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.
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.
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.
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.
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!!
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.
That text effect is super cool, as is the whole project, nice work!
Really hope we get a sequel to Mankind Divided some August, too many loose ends!
Thank you! :D
People still love Casablanca. Nobody cares that it's in black and white.
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.
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.
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 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.
font-family: sans-serif;
You are too humble. I was quite impressed by the site's design.
Reiterating though, this is really cool!
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...
When a single tab spikes my laptop's power usage from 14.9W to 35W+ there is something terribly wrong with the design.
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 :)
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.
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. :)
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 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.
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...
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.
- 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
- 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
Although I heard recently that might be against NPM's TOS...
I see you're a man of rare taste.
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
.mydiv { --augmented-ui: tl-clip exe; }
$('section > .outer > .inner').attr('augmented-ui', "bl-clip r-clip-y br-round br-inset-clean exe");
I'll make sure to mention and test around that, it hadn't crossed my mind yet.
Thank you!
Also, wondering; how does this use custom css properties without using javascript?
Although, this cyberpunk at least, tends to stick to TUI's ;)
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/
:P
Calling ancient is a half-joke meant to purport that augmented-ui is from the future.