mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
docs: add missing installation, npm i -> npm install
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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!']"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user