9 ms·

Show HN: Cyberpunk web design made easy, really easy

775 points by James0x57 7y ago

James0x57 7y ago
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 https://i.imgur.com/yY66cdv.png and https://i.imgur.com/A2Pyeur.png 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 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 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 https://www.npmjs.com/package/augmented-ui Happy to answer questions! <3 Get augmented! ;)
- atemerev 7y ago
  “high tech, low effort” — brilliant!
  - James0x57 7y ago
    Thanks! ^_^
- tgirod 7y ago
  thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!
  - James0x57 7y ago
    ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!
  - lsiebert 7y ago
    If it's in the SF bay area, I'd totally play in a cyberpunk larp
- bonnow 7y ago
  Cool, I will use it to rebuild my blog's layout.
- scoobyyabbadoo 7y ago
  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?
  - James0x57 7y ago
    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!
    - scoobyyabbadoo 7y ago
      I'd definitely kick in money for this on KickStarter or whatever the appropriate platform for this is.
- rtcoms 7y ago
  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.
  - James0x57 7y ago
    Fixed! Thank you very much!
    - rtcoms 7y ago
      Is it possible to have multiple clips on single side of border ?
      - James0x57 7y ago
        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!
- liopleurodon 7y ago
  Wow, nice work, thanks for doing this
- d6e 7y ago
  Looks awesome! Could you add TLS redirect though?
- hanniabu 7y ago
  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.
  - teknopaul 7y ago
    Ditto in firefox mobile. Parts of text not readable
    - James0x57 7y ago
      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
      - hanniabu 7y ago
        Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.
        James0x57 7y ago
        Logical Equivalence: 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. I just didn't make it properly responsive there yet. augmented-ui doesn't care what size the elements are.
- vanderZwan 7y ago
  This probably deserves to be added to awesome-quirks, especially since it's pure CSS :) https://github.com/dsalaj/awesome-quirks/ https://github.com/dsalaj/awesome-quirks/
- t0astbread 7y ago
  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!
- maaaats 7y ago
  > 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?
  - James0x57 7y ago
    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!
    - throwawaytoday5 7y ago
      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.
- soulofmischief 7y ago
  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.
- waylandsmithers 7y ago
  This is fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.
- hiccuphippo 7y ago
  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.
  - James0x57 7y ago
    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.
    - hiccuphippo 7y ago
      Thank you for all the insight. I'll be sure to keep clip-path in mind.
hoaxgaming 7y ago
Very good project
HackerBacker 7y ago
This looks nice!
bastih 7y ago
That is great. Love how smooth it looks.
ehnto 7y ago
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!
- James0x57 7y ago
  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
  - yakshaving_jgt 7y ago
    I really hope we get a sequel to Deus Ex some day.
    - IggleSniggle 7y ago
      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.
      - asutekku 7y ago
        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.
        yakshaving_jgt 7y ago
        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.
tommica 7y ago
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!
darepublic 7y ago
Gonna try this out for one of my side projects, thank you
thuylun2412 7y ago
good
fimdomeio 7y ago
Love it although my cyberpunk distopia dreams do not include Arial/Helvetica, not even in the closing credits. :)
- James0x57 7y ago
  Ohh you give me too much credit. I'm not much of a designer. That's all the generic font-family: sans-serif; lol
  - theandrewbailey 7y ago
    Try this font: https://www.theleagueofmoveabletype.com/orbitron https://www.theleagueofmoveabletype.com/orbitron
    - _squared_ 7y ago
      [deleted]
      - latexr 7y ago
        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.
    - WorldMaker 7y ago
      Exo is another good option: https://fonts.google.com/specimen/Exo+2 https://fonts.google.com/specimen/Exo+2
  - Hitton 7y ago
    >I'm not much of a designer. You are too humble. I was quite impressed by the site's design.
maaaats 7y ago
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 https://i.imgur.com/oA6Cslw.png
- James0x57 7y ago
  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/ https://jsfiddle.net/3tx4ve59/
  - maaaats 7y ago
    Really cool, thanks!
buboard 7y ago
is this a new design trend? i m liking it
_squared_ 7y ago
This is really cool, great job! I'm thinking about integrating this in edex-ui ( https://github.com/GitSquared/edex-ui https://github.com/GitSquared/edex-ui ), here's how it looks like so far, redesigning pop-ups: https://imgur.com/a/4oABPAT 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.
- James0x57 7y ago
  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!!
  - _squared_ 7y ago
    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.
    - alltalk10000 7y ago
      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 :)
- swalsh 7y ago
  That is so cool, i'll be keeping an eye on it.
