{"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":"2026-05-19T12:58:59","modified_gmt":"2026-05-19T12:58:59","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=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">This cyberpunk UI-kit is called<a href=\"http:\/\/augmented-ui.com\/\" target=\"_blank\">\u00a0Augmented-UI<\/a> and was created by <a type=\"URL\" href=\"https:\/\/twitter.com\/James0x57\" id=\"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 class=\"wp-block-paragraph\">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.&nbsp;<strong>augmented-ui removes all these limitations.<\/strong>&nbsp;<\/p>\n<cite>augmented-ui.com\/docs\/<\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">You can find the project here:<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background wp-block-paragraph\" 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-cyan-bluish-gray-background-color has-background wp-block-paragraph\"><strong>1. Create a border glow and gradients on elements<\/strong><\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-background-color has-background wp-block-paragraph\"><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-cyan-bluish-gray-background-color has-background wp-block-paragraph\"><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 class=\"wp-block-paragraph\">You can find the GitHub repo <a href=\"https:\/\/github.com\/propjockey\/augmented-ui\">here &gt;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you for reading!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Interested in reading more?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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\u00a0Augmented-UI and was created by James0x57. The kit is a [&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\u00a0Augmented-UI and was created by James0x57. The kit is a&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":21,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2343\/revisions"}],"predecessor-version":[{"id":9001,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2343\/revisions\/9001"}],"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}]}}