Component Boom

src/constants/code/Components/flyingPostersCode.ts

@@ -0,0 +1,37 @@
+import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const flyingPosters: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <FlyingPosters 
+    :items="posterImages"
+    :plane-width="320"
+    :plane-height="320"
+    :distortion="3"
+    :scroll-ease="0.01"
+    :camera-fov="45"
+    :camera-z="20"
+    class="h-full w-full"
+  />
+</template>
+
+<script setup lang="ts">
+  import FlyingPosters from "./FlyingPosters.vue";
+
+  const posterImages = [
+  'https://picsum.photos/800/800?grayscale&random=1',
+  'https://picsum.photos/800/800?grayscale&random=2',
+  'https://picsum.photos/800/800?grayscale&random=3',
+  'https://picsum.photos/800/800?grayscale&random=4',
+  'https://picsum.photos/800/800?grayscale&random=5',
+  'https://picsum.photos/800/800?grayscale&random=6',
+  'https://picsum.photos/800/800?grayscale&random=7',
+  'https://picsum.photos/800/800?grayscale&random=8',
+  'https://picsum.photos/800/800?grayscale&random=9',
+  'https://picsum.photos/800/800?grayscale&random=10',
+  ];
+</script>`,
+  code
+}