s_kunk 7y ago
Really nice ! Thanks for sharing
Dirlewanger 7y ago
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).
- PhasmaFelis 7y ago
  Yeah, totally. I was thinking about that in my other comment. (https://news.ycombinator.com/item?id=20928597 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.
- ebg13 7y ago
  I didn't know what you were talking about until I switched browsers on a hunch. That animation doesn't work in Safari.
foxhop 7y ago
Very cool. I want to use this somewhere soon. Just have to free up time to work on passion projects. : )
fergie 7y ago
Very cool.
cyberpunk 7y ago
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 ;)
TRossi 7y ago
I just have to make my new startup website:) looks awesome.
johnsnowtho 7y ago
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.
rgovostes 7y ago
In the CSS and HTML example code, you can mouse over each line to get an explanation of what it does. Nice touch.
PhasmaFelis 7y ago
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.
- James0x57 7y ago
  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. :)
your-nanny 7y ago
on ff mobile site"s scroll seriously lagged. nice visual appeal though
paxswill 7y ago
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!
- jtreminio 7y ago
  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-suspender/klbibkeccnjlkjkiokjodocebajanakg?hl=en https://chrome.google.com/webstore/detail/the-great-suspende...
  - James0x57 7y ago
    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
- James0x57 7y ago
  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 :)
peternicky 7y ago
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
- James0x57 7y ago
  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 :)
MrLeap 7y ago
I'm making a browser based game and I'll definitely use this. Thanks James, looks awesome.
- James0x57 7y ago
  heck yeah! Awesome. ^^ Link me when it's ready? @James0x57 on twitter, reddit, github, etc
Litmus2336 7y ago
This is hilarious, and I love it. It makes me really, really nostalgic.
- James0x57 7y ago
  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 https://i.imgur.com/vbdEOXo.png
  - Litmus2336 7y ago
    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...
  - mhd 7y ago
    "Night City 2020" I see you're a man of rare taste.
ebg13 7y ago
It's odd to call IE 11 "ancient". It was last updated 28 days ago.
- James0x57 7y 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.
forgotmypw 7y ago
Thank you!
bkyan 7y ago
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?
- James0x57 7y ago
  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 https://github.com/propjockey/aug-attr-spliced.js It allows you to specify .mydiv { --augmented-ui: tl-clip exe; } 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!
  - bkyan 7y ago
    Oh, nice! ツ I'll check it out.
  - bkyan 7y ago
    Hmmm... This doesn't work with external stylesheets due to browser security.
    - bkyan 7y ago
      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");
      - James0x57 7y ago
        ...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!
gitgud 7y ago
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?
- err4nt 7y ago
  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.
NedimHad 7y ago
I am a huge fan since day one ️
mcv 7y ago
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.
err4nt 7y ago
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-data-with-the-data-*-attributes https://html.spec.whatwg.org/#embedding-custom-non-visible-d... 1: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...
- James0x57 7y ago
  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.

775 points by James0x57 7y ago

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 https://i.imgur.com/yY66cdv.png and https://i.imgur.com/A2Pyeur.png 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 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 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 https://www.npmjs.com/package/augmented-ui Happy to answer questions! <3 Get augmented! ;)

atemerev 7y ago
“high tech, low effort” — brilliant!
- James0x57 7y ago
  Thanks! ^_^
tgirod 7y ago
thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!
- James0x57 7y ago
  ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!
- lsiebert 7y ago
  If it's in the SF bay area, I'd totally play in a cyberpunk larp
bonnow 7y ago
Cool, I will use it to rebuild my blog's layout.
scoobyyabbadoo 7y ago
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?
- James0x57 7y ago
  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!
  - scoobyyabbadoo 7y ago
    I'd definitely kick in money for this on KickStarter or whatever the appropriate platform for this is.
rtcoms 7y ago
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.
- James0x57 7y ago
  Fixed! Thank you very much!
  - rtcoms 7y ago
    Is it possible to have multiple clips on single side of border ?
    - James0x57 7y ago
      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!
liopleurodon 7y ago
Wow, nice work, thanks for doing this
d6e 7y ago
Looks awesome! Could you add TLS redirect though?
hanniabu 7y ago
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.
- teknopaul 7y ago
  Ditto in firefox mobile. Parts of text not readable
  - James0x57 7y ago
    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
    - hanniabu 7y ago
      Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.
      - James0x57 7y ago
        Logical Equivalence: 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. I just didn't make it properly responsive there yet. augmented-ui doesn't care what size the elements are.
vanderZwan 7y ago
This probably deserves to be added to awesome-quirks, especially since it's pure CSS :) https://github.com/dsalaj/awesome-quirks/ https://github.com/dsalaj/awesome-quirks/
t0astbread 7y ago
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!
maaaats 7y ago
> 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?
- James0x57 7y ago
  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!
  - throwawaytoday5 7y ago
    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.
soulofmischief 7y ago
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.
waylandsmithers 7y ago
This is fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.
hiccuphippo 7y ago
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.
- James0x57 7y ago
  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.
  - hiccuphippo 7y ago
    Thank you for all the insight. I'll be sure to keep clip-path in mind.

hoaxgaming 7y ago

Very good project

HackerBacker 7y ago

This looks nice!

