From 2792d6c5ecab165b140186679f06627cf78f4208 Mon Sep 17 00:00:00 2001
From: StEve YoUng <2747745470@qq.com>
Date: Fri, 18 Jul 2025 11:45:11 +0800
Subject: [PATCH] docs: add missing installation, npm i -> npm install

---
 src/constants/code/Animations/blobCursorCode.ts       | 2 +-
 src/constants/code/Animations/imageTrailCode.ts       | 2 +-
 src/constants/code/Animations/metaBallsCode.ts        | 2 +-
 src/constants/code/Backgrounds/ballpitCode.ts         | 2 +-
 src/constants/code/Backgrounds/beamsCode.ts           | 2 +-
 src/constants/code/Backgrounds/gridDistortionCode.ts  | 2 +-
 src/constants/code/Backgrounds/gridMotionCode.ts      | 2 +-
 src/constants/code/Backgrounds/liquidChromeCode.ts    | 4 ++--
 src/constants/code/Backgrounds/orbCode.ts             | 2 +-
 src/constants/code/Backgrounds/shapeBlurCode.ts       | 2 +-
 src/constants/code/Components/stackCode.ts            | 1 +
 src/constants/code/TextAnimations/rotatingTextCode.ts | 2 +-
 src/constants/code/TextAnimations/scrollFloatCode.ts  | 1 +
 src/constants/code/TextAnimations/scrollRevealCode.ts | 1 +
 14 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/constants/code/Animations/blobCursorCode.ts b/src/constants/code/Animations/blobCursorCode.ts
index 1bf3db1..387a7ac 100644
--- a/src/constants/code/Animations/blobCursorCode.ts
+++ b/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"
diff --git a/src/constants/code/Animations/imageTrailCode.ts b/src/constants/code/Animations/imageTrailCode.ts
index 4d601a5..5e4f5db 100644
--- a/src/constants/code/Animations/imageTrailCode.ts
+++ b/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
diff --git a/src/constants/code/Animations/metaBallsCode.ts b/src/constants/code/Animations/metaBallsCode.ts
index 52f786c..cd242f2 100644
--- a/src/constants/code/Animations/metaBallsCode.ts
+++ b/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"
diff --git a/src/constants/code/Backgrounds/ballpitCode.ts b/src/constants/code/Backgrounds/ballpitCode.ts
index 18eb625..a56496f 100644
--- a/src/constants/code/Backgrounds/ballpitCode.ts
+++ b/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
 
diff --git a/src/constants/code/Backgrounds/beamsCode.ts b/src/constants/code/Backgrounds/beamsCode.ts
index 96e9cf4..dda0784 100644
--- a/src/constants/code/Backgrounds/beamsCode.ts
+++ b/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
diff --git a/src/constants/code/Backgrounds/gridDistortionCode.ts b/src/constants/code/Backgrounds/gridDistortionCode.ts
index fad46f1..9406ca6 100644
--- a/src/constants/code/Backgrounds/gridDistortionCode.ts
+++ b/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
diff --git a/src/constants/code/Backgrounds/gridMotionCode.ts b/src/constants/code/Backgrounds/gridMotionCode.ts
index 15fc181..dbcf230 100644
--- a/src/constants/code/Backgrounds/gridMotionCode.ts
+++ b/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"
diff --git a/src/constants/code/Backgrounds/liquidChromeCode.ts b/src/constants/code/Backgrounds/liquidChromeCode.ts
index b33d535..c3f17c3 100644
--- a/src/constants/code/Backgrounds/liquidChromeCode.ts
+++ b/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"
diff --git a/src/constants/code/Backgrounds/orbCode.ts b/src/constants/code/Backgrounds/orbCode.ts
index f254d9a..08abbb0 100644
--- a/src/constants/code/Backgrounds/orbCode.ts
+++ b/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" />
diff --git a/src/constants/code/Backgrounds/shapeBlurCode.ts b/src/constants/code/Backgrounds/shapeBlurCode.ts
index 7b98771..5e776d5 100644
--- a/src/constants/code/Backgrounds/shapeBlurCode.ts
+++ b/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"
diff --git a/src/constants/code/Components/stackCode.ts b/src/constants/code/Components/stackCode.ts
index 09721f0..dd3269f 100644
--- a/src/constants/code/Components/stackCode.ts
+++ b/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"
diff --git a/src/constants/code/TextAnimations/rotatingTextCode.ts b/src/constants/code/TextAnimations/rotatingTextCode.ts
index 7336650..4190977 100644
--- a/src/constants/code/TextAnimations/rotatingTextCode.ts
+++ b/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!']"
diff --git a/src/constants/code/TextAnimations/scrollFloatCode.ts b/src/constants/code/TextAnimations/scrollFloatCode.ts
index a659927..3c46127 100644
--- a/src/constants/code/TextAnimations/scrollFloatCode.ts
+++ b/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"
diff --git a/src/constants/code/TextAnimations/scrollRevealCode.ts b/src/constants/code/TextAnimations/scrollRevealCode.ts
index d60d817..76891e8 100644
--- a/src/constants/code/TextAnimations/scrollRevealCode.ts
+++ b/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"