Merge branch 'main' into feat/target-cursor

src/constants/Categories.ts

@@ -25,7 +25,8 @@ export const CATEGORIES = [
       'Scroll Float',
       'Scroll Reveal',
       'Rotating Text',
-      'Glitch Text'
+      'Glitch Text',
+      'Scroll Velocity'
     ]
   },
   {
@@ -47,6 +48,7 @@ export const CATEGORIES = [
       'Blob Cursor',
       'Meta Balls',
       'Image Trail',
+      'Shape Blur',
       'Target Cursor',
     ]
   },
@@ -85,7 +87,6 @@ export const CATEGORIES = [
       'Balatro',
       'Letter Glitch',
       'Particles',
-      'Shape Blur',
       'Waves',
       'Squares',
       'Iridescence',

src/constants/Components.ts

@@ -15,6 +15,7 @@ const animations = {
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
   'meta-balls': () => import('../demo/Animations/MetaBallsDemo.vue'),
   'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
+  'shape-blur': () => import('../demo/Animations/ShapeBlurDemo.vue'),
   'target-cursor': () => import('../demo/Animations/TargetCursorDemo.vue'),
 };
 
@@ -38,6 +39,7 @@ const textAnimations = {
   'scroll-reveal': () => import("../demo/TextAnimations/ScrollRevealDemo.vue"),
   'rotating-text': () => import("../demo/TextAnimations/RotatingTextDemo.vue"),
   'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
+  'scroll-velocity': () => import("../demo/TextAnimations/ScrollVelocityDemo.vue"),
 };
 
 const components = {
@@ -75,7 +77,6 @@ const backgrounds = {
   'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
   'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
   'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
-  'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue'),
   'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue'),
   'orb': () => import('../demo/Backgrounds/OrbDemo.vue'),
   'ballpit': () => import('../demo/Backgrounds/BallpitDemo.vue'),

src/constants/code/Animations/shapeBlurCode.ts

@@ -1,8 +1,8 @@
-import code from '@content/Backgrounds/ShapeBlur/ShapeBlur.vue?raw';
+import code from '@/content/Animations/ShapeBlur/ShapeBlur.vue?raw';
 import type { CodeObject } from '../../../types/code';
 
 export const shapeBlur: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/ShapeBlur`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ShapeBlur`,
   installation: `npm install three @types/three`,
   usage: `<template>
   <ShapeBlur

src/constants/code/TextAnimations/scrollVelocityCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/TextAnimations/ScrollVelocity/ScrollVelocity.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const scrollVelocity: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollVelocity`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <ScrollVelocity
+    :texts="['Vue Bits', 'Scroll Down']"
+    :velocity="100"
+    :damping="50"
+    :stiffness="400"
+    :velocity-mapping="{ input: [0, 1000], output: [0, 5] }"
+    class-name="custom-scroll-text"
+    parallax-class-name="custom-parallax"
+    scroller-class-name="custom-scroller"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollVelocity from "./ScrollVelocity.vue";
+</script>`,
+  code
+};