bastih 7y ago

That is great. Love how smooth it looks.

ehnto 7y ago

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!

James0x57 7y ago
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
- yakshaving_jgt 7y ago
  I really hope we get a sequel to Deus Ex some day.
  - IggleSniggle 7y ago
    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.
    - asutekku 7y ago
      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.
      - yakshaving_jgt 7y ago
        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.

tommica 7y ago

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!

darepublic 7y ago

Gonna try this out for one of my side projects, thank you

thuylun2412 7y ago

good

fimdomeio 7y ago

Love it although my cyberpunk distopia dreams do not include Arial/Helvetica, not even in the closing credits. :)

James0x57 7y ago
Ohh you give me too much credit. I'm not much of a designer. That's all the generic font-family: sans-serif; lol
- theandrewbailey 7y ago
  Try this font: https://www.theleagueofmoveabletype.com/orbitron https://www.theleagueofmoveabletype.com/orbitron
  - _squared_ 7y ago
    [deleted]
    - latexr 7y ago
      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.
  - WorldMaker 7y ago
    Exo is another good option: https://fonts.google.com/specimen/Exo+2 https://fonts.google.com/specimen/Exo+2
- Hitton 7y ago
  >I'm not much of a designer. You are too humble. I was quite impressed by the site's design.

maaaats 7y ago

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 https://i.imgur.com/oA6Cslw.png

James0x57 7y ago
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/ https://jsfiddle.net/3tx4ve59/
- maaaats 7y ago
  Really cool, thanks!

buboard 7y ago

is this a new design trend? i m liking it

_squared_ 7y ago

This is really cool, great job! I'm thinking about integrating this in edex-ui ( https://github.com/GitSquared/edex-ui https://github.com/GitSquared/edex-ui ), here's how it looks like so far, redesigning pop-ups: https://imgur.com/a/4oABPAT 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.

James0x57 7y ago
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!!
- _squared_ 7y ago
  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.
  - alltalk10000 7y ago
    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 :)
swalsh 7y ago
That is so cool, i'll be keeping an eye on it.

s_kunk 7y ago

Really nice ! Thanks for sharing

Dirlewanger 7y ago

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

PhasmaFelis 7y ago
Yeah, totally. I was thinking about that in my other comment. (https://news.ycombinator.com/item?id=20928597 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.
ebg13 7y ago
I didn't know what you were talking about until I switched browsers on a hunch. That animation doesn't work in Safari.

foxhop 7y ago

Very cool. I want to use this somewhere soon. Just have to free up time to work on passion projects. : )

fergie 7y ago

Very cool.

cyberpunk 7y ago

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 ;)

TRossi 7y ago

I just have to make my new startup website:) looks awesome.

johnsnowtho 7y ago

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.

rgovostes 7y ago

In the CSS and HTML example code, you can mouse over each line to get an explanation of what it does. Nice touch.

PhasmaFelis 7y ago

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.

James0x57 7y ago
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. :)

your-nanny 7y ago

on ff mobile site"s scroll seriously lagged. nice visual appeal though

paxswill 7y ago

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!

jtreminio 7y ago
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-suspender/klbibkeccnjlkjkiokjodocebajanakg?hl=en https://chrome.google.com/webstore/detail/the-great-suspende...
- James0x57 7y ago
  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
James0x57 7y ago
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 :)

peternicky 7y ago

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

James0x57 7y ago
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 :)

MrLeap 7y ago

I'm making a browser based game and I'll definitely use this. Thanks James, looks awesome.

James0x57 7y ago
heck yeah! Awesome. ^^ Link me when it's ready? @James0x57 on twitter, reddit, github, etc

Litmus2336 7y ago

This is hilarious, and I love it. It makes me really, really nostalgic.

James0x57 7y ago
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 https://i.imgur.com/vbdEOXo.png
- Litmus2336 7y ago
  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...
- mhd 7y ago
  "Night City 2020" I see you're a man of rare taste.

ebg13 7y ago

It's odd to call IE 11 "ancient". It was last updated 28 days ago.

James0x57 7y 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.

forgotmypw 7y ago

Thank you!

bkyan 7y ago

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?

James0x57 7y ago
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 https://github.com/propjockey/aug-attr-spliced.js It allows you to specify .mydiv { --augmented-ui: tl-clip exe; } 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!
- bkyan 7y ago
  Oh, nice! ツ I'll check it out.
- bkyan 7y ago
  Hmmm... This doesn't work with external stylesheets due to browser security.
  - bkyan 7y ago
    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");
    - James0x57 7y ago
      ...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!

gitgud 7y ago

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?

err4nt 7y ago
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.

NedimHad 7y ago

I am a huge fan since day one ️

mcv 7y ago

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.

err4nt 7y ago

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-data-with-the-data-*-attributes https://html.spec.whatwg.org/#embedding-custom-non-visible-d... 1: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...

James0x57 7y ago
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.