Merge pull request #43 from onmax/crosshair

Add Crosshair animation component

src/constants/Categories.ts

@@ -49,7 +49,8 @@ export const CATEGORIES = [
       'Blob Cursor',
       'Meta Balls',
       'Image Trail',
-      'Shape Blur'
+      'Shape Blur',
+      'Crosshair'
     ]
   },
   {

src/constants/Components.ts

@@ -17,6 +17,7 @@ const animations = {
   'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
   'shape-blur': () => import('../demo/Animations/ShapeBlurDemo.vue'),
   'target-cursor': () => import('../demo/Animations/TargetCursorDemo.vue'),
+  'crosshair': () => import('../demo/Animations/CrosshairDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/crosshairCode.ts

@@ -0,0 +1,21 @@
+import code from '@/content/Animations/Crosshair/Crosshair.vue?raw';
+import type { CodeObject } from '@/types/code';
+
+export const crosshair: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Crosshair`,
+  installation: `npm i gsap`,
+  usage: `<template>
+  <div ref="containerRef" style="height: 300px; overflow: hidden;">
+    <Crosshair :container-ref="containerElement" color="#ffffff" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useTemplateRef, computed } from 'vue';
+  import Crosshair from "./Crosshair.vue";
+  
+  const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+  const containerElement = computed(() => containerRef.value);
+</script>`,
+  code
+};