Merge pull request #55 from Utkarsh-Singhal-26/feat/sticker-peel

Added <StickerPeel /> animation

Author: DavidHDev

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -39,6 +39,7 @@ export const CATEGORIES = [
       'Splash Cursor',
       'Pixel Transition',
       'Target Cursor',
+      'Sticker Peel',
       'Ribbons',
       'Glare Hover',
       'Magnet Lines',

src/constants/Components.ts

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

src/constants/code/Animations/stickerPeelCode.ts

@@ -0,0 +1,23 @@
+import code from '@/content/Animations/StickerPeel/StickerPeel.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const stickerPeel = createCodeObject(code, 'Animations/StickerPeel', {
+  installation: `npm install gsap`,
+  usage: `<template>
+    <StickerPeel
+        :image-src="logo"
+        :width="200"
+        :rotate="30"
+        :peelBackHoverPct="20"
+        :peelBackActivePct="40"
+        :shadow-intensity="0.6"
+        :lighting-intensity="0.1"
+        :initial-position="{ x: -100, y: 100 }"
+    />
+</template>
+
+<script setup lang="ts">
+  import StickerPeel from './StickerPeel.vue';
+  import logo from './assets/sticker.png';
+</script>`
+});