SuperHero

assets/css/tailwind.css

@@ -5,7 +5,7 @@
 @import 'tailwindcss/utilities';
 
 /* helper for development only */
-.nuxt-content-container {
+.nuxt-content-container:hover {
   background: linear-gradient(90deg, transparent 90%, #ffff0030);
 }
 

components/home/HomeHero.vue

@@ -3,11 +3,18 @@
     <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
       <nuxt-content :document="hero" />
     </div>
+
+    <SuperHero class="superhero w-full h-full" />
   </div>
 </template>
 
 <script>
+import SuperHero from '~/static/img/superhero.svg?inline'
+
 export default {
+  components: {
+    SuperHero,
+  },
   props: {
     hero: {
       type: Object,
@@ -79,4 +86,125 @@ export default {
     transform: translate(0, 0) rotate(0deg);
   }
 }
+
+@keyframes floatHero {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(0px, -20px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+@keyframes float {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(-30px, -20px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+@keyframes floatZigzag {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(15deg) translate(10px);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes floatCape {
+  0% {
+    transform: skewY(0deg);
+  }
+  50% {
+    transform: skewY(2deg);
+  }
+  100% {
+    transform: skewY(0deg);
+  }
+}
+@keyframes floatBall {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes pulseBreak {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes wind {
+  0% {
+    transform: translateX(-2000px);
+  }
+  100% {
+    transform: translateX(2000px);
+  }
+}
+
+.superhero #man {
+  animation: floatHero 4s ease-in-out infinite;
+}
+.superhero #cape {
+  animation: floatCape 3s ease-in-out infinite;
+}
+.superhero #break_chain {
+  animation: pulseBreak 3s ease-in-out infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.superhero #chain_ball {
+  animation: floatBall 3s ease-in-out infinite;
+  transform-origin: top left;
+  transform-box: fill-box;
+}
+/* red particles */
+.superhero #dots path[fill='#DC2626']:nth-child(odd) {
+  animation: float 4s ease-in-out infinite;
+}
+.superhero #dots path[fill='#DC2626']:nth-child(even) {
+  animation: float 3s ease-in-out infinite;
+}
+/* blue particles */
+.superhero #dots path[fill='#5222D0']:nth-child(odd) {
+  animation: float 5s ease-in-out infinite;
+}
+.superhero #dots path[fill='#5222D0']:nth-child(even) {
+  animation: float 2s ease-in-out infinite;
+}
+/* zigzags */
+.superhero #zigzag path {
+  animation: floatZigzag 5s ease-in-out infinite;
+  transform-box: fill-box;
+}
+/* gray lines */
+.superhero #wind *:nth-child(3n + 1) {
+  animation: wind 6s linear infinite;
+}
+.superhero #wind *:nth-child(3n + 2) {
+  animation: wind 10s linear infinite;
+}
+.superhero #wind *:nth-child(3n + 3) {
+  animation: wind 12s linear infinite;
+}
 </style>