
Show HN: Cyberpunk web design made easy, really easy - James0x57
http://augmented-ui.com/
======
James0x57
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! ;)

~~~
tgirod
thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm
sure augmented-ui will be very useful!

~~~
lsiebert
If it's in the SF bay area, I'd totally play in a cyberpunk larp

------
_squared_
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
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_
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
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 :)

------
ehnto
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
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
I really hope we get a sequel to Deus Ex some day.

~~~
IggleSniggle
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.

~~~
yakshaving_jgt
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.

~~~
IggleSniggle
HR is worth a play. Not quite the same thing as the original, but good in its
own right.

~~~
ehnto
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)

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

~~~
James0x57
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
Try this font:
[https://www.theleagueofmoveabletype.com/orbitron](https://www.theleagueofmoveabletype.com/orbitron)

~~~
_squared_
[deleted]

~~~
latexr
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.

------
paxswill
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
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...](https://chrome.google.com/webstore/detail/the-great-
suspender/klbibkeccnjlkjkiokjodocebajanakg?hl=en)

~~~
James0x57

      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

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

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

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

------
err4nt
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...](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-
with-the-data-*-attributes)

1: [https://developer.mozilla.org/en-
US/docs/Web/API/HTMLElement...](https://developer.mozilla.org/en-
US/docs/Web/API/HTMLElement/dataset)

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

------
peternicky
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
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 :)

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

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

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

------
bkyan
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
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
Hmmm... This doesn't work with external stylesheets due to browser security.

~~~
bkyan
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
...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
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
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.

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

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

------
tommica
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!

------
maaaats
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
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
Really cool, thanks!

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

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

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

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

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

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

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

------
bastih
That is great. Love how smooth it looks.

------
s_kunk
Really nice ! Thanks for sharing

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

------
HackerBacker
This looks nice!

------
buboard
is this a new design trend? i m liking it

------
forgotmypw
Thank you!

------
fergie
Very cool.

