A cyberpunk UI-kit you need to know about

A cyberpunk UI-kit you need to know about
Augmented UI - Futuristic/Cyberpunk CSS project

It can be quite hard to create cyberpunk, sci-fi, and futuristic styled UI interfaces from scratch. Some things are easier, other things, such as glitches and moving parts are a lot harder. That’s why you should consider using this cyberpunk UI-kit.

This cyberpunk UI-kit is called Augmented-UI, and was created by James0x57. The kit is a CSS-based UI-kit. Here’s how James describes it himself:

Traditional Sci-Fi web design is tedious and difficult to scale, requiring extra elements or images for each clip, all rotated and carefully positioned to cover corners, often required to match against solid color backgrounds and solid color borders to stay hidden. augmented-ui removes all these limitations. 

augmented-ui.com/docs/

You can find the project here:

The Augmented-UI Project
Link > http://augmented-ui.com/

Some examples of how you can use the cyberpunk UI-kit

1. Create a border glow and gradients on elements

Image
Glowing augmented-ui borders

2. Combine it with dynamic 3D components

3. And lots of other cool stuff

You can find the GitHub repo here >

Thank you for reading!

Interested in reading more?

Here are some of my other articles related to cyberpunk and design:

Wendy Zhou

UX/UI designer from Sweden. I write about design, tech, side projects, personal finance and cyberpunk. Contact: wendyzhou.design@gmail.com

This Post Has 2 Comments

Leave a Reply