Merge pull request #33 from BuptStEve/main

docs: add missing installation, npm i -> npm install

src/constants/code/Animations/blobCursorCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const blobCursor: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/BlobCursor`,
-  installation: `npm i gsap`,
+  installation: `npm install gsap`,
   usage: `<template>
   <BlobCursor
     blobType="circle"

src/constants/code/Animations/imageTrailCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const imageTrail: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ImageTrail`,
-  installation: `npm i gsap`,
+  installation: `npm install gsap`,
   usage: `<template>
   <div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
     <ImageTrail

src/constants/code/Animations/metaBallsCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const metaBalls: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MetaBalls`,
-  installation: `npm i ogl`,
+  installation: `npm install ogl`,
   usage: `<template>
     <MetaBalls
         color="#27ff64"

src/constants/code/Backgrounds/ballpitCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const ballpit: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Ballpit`,
-  installation: `npm i three`,
+  installation: `npm install three @types/three gsap`,
   usage: `//Component inspired by Kevin Levron:
 //https://x.com/soju22/status/1858925191671271801
 

src/constants/code/Backgrounds/beamsCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const beams: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Beams`,
-  installation: `npm install three`,
+  installation: `npm install three @types/three`,
   usage: `<template>
   <div class="beams-container">
     <Beams

src/constants/code/Backgrounds/gridDistortionCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const gridDistortion: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridDistortion`,
-  installation: `npm i three`,
+  installation: `npm install three @types/three`,
   usage: `<template>
   <div class="relative w-full h-[600px]">
     <GridDistortion

src/constants/code/Backgrounds/gridMotionCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const gridMotion: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridMotion`,
-  installation: `npm i gsap`,
+  installation: `npm install gsap`,
   usage: `<template>
     <GridMotion
       :items="images"

src/constants/code/Backgrounds/liquidChromeCode.ts

@@ -3,10 +3,10 @@ import type { CodeObject } from '../../../types/code';
 
 export const liquidChrome: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LiquidChrome`,
-  installation: `npm i ogl`,
+  installation: `npm install ogl`,
   usage: `<template>
   <div class="relative w-full h-[600px]">
-    <LiquidChrome 
+    <LiquidChrome
       :baseColor="[0.1, 0.1, 0.1]"
       :speed="1"
       :amplitude="0.6"

src/constants/code/Backgrounds/orbCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const orb: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Orb`,
-  installation: `npm i ogl`,
+  installation: `npm install ogl`,
   usage: `<template>
   <div class="relative w-full h-[600px]">
     <Orb :hoverIntensity="0.5" :rotateOnHover="true" :hue="0" :forceHoverState="false" />

src/constants/code/Backgrounds/shapeBlurCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const shapeBlur: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/ShapeBlur`,
-  installation: `npm install three`,
+  installation: `npm install three @types/three`,
   usage: `<template>
   <ShapeBlur
     :variation="0"

src/constants/code/Components/stackCode.ts

@@ -3,6 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const stack: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Stack`,
+  installation: `npm install motion-v`,
   usage: `<template>
   <Stack
     :randomRotation="true"

src/constants/code/TextAnimations/rotatingTextCode.ts

@@ -3,7 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const rotatingText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/RotatingText`,
-  installation: `npm i motion-v`,
+  installation: `npm install motion-v`,
   usage: `<template>
     <RotatingText
       :texts="['Vue', 'Bits', 'is', 'Cool!']"

src/constants/code/TextAnimations/scrollFloatCode.ts

@@ -3,6 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const scrollFloatCode: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
+  installation: `npm install gsap`,
   usage: `<template>
   <ScrollFloat
     :children="scrollText"

src/constants/code/TextAnimations/scrollRevealCode.ts

@@ -3,6 +3,7 @@ import type { CodeObject } from '../../../types/code';
 
 export const scrollRevealCode: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollReveal`,
+  installation: `npm install gsap`,
   usage: `<template>
     <ScrollReveal
       :children="scrollText"