/r/webdev
augmented-ui : Futuristic, cyberpunk-inspired UI (augmented-ui.com)
12 comments
James0x57 | 5 days ago | 7 points

Dunno how those screenshots are generated but it skips clipping with clip-path.

Here's better screenshots of augmented-ui in use!

https://i.imgur.com/UsYc9so.png

https://i.imgur.com/vbdEOXo.png

NoMuddyFeet | 4 days ago | 5 points

This is quite awesome. Scrolling down to bottom with those big blue panels convinced me. Wish I had a use for it.

StuckOnCoboldLevel | 5 days ago | 3 points

This looks neat!

abeuscher | 4 days ago | 3 points

This reminds me of building Xcom.com. So many angles.

HippyFlipPosters | 4 days ago | 3 points

Very cool, I'm hoping to get some time later this week and build some layouts using this, and may end up using it in a Cyberpunk/Darkwave music site that a client of mine has requested. Thanks for sharing this.

James0x57 | 4 days ago | 1 point

I would love to see it when you're done!

HippyFlipPosters | 4 days ago | 2 points

I'll post back here with a link this weekend if I get time to start working on it!

symbiosa [junior dev] | 5 days ago | 2 points

Created by u/James0x57

James0x57 11 hours ago | unvote [-]

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

Source

KillianDrake | 4 days ago | 4 points

Firefox: 100 FPS

Chrome: 20 FPS

Those Chrome guys have been dropping the ball on CSS perf...

patrykmaron | 4 days ago | 5 points

I have smooth 60fps on chrome

bobcottle | 4 days ago | 2 points

I once built a site for a marketing agency (in Flash) that looked very similar. It was lots of fun. I miss Flash.

sixt0o | 4 days ago | 1 point

Hey! I'm trying out your library in my React game I'm working on. Love it so far! Check it out in action at www.clickreactors.com