{"id":2343,"date":"2020-11-17T20:12:38","date_gmt":"2020-11-17T20:12:38","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=2343"},"modified":"2025-10-14T18:08:03","modified_gmt":"2025-10-14T18:08:03","slug":"a-cyberpunk-ui-kit-you-need-to-know-about","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/a-cyberpunk-ui-kit-you-need-to-know-about\/","title":{"rendered":"A cyberpunk UI-kit you need to know about"},"content":{"rendered":"\n<p class=\"has-white-color has-text-color\"><strong>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.<\/strong> <strong>That&#8217;s why you should consider using this<\/strong> <strong>cyberpunk UI-kit.<\/strong><\/p>\n\n\n\n<p>This cyberpunk UI-kit is called<a href=\"http:\/\/augmented-ui.com\/\"> Augmented-UI<\/a>, and was created by <a type=\"URL\" id=\"https:\/\/twitter.com\/James0x57\" href=\"https:\/\/twitter.com\/James0x57\">James0x57<\/a>. The kit is a CSS-based UI-kit. Here&#8217;s how James describes it himself:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>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.\u00a0<strong>augmented-ui removes all these limitations.<\/strong>\u00a0<\/p>\n<cite>augmented-ui.com\/docs\/<\/cite><\/blockquote>\n\n\n\n<p>You can find the project here:<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background\" style=\"background-color:#1bddff\"><strong>The<\/strong> <strong>Augmented-UI Project<br><\/strong>Link &gt; <a href=\"http:\/\/augmented-ui.com\/\">http:\/\/augmented-ui.com\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Some examples of how you can use the cyberpunk UI-kit<\/h2>\n\n\n\n<p class=\"has-luminous-vivid-amber-color has-text-color has-background\" style=\"background-color:#282828\"><strong>1. Create a border glow and gradients on elements<\/strong><\/p>\n\n\n\n<p class=\"has-luminous-vivid-amber-color has-text-color has-background\" style=\"background-color:#282828\"><strong>2. Combine it with dynamic 3D components<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oceanwp-oembed-wrap clr\"><blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Using Vanilla Tilt JS ( <a href=\"https:\/\/t.co\/oSpWqExuJs\">https:\/\/t.co\/oSpWqExuJs<\/a> ) with augmented-ui: <a href=\"https:\/\/t.co\/6jnHlnbNbB\">https:\/\/t.co\/6jnHlnbNbB<\/a><br>Since clip-path causes flattening, the augmented element has to be composed inside the the data-tilt element to fake the parallax relationship. Small HTML compromise but it looks neat! <a href=\"https:\/\/t.co\/veLqmLRX6N\">pic.twitter.com\/veLqmLRX6N<\/a><\/p>&mdash; James0x57 (@James0x57) <a href=\"https:\/\/twitter.com\/James0x57\/status\/1313265411929133061?ref_src=twsrc%5Etfw\">October 5, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"has-luminous-vivid-amber-color has-text-color has-background\" style=\"background-color:#282828\"><strong>3. And lots of other cool stuff<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oceanwp-oembed-wrap clr\"><blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">I like the way this bouncy 3D hex ball thing turned out <a href=\"https:\/\/t.co\/U4wr5rxpdv\">pic.twitter.com\/U4wr5rxpdv<\/a><\/p>&mdash; James0x57 (@James0x57) <a href=\"https:\/\/twitter.com\/James0x57\/status\/1303502002983403521?ref_src=twsrc%5Etfw\">September 9, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n<\/div><\/figure>\n\n\n\n<p>You can find the GitHub repo <a href=\"https:\/\/github.com\/propjockey\/augmented-ui\">here &gt;<\/a><\/p>\n\n\n\n<p>Thank you for reading!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Interested in reading more?<\/h2>\n\n\n\n<p>Here are some of my other articles related to cyberpunk and design:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.wendyzhou.se\/blog\/2019\/08\/15\/cyberpunk-hong-kong-during-the-2019-anti-extradition-bill-protest\/\" data-type=\"post\" data-id=\"1278\">Cyberpunk scenes from Hong Kong<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.wendyzhou.se\/blog\/2019\/07\/10\/ui-design-create-soft-shadows-3-guidelines\/\" data-type=\"post\" data-id=\"1180\">How to create modern soft UI shadows<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.wendyzhou.se\/blog\/2019\/09\/12\/what-is-embodied-interaction\/\" data-type=\"post\" data-id=\"1626\">What is &#8220;embodied interaction&#8221;?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[69,175,177,6],"tags":[],"class_list":["post-2343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cyberpunk","category-ui-design","category-ui-kits","category-ux-and-ui-design","entry","has-media"],"gutentor_comment":2,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI.jpg",1050,639,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI-150x150.jpg",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI-300x183.jpg",300,183,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI-768x467.jpg",768,467,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI-1024x623.jpg",1024,623,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI.jpg",1050,639,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI.jpg",1050,639,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI.jpg",600,365,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI.jpg",739,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/11\/Augmented-UI.jpg",1050,639,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":2,"uagb_excerpt":"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&#8217;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&hellip;","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=2343"}],"version-history":[{"count":20,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2343\/revisions"}],"predecessor-version":[{"id":7917,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2343\/revisions\/7917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/2345"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=2343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=2343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=2343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}