Component Boom

src/constants/code/Animations/pixelTransitionCode.ts

@@ -0,0 +1,29 @@
+import code from '@/content/Animations/PixelTransition/PixelTransition.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const pixelTransition: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/PixelTransition`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <PixelTransition
+    :grid-size="8"
+    pixel-color="#ffffff"
+    :animation-step-duration="0.4"
+    class-name="custom-pixel-card"
+  >
+    <template #firstContent>
+      <img src="..." alt="Default" style="width: 100%; height: 100%; object-fit: cover;" />
+    </template>
+    <template #secondContent>
+      <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111;">
+        <p style="font-weight: 900; font-size: 3rem; color: #fff;">Meow!</p>
+      </div>
+    </template>
+  </PixelTransition>
+</template>
+
+<script setup lang=\"ts\">
+  import PixelTransition from './PixelTransition.vue';
+</script>`,
+  code
+}