Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Cyberpunk web design made easy, really easy

augmented-ui.com

Post reply on HN
Print view View original

11–20 of 112 posts

Re: Show HN: Cyberpunk web design made easy, really easy

#11

Post by rtcoms »

James0x57 wrote: post #2

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…

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.

Re: Show HN: Cyberpunk web design made easy, really easy

#12

Post by liopleurodon »

James0x57 wrote: post #2

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…

Wow, nice work, thanks for doing this

Re: Show HN: Cyberpunk web design made easy, really easy

#13

Post by James0x57 »

scoobyyabbadoo wrote: post #9
James0x57 wrote: post #2

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…

This is really cool! I am actually more of a backend engineer though, and I use dashboard templates like you would find with bootstrap and then just tweak the template a bit to accept data from my backend. Are there any dashboards/consoles/portals/anything templates written with this augmented-ui that someone could just take and tweak what data populates it?

That's a really good opportunity for quality designers (not me lol).

It's only been 10 days since v1.0.0 released so I'm sure nobody's done that yet. But yeah, great idea, it could make them some money, hope it happens!

Re: Show HN: Cyberpunk web design made easy, really easy

#14

Post by d6e »

James0x57 wrote: post #2

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…

Looks awesome! Could you add TLS redirect though?

Re: Show HN: Cyberpunk web design made easy, really easy

#16

Post by 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!

Re: Show HN: Cyberpunk web design made easy, really easy

#17

Post by James0x57 »

rtcoms wrote: post #11
James0x57 wrote: post #2

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…

Nice work. I guess there is a mistake in documentation on website. When I hover on --aug-tr, --aug-bl The description says, Top-left, Bottom-right clip augs. I It should be Top-right Bottom-left.

Fixed! Thank you very much!

Re: Show HN: Cyberpunk web design made easy, really easy

#18

Post by hanniabu »

James0x57 wrote: post #2

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…

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.

Re: Show HN: Cyberpunk web design made easy, really easy

#19

Post by James0x57 »

ehnto wrote: post #16

Did the Deus Ex series influence your design choices? I remember after playing Human Revolution, I was doing graphic design for a fitness supplement company, and I went on a sort of dystopian/tech UI tangent that fit really well with the product line. It was fun. That text effect is super cool, as is the whole project, nice work!

I started trying to figure out different ways to do this because I was watching a 12 hour playthrough of Deus Ex Human Revolution on youtube. Took about 5 days until I realized I could do everything I wanted with clip-path.

Really hope we get a sequel to Mankind Divided some August, too many loose ends!

Thank you! :D

Post reply on HN