How to implement:
Code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green Waves</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
position: relative;
}
.aura-background-component {
position: absolute;
top: 0;
width: 100%;
z-index: -10;
height: 100%;
}
.aura-background-component [data-us-project] {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -10;
}
</style>
</head>
<body>
<div class="aura-background-component">
<div data-us-project="yaha7Bz5f3cRBAa5js9K"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div>
</body>
</html>
View background:
Note
If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.