atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Simplify demo components

Browse Source
This commit is contained in:
David Haz
2025-07-14 21:09:53 +03:00
parent a65db3c807
commit 07ce88d997
53 changed files with 2254 additions and 2453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/constants/code/Animations/imageTrailCode.ts
View File

@@ -7,7 +7,6 @@ export const imageTrail: CodeObject = {
usage: `<template> usage: `<template>
<div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}"> <div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
<ImageTrail <ImageTrail
:key="key"
:items="[ :items="[
'https://picsum.photos/id/287/300/300', 'https://picsum.photos/id/287/300/300',
'https://picsum.photos/id/1001/300/300', 'https://picsum.photos/id/1001/300/300',

2
src/content/TextAnimations/TrueFocus/TrueFocus.vue
View File

@@ -120,7 +120,7 @@ onUnmounted(() => {
v-for="(word, index) in words" v-for="(word, index) in words"
:key="index" :key="index"
:ref="el => setWordRef(el as HTMLSpanElement, index)" :ref="el => setWordRef(el as HTMLSpanElement, index)"
class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer" class="relative font-black text-7xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
:style="{ :style="{
filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`, filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
'--border-color': borderColor, '--border-color': borderColor,

17
src/css/category.css
View File

@@ -139,23 +139,6 @@ div:has(> .props-table) {
margin-top: 4em; margin-top: 4em;
} }
.rotating-text-demo-container {
white-space: pre;
font-size: clamp(2rem, 6vw, 6rem);
display: flex;
justify-content: center;
align-items: center;
}
.rotating-text-demo-container .rotating-text-demo {
display: inline-block;
color: #0b0b0b;
background-color: #27ff64;
padding: 0 0.4em;
border-radius: 15px;
transition: width 0.3s ease;
}
.ballpit-demo { .ballpit-demo {
position: relative; position: relative;
} }

223
src/demo/Animations/AnimatedContentDemo.vue
View File

@@ -1,133 +1,128 @@
<template> <template>
<div class="animated-content-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container relative py-6 overflow-hidden"> <RefreshButton @click="forceRerender" />
<RefreshButton @click="forceRerender" /> <AnimatedContent
:direction="direction"
<div :key="key" class="flex justify-center items-center"> :delay="delay"
<AnimatedContent :distance="distance"
:direction="direction" :reverse="reverse"
:delay="delay" :duration="duration"
:distance="distance" :ease="ease"
:reverse="reverse" :initial-opacity="initialOpacity"
:duration="duration" :animate-opacity="animateOpacity"
:ease="ease" :scale="scale"
:initial-opacity="initialOpacity" :threshold="threshold"
:animate-opacity="animateOpacity" :key="key"
:scale="scale" @complete="() => console.log('✅ Animation Complete!')"
:threshold="threshold" >
@complete="() => console.log('✅ Animation Complete!')" <div class="demo-content">
> <h4>Animated Content</h4>
<div class="demo-content"> <p>It will animate in when it enters the viewport.</p>
<h4>Animated Content</h4>
<p>It will animate in when it enters the viewport.</p>
</div>
</AnimatedContent>
</div> </div>
</div> </AnimatedContent>
</div>
<Customize> <Customize>
<PreviewSelect <PreviewSelect
title="Animation Direction" title="Animation Direction"
v-model="direction" v-model="direction"
:options="directionOptions" :options="directionOptions"
@update:model-value=" @update:model-value="
val => { val => {
direction = val as 'vertical' | 'horizontal'; direction = val as 'vertical' | 'horizontal';
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSelect <PreviewSelect
title="Easing Function" title="Easing Function"
v-model="ease" v-model="ease"
:options="easeOptions" :options="easeOptions"
@update:model-value=" @update:model-value="
val => { val => {
ease = val as string; ease = val as string;
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Distance" title="Distance"
v-model="distance" v-model="distance"
:min="50" :min="50"
:max="300" :max="300"
:step="10" :step="10"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Duration" title="Duration"
v-model="duration" v-model="duration"
:min="0.1" :min="0.1"
:max="3" :max="3"
:step="0.1" :step="0.1"
value-unit="s" value-unit="s"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Delay" title="Delay"
v-model="delay" v-model="delay"
:min="0" :min="0"
:max="2" :max="2"
:step="0.1" :step="0.1"
value-unit="s" value-unit="s"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Initial Opacity" title="Initial Opacity"
v-model="initialOpacity" v-model="initialOpacity"
:min="0" :min="0"
:max="1" :max="1"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Initial Scale" title="Initial Scale"
v-model="scale" v-model="scale"
:min="0.1" :min="0.1"
:max="2" :max="2"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Threshold" title="Threshold"
v-model="threshold" v-model="threshold"
:min="0.1" :min="0.1"
:max="1" :max="1"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" /> <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
<PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" /> <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="animatedContent" /> <CodeExample :code-object="animatedContent" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="animatedContent.cli" /> <CliInstallation :command="animatedContent.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/demo/Animations/BlobCursorDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative h-[400px] overflow-hidden demo-container"> <div class="demo-container h-[400px]">
<BlobCursor <BlobCursor
:blobType="blobType" :blobType="blobType"
:fillColor="fillColor" :fillColor="fillColor"

172
src/demo/Animations/ClickSparkDemo.vue
View File

@@ -1,88 +1,86 @@
<template> <template>
<div class="click-spark-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container"> <ClickSpark
<ClickSpark :key="rerenderKey"
:key="rerenderKey" :spark-color="sparkColor"
:spark-color="sparkColor" :spark-size="sparkSize"
:spark-size="sparkSize" :spark-radius="sparkRadius"
:spark-radius="sparkRadius" :spark-count="sparkCount"
:spark-count="sparkCount" :duration="duration"
:duration="duration" :easing="easing"
:easing="easing" :extra-scale="extraScale"
:extra-scale="extraScale" class="click-spark-demo-area"
class="click-spark-demo-area" ></ClickSpark>
></ClickSpark>
<div <div
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none" class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
> >
Click Around! Click Around!
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" /> <PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Spark Size" title="Spark Size"
v-model="sparkSize" v-model="sparkSize"
:min="5" :min="5"
:max="30" :max="30"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Spark Radius" title="Spark Radius"
v-model="sparkRadius" v-model="sparkRadius"
:min="10" :min="10"
:max="50" :max="50"
:step="5" :step="5"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Spark Count" title="Spark Count"
v-model="sparkCount" v-model="sparkCount"
:min="4" :min="4"
:max="20" :max="20"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Duration (ms)" title="Duration (ms)"
v-model="duration" v-model="duration"
:min="200" :min="200"
:max="1000" :max="1000"
:step="50" :step="50"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Extra Scale" title="Extra Scale"
v-model="extraScale" v-model="extraScale"
:min="0.5" :min="0.5"
:max="2" :max="2"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="clickSpark" /> <CodeExample :code-object="clickSpark" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="clickSpark.cli" /> <CliInstallation :command="clickSpark.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -124,36 +122,18 @@ const propData = [
</script> </script>
<style scoped> <style scoped>
.demo-container {
min-height: 400px;
}
.click-spark-demo-area { .click-spark-demo-area {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 300px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
} }
.demo-text {
text-align: center;
pointer-events: none;
user-select: none;
}
.demo-text h3 {
font-size: 1.2rem;
color: #fff;
margin-bottom: 0.5rem;
}
.demo-text p {
font-size: 0.9rem;
color: #999;
margin: 0;
}
.demo-content {
padding: 2rem;
}
</style> </style>

86
src/demo/Animations/CountUpDemo.vue
View File

@@ -1,57 +1,55 @@
<template> <template>
<div class="count-up-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <h2 class="demo-title-extra">Default</h2>
<h2 class="demo-title-extra">Default</h2>
<div class="demo-container relative"> <div class="demo-container relative">
<CountUp <CountUp
:key="keyDefault" :key="keyDefault"
:from="0" :from="0"
:to="100" :to="100"
separator="," separator=","
direction="up" direction="up"
:duration="1" :duration="1"
class-name="count-up-text" class-name="count-up-text"
/> />
<RefreshButton @click="forceRerenderDefault" /> <RefreshButton @click="forceRerenderDefault" />
</div> </div>
<h2 class="demo-title-extra">Start Programatically</h2> <h2 class="demo-title-extra">Start Programatically</h2>
<div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]"> <div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
<button <button
class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4" class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
@click="setStartCounting(true)" @click="setStartCounting(true)"
> >
Count to 500! Count to 500!
</button> </button>
<CountUp <CountUp
:key="keyProgramatically" :key="keyProgramatically"
:from="100" :from="100"
:to="500" :to="500"
:start-when="startCounting" :start-when="startCounting"
:duration="5" :duration="5"
class-name="count-up-text" class-name="count-up-text"
/> />
<RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" /> <RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" />
</div> </div>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="countup" /> <CodeExample :code-object="countup" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="countup.cli" /> <CliInstallation :command="countup.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/demo/Animations/CubesDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative demo-container h-[650px] overflow-hidden"> <div class="demo-container h-[650px]">
<Cubes <Cubes
:borderStyle="borderStyle" :borderStyle="borderStyle"
:gridSize="gridSize" :gridSize="gridSize"

130
src/demo/Animations/FadeContentDemo.vue
View File

@@ -1,80 +1,78 @@
<template> <template>
<div class="fade-content-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container"> <RefreshButton @refresh="forceRerender" />
<RefreshButton @refresh="forceRerender" />
<FadeContent <FadeContent
:key="rerenderKey" :key="rerenderKey"
:blur="blur" :blur="blur"
:duration="duration" :duration="duration"
:delay="delay" :delay="delay"
:threshold="threshold" :threshold="threshold"
:initial-opacity="initialOpacity" :initial-opacity="initialOpacity"
:easing="easing" :easing="easing"
class="fade-content-demo-content" class="fade-content-demo-content"
> >
<div class="demo-content"> <div class="demo-content">
<h4>Fade Content</h4> <h4>Fade Content</h4>
<p>It will fade in when it enters the viewport.</p> <p>It will fade in when it enters the viewport.</p>
</div> </div>
</FadeContent> </FadeContent>
</div> </div>
<Customize> <Customize>
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" /> <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Duration (ms)" title="Duration (ms)"
v-model="duration" v-model="duration"
:min="100" :min="100"
:max="3000" :max="3000"
:step="100" :step="100"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Delay (ms)" title="Delay (ms)"
v-model="delay" v-model="delay"
:min="0" :min="0"
:max="1000" :max="1000"
:step="50" :step="50"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Threshold" title="Threshold"
v-model="threshold" v-model="threshold"
:min="0.1" :min="0.1"
:max="1" :max="1"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Initial Opacity" title="Initial Opacity"
v-model="initialOpacity" v-model="initialOpacity"
:min="0" :min="0"
:max="1" :max="1"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="fadeContent" /> <CodeExample :code-object="fadeContent" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="fadeContent.cli" /> <CliInstallation :command="fadeContent.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

86
src/demo/Animations/GlareHoverDemo.vue
View File

@@ -1,57 +1,53 @@
<template> <template>
<div class="glare-hover-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container min-h-[400px]">
<div class="demo-container relative h-[600px] overflow-hidden"> <GlareHover
<div class="flex justify-center items-center h-full"> background="#111"
<GlareHover border-color="#222"
background="#111" border-radius="20px"
border-color="#222" width="400px"
border-radius="20px" height="300px"
width="400px" :glare-color="glareColor"
height="300px" :glare-opacity="glareOpacity"
:glare-color="glareColor" :glare-size="glareSize"
:glare-opacity="glareOpacity" :transition-duration="transitionDuration"
:glare-size="glareSize" :play-once="playOnce"
:transition-duration="transitionDuration" >
:play-once="playOnce" <div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
> </GlareHover>
<div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div> </div>
</GlareHover>
</div>
</div>
<Customize> <Customize>
<PreviewColor title="Glare Color" v-model="glareColor" /> <PreviewColor title="Glare Color" v-model="glareColor" />
<PreviewSlider title="Glare Opacity" v-model="glareOpacity" :min="0" :max="1" :step="0.1" /> <PreviewSlider title="Glare Opacity" v-model="glareOpacity" :min="0" :max="1" :step="0.1" />
<PreviewSlider title="Glare Size" v-model="glareSize" :min="100" :max="500" :step="25" value-unit="%" /> <PreviewSlider title="Glare Size" v-model="glareSize" :min="100" :max="500" :step="25" value-unit="%" />
<PreviewSlider <PreviewSlider
title="Transition Duration" title="Transition Duration"
v-model="transitionDuration" v-model="transitionDuration"
:min="200" :min="200"
:max="2000" :max="2000"
:step="50" :step="50"
value-unit="ms" value-unit="ms"
/> />
<PreviewSwitch title="Play Once" v-model="playOnce" /> <PreviewSwitch title="Play Once" v-model="playOnce" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="glareHover" /> <CodeExample :code-object="glareHover" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="glareHover.cli" /> <CliInstallation :command="glareHover.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

10
src/demo/Animations/ImageTrailDemo.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container"> <div class="demo-container h-[500px] overflow-hidden">
<ImageTrail :key="key" :items="items" :variant="variant" /> <ImageTrail :key="key" :items="items" :variant="variant" />
<div class="absolute flex flex-col justify-center items-center"> <div class="absolute flex flex-col justify-center items-center">
<p class="mb-0 font-black text-[#271E37] text-[clamp(2rem,6vw,6rem)]">Hover Me.</p> <p class="mb-0 font-black text-[#333] text-[clamp(2rem,6vw,6rem)]">Hover Me.</p>
<p class="mt-0 font-black text-[#a6a6a6] text-[18px]">Variant {{ variant }}</p> <p class="mt-0 font-black text-[#a6a6a6] text-[18px]">Variant {{ variant }}</p>
</div> </div>
</div> </div>
@@ -13,7 +13,7 @@
<Customize> <Customize>
<div class="inline-flex gap-2" role="group"> <div class="inline-flex gap-2" role="group">
<button <button
class="bg-[#271E37] px-3 border border-[#271E37] h-8 font-bold text-white text-xs cursor-not-allowed" class="bg-[#0b0b0b] rounded px-3 border border-[#333] h-8 font-bold text-white text-xs cursor-not-allowed"
disabled disabled
> >
Variant Variant
@@ -23,8 +23,8 @@
v-for="num in 8" v-for="num in 8"
:key="num" :key="num"
:class="[ :class="[
'text-xs h-8 px-3 border border-[#271E37] font-bold', 'text-xs h-8 px-3 border border-[#333] font-bold rounded cursor-pointer hover:bg-[#222] transition-colors',
variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0D0716]' variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0b0b0b]'
]" ]"
@click=" @click="
() => { () => {

106
src/demo/Animations/MagnetDemo.vue
View File

@@ -1,67 +1,65 @@
<template> <template>
<div class="magnet-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <h2 class="demo-title-extra">Container</h2>
<h2 class="demo-title-extra">Container</h2>
<div class="demo-container"> <div class="demo-container">
<Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength"> <Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
<div class="magnet-container">Hover Me!</div> <div class="magnet-container">Hover Me!</div>
</Magnet> </Magnet>
</div> </div>
<h2 class="demo-title-extra">Link</h2> <h2 class="demo-title-extra">Link</h2>
<div class="demo-container"> <div class="demo-container">
<Magnet <Magnet
:key="rerenderKey + 1" :key="rerenderKey + 1"
:padding="Math.floor(padding / 2)" :padding="Math.floor(padding / 2)"
:disabled="disabled" :disabled="disabled"
:magnetStrength="magnetStrength" :magnetStrength="magnetStrength"
> >
<a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link"> <a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
Star Star
<span class="accent">Vue Bits</span> <span class="accent">Vue Bits</span>
on GitHub! on GitHub!
</a> </a>
</Magnet> </Magnet>
</div> </div>
<Customize> <Customize>
<PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" /> <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Padding" title="Padding"
v-model="padding" v-model="padding"
:min="0" :min="0"
:max="300" :max="300"
:step="10" :step="10"
value-unit="px" value-unit="px"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Strength" title="Strength"
v-model="magnetStrength" v-model="magnetStrength"
:min="1" :min="1"
:max="10" :max="10"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="magnet" /> <CodeExample :code-object="magnet" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="magnet.cli" /> <CliInstallation :command="magnet.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

30
src/demo/Animations/MagnetLinesDemo.vue
View File

@@ -1,23 +1,21 @@
<template> <template>
<div class="magnet-lines-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container overflow-hidden flex justify-center pb-4 items-center"> <MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
<MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" /> </div>
</div>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="magnetLines" /> <CodeExample :code-object="magnetLines" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="magnetLines.cli" /> <CliInstallation :command="magnetLines.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/demo/Animations/MetaBallsDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative h-[500px] overflow-hidden demo-container"> <div class="demo-container h-[500px]">
<MetaBalls <MetaBalls
:color="color" :color="color"
:cursorBallColor="color" :cursorBallColor="color"

147
src/demo/Animations/MetallicPaintDemo.vue
View File

@@ -1,91 +1,82 @@
<template> <template>
<div class="metallic-paint-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[500px] overflow-hidden">
<div class="demo-container relative h-[500px] overflow-hidden"> <MetallicPaint
<MetallicPaint v-if="imageData"
v-if="imageData" :key="rerenderKey"
:key="rerenderKey" :image-data="imageData"
:image-data="imageData" :params="{
:params="{ edge,
edge, patternBlur,
patternBlur, patternScale,
patternScale, refraction,
refraction, speed,
speed, liquid
liquid }"
}" />
/> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />
title="Edge"
v-model="edge"
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider <PreviewSlider
title="Pattern Scale" title="Pattern Scale"
v-model="patternScale" v-model="patternScale"
:min="1" :min="1"
:max="5" :max="5"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Pattern Blur" title="Pattern Blur"
v-model="patternBlur" v-model="patternBlur"
:min="0" :min="0"
:max="0.1" :max="0.1"
:step="0.001" :step="0.001"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Refraction" title="Refraction"
v-model="refraction" v-model="refraction"
:min="0" :min="0"
:max="0.1" :max="0.1"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Liquid" title="Liquid"
v-model="liquid" v-model="liquid"
:min="0" :min="0"
:max="1" :max="1"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Speed" title="Speed"
v-model="speed" v-model="speed"
:min="0" :min="0"
:max="1" :max="1"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="metallicPaint" /> <CodeExample :code-object="metallicPaint" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="metallicPaint.cli" /> <CliInstallation :command="metallicPaint.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

40
src/demo/Animations/NoiseDemo.vue
View File

@@ -1,29 +1,27 @@
<template> <template>
<div> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container overflow-hidden h-[400px]">
<div class="demo-container h-[400px] overflow-hidden"> <div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
<div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div> <Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
<Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" /> </div>
</div>
<Customize> <Customize>
<PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" /> <PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
<PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" /> <PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="noise" /> <CodeExample :code-object="noise" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="noise.cli" /> <CliInstallation :command="noise.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

116
src/demo/Animations/PixelTransitionDemo.vue
View File

@@ -1,74 +1,70 @@
<template> <template>
<div class="pixel-transition-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container min-h-[400px]">
<div <PixelTransition
class="demo-container flex flex-col items-center justify-center min-h-[400px] max-h-[400px] relative overflow-hidden" :key="key"
:grid-size="gridSize"
:pixel-color="pixelColor"
:animation-step-duration="animationStepDuration"
class-name="custom-pixel-card"
> >
<PixelTransition <template #firstContent>
:key="key" <img
:grid-size="gridSize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
:pixel-color="pixelColor" alt="Default"
:animation-step-duration="animationStepDuration" style="width: 100%; height: 100%; object-fit: cover"
class-name="custom-pixel-card" />
> </template>
<template #firstContent>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
alt="Default"
style="width: 100%; height: 100%; object-fit: cover"
/>
</template>
<template #secondContent> <template #secondContent>
<div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111"> <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111">
<p style="font-weight: 900; font-size: 3rem; color: #fff">Meow!</p> <p style="font-weight: 900; font-size: 3rem; color: #fff">Meow!</p>
</div> </div>
</template> </template>
</PixelTransition> </PixelTransition>
<div class="mt-2 text-[#a6a6a6]">Psst, hover the card!</div> <div class="mt-2 absolute bottom-[2em] text-[#a6a6a6]">Psst, hover the image!</div>
</div> </div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Grid Size" title="Grid Size"
v-model="gridSize" v-model="gridSize"
:min="2" :min="2"
:max="50" :max="50"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
width="200" width="200"
/> />
<PreviewSlider <PreviewSlider
title="Animation Duration" title="Animation Duration"
v-model="animationStepDuration" v-model="animationStepDuration"
:min="0.1" :min="0.1"
:max="2" :max="2"
:step="0.1" :step="0.1"
value-unit="s" value-unit="s"
@update:model-value="forceRerender" @update:model-value="forceRerender"
width="200" width="200"
/> />
<PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" /> <PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="pixelTransition" /> <CodeExample :code-object="pixelTransition" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="pixelTransition.cli" /> <CliInstallation :command="pixelTransition.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

94
src/demo/Animations/RibbonsDemo.vue
View File

@@ -1,61 +1,59 @@
<template> <template>
<div class="ribbons-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container" style="height: 500px; position: relative"> <div class="hover-text">Hover Me.</div>
<div class="hover-text">Hover Me.</div> <Ribbons
<Ribbons :base-thickness="baseThickness"
:base-thickness="baseThickness" :colors="colors"
:colors="colors" :speed-multiplier="speedMultiplier"
:speed-multiplier="speedMultiplier" :max-age="maxAge"
:max-age="maxAge" :enable-fade="enableFade"
:enable-fade="enableFade" :enable-shader-effect="enableWaves"
:enable-shader-effect="enableWaves" />
/> </div>
<Customize>
<div class="count-controls">
<span class="count-label">Count</span>
<button @click="removeColor" :disabled="colors.length <= 1" class="count-button">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
<span class="count-value">{{ colors.length }}</span>
<button @click="addColor" :disabled="colors.length >= 10" class="count-button">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div> </div>
<Customize> <PreviewSlider title="Thickness" v-model="baseThickness" :min="1" :max="60" :step="1" />
<div class="count-controls">
<span class="count-label">Count</span>
<button @click="removeColor" :disabled="colors.length <= 1" class="count-button">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
<span class="count-value">{{ colors.length }}</span>
<button @click="addColor" :disabled="colors.length >= 10" class="count-button">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<PreviewSlider title="Thickness" v-model="baseThickness" :min="1" :max="60" :step="1" /> <PreviewSlider title="Speed" v-model="speedMultiplier" :min="0.3" :max="0.7" :step="0.01" />
<PreviewSlider title="Speed" v-model="speedMultiplier" :min="0.3" :max="0.7" :step="0.01" /> <PreviewSlider title="Max Age" v-model="maxAge" :min="300" :max="1000" :step="100" />
<PreviewSlider title="Max Age" v-model="maxAge" :min="300" :max="1000" :step="100" /> <PreviewSwitch title="Enable Fade" v-model="enableFade" />
<PreviewSwitch title="Enable Fade" v-model="enableFade" /> <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
</Customize>
<PreviewSwitch title="Enable Waves" v-model="enableWaves" /> <PropTable :data="propData" />
</Customize>
<PropTable :data="propData" /> <Dependencies :dependency-list="['ogl']" />
</template>
<Dependencies :dependency-list="['ogl']" /> <template #code>
</template> <CodeExample :code-object="ribbons" />
</template>
<template #code> <template #cli>
<CodeExample :code-object="ribbons" /> <CliInstallation :command="ribbons.cli" />
</template> </template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="ribbons.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -180,6 +178,8 @@ const propData = [
} }
.demo-container { .demo-container {
position: relative;
height: 500px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }

52
src/demo/Animations/SplashCursorDemo.vue
View File

@@ -1,38 +1,36 @@
<template> <template>
<div class="splash-cursor-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container"> <span class="text-6xl text-center text-[#333] font-black select-none">Move Your Cursor</span>
<span class="text-6xl text-center text-[#222] font-black select-none">Move Your Cursor</span> </div>
</div>
<Customize> <Customize>
<PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" /> <PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" />
<PreviewSlider title="Density Dissipation" v-model="densityDissipation" :min="1" :max="10" :step="0.5" /> <PreviewSlider title="Density Dissipation" v-model="densityDissipation" :min="1" :max="10" :step="0.5" />
<PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" /> <PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="splashCursor" /> <CodeExample :code-object="splashCursor" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="splashCursor.cli" /> <CliInstallation :command="splashCursor.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
<SplashCursor <SplashCursor
:key="rerenderKey" :key="rerenderKey"
:SIM_RESOLUTION="simResolution" :SIM_RESOLUTION="simResolution"
:DENSITY_DISSIPATION="densityDissipation" :DENSITY_DISSIPATION="densityDissipation"
:SPLAT_FORCE="splatForce" :SPLAT_FORCE="splatForce"
/> />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

236
src/demo/Components/CardSwapDemo.vue
View File

@@ -1,131 +1,129 @@
<template> <template>
<div class="card-swap-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
<div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative"> <div
<div class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4"
class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4" >
> <h2 class="text-2xl md:text-3xl lg:text-4xl mb-4 font-medium leading-tight pl-0 lg:pl-24">
<h2 class="text-2xl md:text-3xl lg:text-4xl mb-4 font-medium leading-tight pl-0 lg:pl-24"> Card stacks have never
Card stacks have never <span class="inline lg:block">looked so good</span>
<span class="inline lg:block">looked so good</span> </h2>
</h2>
<p class="text-lg lg:text-xl mb-4 font-normal leading-tight text-gray-400 pl-0 lg:pl-24"> <p class="text-lg lg:text-xl mb-4 font-normal leading-tight text-gray-400 pl-0 lg:pl-24">
Just look at it go! Just look at it go!
</p> </p>
</div>
<div class="w-full lg:w-1/2 h-full lg:h-full relative">
<CardSwap
:key="rerenderKey"
:width="500"
:height="400"
:card-distance="cardDistance"
:vertical-distance="verticalDistance"
:delay="delay"
:skew-amount="skewAmount"
:easing="easing"
:pause-on-hover="pauseOnHover"
@card-click="handleCardClick"
>
<template #card-0>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
<div class="m-2 flex items-center">
<i class="pi pi-circle-fill mr-2"></i>
<span>Smooth</span>
</div>
</div>
<div class="relative p-2">
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
<source
src="https://cdn.dribbble.com/userupload/7053861/file/original-7956be57144058795db6bb24875bdab9.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</template>
<template #card-1>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
<div class="m-2 flex items-center">
<i class="pi pi-code mr-2"></i>
<span>Reliable</span>
</div>
</div>
<div class="relative p-2">
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
<source
src="https://cdn.dribbble.com/userupload/7078020/file/original-b071e9063d9e3ba86a85a61b9d5a7c42.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</template>
<template #card-2>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
<div class="m-2 flex items-center">
<i class="pi pi-sliders-h mr-2"></i>
<span>Customizable</span>
</div>
</div>
<div class="relative p-2">
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
<source
src="https://cdn.dribbble.com/userupload/7098541/file/original-0b063b12ca835421580e6034368ad95a.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</template>
</CardSwap>
</div>
</div> </div>
<Customize> <div class="w-full lg:w-1/2 h-full lg:h-full relative">
<PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" @update:model-value="forceRerender" /> <CardSwap
:key="rerenderKey"
<PreviewSlider title="Card Distance" v-model="cardDistance" :min="30" :max="100" :step="5" /> :width="500"
:height="400"
<PreviewSlider title="Vertical Distance" v-model="verticalDistance" :min="40" :max="120" :step="5" /> :card-distance="cardDistance"
:vertical-distance="verticalDistance"
<PreviewSlider title="Delay (ms)" v-model="delay" :min="3000" :max="8000" :step="500" /> :delay="delay"
:skew-amount="skewAmount"
<PreviewSlider title="Skew Amount" v-model="skewAmount" :min="0" :max="12" :step="1" /> :easing="easing"
:pause-on-hover="pauseOnHover"
<button @card-click="handleCardClick"
class="text-xs bg-[#111] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors"
@click="toggleEasing"
> >
Easing: <template #card-0>
<span class="text-zinc-400">&nbsp;{{ easing }}</span> <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
</button> <div class="m-2 flex items-center">
</Customize> <i class="pi pi-circle-fill mr-2"></i>
<PropTable :data="propData" /> <span>Smooth</span>
</div>
</div>
<Dependencies :dependency-list="['gsap']" /> <div class="relative p-2">
</template> <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
<source
src="https://cdn.dribbble.com/userupload/7053861/file/original-7956be57144058795db6bb24875bdab9.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</template>
<template #code> <template #card-1>
<CodeExample :code-object="cardSwap" /> <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
</template> <div class="m-2 flex items-center">
<i class="pi pi-code mr-2"></i>
<template #cli> <span>Reliable</span>
<CliInstallation :command="cardSwap.cli" /> </div>
</template> </div>
</TabbedLayout>
</div> <div class="relative p-2">
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
<source
src="https://cdn.dribbble.com/userupload/7078020/file/original-b071e9063d9e3ba86a85a61b9d5a7c42.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</template>
<template #card-2>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
<div class="m-2 flex items-center">
<i class="pi pi-sliders-h mr-2"></i>
<span>Customizable</span>
</div>
</div>
<div class="relative p-2">
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
<source
src="https://cdn.dribbble.com/userupload/7098541/file/original-0b063b12ca835421580e6034368ad95a.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</template>
</CardSwap>
</div>
</div>
<Customize>
<PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" @update:model-value="forceRerender" />
<PreviewSlider title="Card Distance" v-model="cardDistance" :min="30" :max="100" :step="5" />
<PreviewSlider title="Vertical Distance" v-model="verticalDistance" :min="40" :max="120" :step="5" />
<PreviewSlider title="Delay (ms)" v-model="delay" :min="3000" :max="8000" :step="500" />
<PreviewSlider title="Skew Amount" v-model="skewAmount" :min="0" :max="12" :step="1" />
<button
class="text-xs bg-[#111] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors"
@click="toggleEasing"
>
Easing:
<span class="text-zinc-400">&nbsp;{{ easing }}</span>
</button>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
<template #code>
<CodeExample :code-object="cardSwap" />
</template>
<template #cli>
<CliInstallation :command="cardSwap.cli" />
</template>
</TabbedLayout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

104
src/demo/Components/CarouselDemo.vue
View File

@@ -1,67 +1,65 @@
<template> <template>
<div class="carousel-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
<div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center"> <Carousel
<Carousel :key="rerenderKey"
:key="rerenderKey" :base-width="width"
:base-width="width" :autoplay="autoplay"
:autoplay="autoplay" :autoplay-delay="autoplayDelay"
:autoplay-delay="autoplayDelay" :pause-on-hover="pauseOnHover"
:pause-on-hover="pauseOnHover" :loop="loop"
:loop="loop" :round="round"
:round="round" />
/> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Width" title="Width"
v-model="width" v-model="width"
:min="250" :min="250"
:max="330" :max="330"
:step="10" :step="10"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" /> <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
<PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" /> <PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" />
<PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" /> <PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Delay" title="Delay"
v-model="autoplayDelay" v-model="autoplayDelay"
:min="1000" :min="1000"
:max="4000" :max="4000"
:step="1000" :step="1000"
:disabled="!autoplay" :disabled="!autoplay"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSwitch <PreviewSwitch
title="Pause On Hover" title="Pause On Hover"
v-model="pauseOnHover" v-model="pauseOnHover"
:disabled="!autoplay" :disabled="!autoplay"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" /> <Dependencies :dependency-list="['motion-v']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="carousel" /> <CodeExample :code-object="carousel" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="carousel.cli" /> <CliInstallation :command="carousel.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

120
src/demo/Components/CircularGalleryDemo.vue
View File

@@ -1,75 +1,73 @@
<template> <template>
<div class="circular-gallery-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container h-[500px]">
<div class="demo-container h-[500px] p-0 overflow-hidden"> <CircularGallery
<CircularGallery :key="rerenderKey"
:key="rerenderKey" :bend="bend"
:bend="bend" :border-radius="borderRadius"
:border-radius="borderRadius" :scroll-speed="scrollSpeed"
:scroll-speed="scrollSpeed" :scroll-ease="scrollEase"
:scroll-ease="scrollEase" :text-color="textColor"
:text-color="textColor" :font="font"
:font="font" />
/> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Bend Level" title="Bend Level"
v-model="bend" v-model="bend"
:min="-10" :min="-10"
:max="10" :max="10"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Border Radius" title="Border Radius"
v-model="borderRadius" v-model="borderRadius"
:min="0" :min="0"
:max="0.5" :max="0.5"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Scroll Speed" title="Scroll Speed"
v-model="scrollSpeed" v-model="scrollSpeed"
:min="0.5" :min="0.5"
:max="5" :max="5"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Scroll Ease" title="Scroll Ease"
v-model="scrollEase" v-model="scrollEase"
:min="0.01" :min="0.01"
:max="0.15" :max="0.15"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" /> <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
<PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" /> <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" /> <Dependencies :dependency-list="['ogl']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="circularGallery" /> <CodeExample :code-object="circularGallery" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="circularGallery.cli" /> <CliInstallation :command="circularGallery.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

44
src/demo/Components/DecayCardDemo.vue
View File

@@ -1,31 +1,29 @@
<template> <template>
<div class="decay-card-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container" style="overflow: hidden">
<div class="demo-container" style="overflow: hidden"> <DecayCard>
<DecayCard> <div class="text-[2rem]">
<div class="text-[2rem]"> Decay
Decay <br />
<br /> Card
Card </div>
</div> </DecayCard>
</DecayCard> </div>
</div>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="decayCard" /> <CodeExample :code-object="decayCard" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="decayCard.cli" /> <CliInstallation :command="decayCard.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

166
src/demo/Components/DockDemo.vue
View File

@@ -1,86 +1,82 @@
<template> <template>
<div class="dock-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container" style="min-height: 400px; position: relative"> <Dock
<div class="demo-content"> :key="rerenderKey"
<Dock :items="items"
:key="rerenderKey" :panel-height="panelHeight"
:items="items" :base-item-size="baseItemSize"
:panel-height="panelHeight" :magnification="magnification"
:base-item-size="baseItemSize" :distance="200"
:magnification="magnification" :dock-height="256"
:distance="200" :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
:dock-height="256" />
:spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
/>
</div>
<div <div
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none" class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
> >
Try It! Try It!
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Background Height" title="Background Height"
:min="30" :min="30"
:max="200" :max="200"
:step="10" :step="10"
:model-value="panelHeight" :model-value="panelHeight"
@update:model-value=" @update:model-value="
(val: number) => { (val: number) => {
panelHeight = val; panelHeight = val;
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Item Size" title="Item Size"
:min="20" :min="20"
:max="60" :max="60"
:step="10" :step="10"
:model-value="baseItemSize" :model-value="baseItemSize"
@update:model-value=" @update:model-value="
(val: number) => { (val: number) => {
baseItemSize = val; baseItemSize = val;
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Magnification" title="Magnification"
:min="50" :min="50"
:max="100" :max="100"
:step="10" :step="10"
:model-value="magnification" :model-value="magnification"
@update:model-value=" @update:model-value="
(val: number) => { (val: number) => {
magnification = val; magnification = val;
forceRerender(); forceRerender();
} }
" "
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" /> <Dependencies :dependency-list="['motion-v']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="dock" /> <CodeExample :code-object="dock" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="dock.cli" /> <CliInstallation :command="dock.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -179,29 +175,7 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
display: flex; min-height: 400px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 2rem; padding: 2rem;
} }
.demo-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
width: 100%;
max-width: 800px;
}
.demo-title {
font-size: 2rem;
font-weight: 900;
color: #271e37;
margin: 0;
text-align: center;
}
</style> </style>

67
src/demo/Components/ElasticSliderDemo.vue
View File

@@ -1,39 +1,37 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="space-y-8"> <div class="demo-section">
<div class="demo-section"> <div class="demo-container relative min-h-[200px] flex items-center justify-center">
<div class="demo-container relative min-h-[200px] flex items-center justify-center"> <ElasticSlider />
<ElasticSlider />
</div>
</div> </div>
<div class="demo-section">
<h2 class="demo-title-extra">Using Steps</h2>
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
<ElasticSlider :is-stepped="true" :step-size="10" />
</div>
</div>
<div class="demo-section">
<h2 class="demo-title-extra">Custom Range & Icons</h2>
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
<ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
<template #left-icon>
<i class="pi pi-thumbs-down text-xl"></i>
</template>
<template #right-icon>
<i class="pi pi-thumbs-up text-xl"></i>
</template>
</ElasticSlider>
</div>
</div>
<PropTable :data="propData" />
</div> </div>
<div class="demo-section">
<h2 class="demo-title-extra">Using Steps</h2>
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
<ElasticSlider :is-stepped="true" :step-size="10" />
</div>
</div>
<div class="demo-section">
<h2 class="demo-title-extra">Custom Range & Icons</h2>
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
<ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
<template #left-icon>
<i class="pi pi-thumbs-down text-xl"></i>
</template>
<template #right-icon>
<i class="pi pi-thumbs-up text-xl"></i>
</template>
</ElasticSlider>
</div>
</div>
<PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
@@ -112,11 +110,4 @@ const propData = [
min-height: 300px; min-height: 300px;
overflow: hidden; overflow: hidden;
} }
.demo-title-extra {
font-size: 1.25rem;
font-weight: 500;
color: #fff;
margin-bottom: 0.5rem;
}
</style> </style>

32
src/demo/Components/FlowingMenuDemo.vue
View File

@@ -1,25 +1,23 @@
<template> <template>
<div class="flowing-menu-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
<div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0"> <FlowingMenu :items="demoItems" />
<FlowingMenu :items="demoItems" /> </div>
</div>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="flowingMenu" /> <CodeExample :code-object="flowingMenu" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="flowingMenu.cli" /> <CliInstallation :command="flowingMenu.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

160
src/demo/Components/FlyingPostersDemo.vue
View File

@@ -1,97 +1,95 @@
<template> <template>
<div class="flying-posters-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
<div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center"> <FlyingPosters
<FlyingPosters :key="rerenderKey"
:key="rerenderKey" :items="items"
:items="items" :plane-width="planeWidth"
:plane-width="planeWidth" :plane-height="planeHeight"
:plane-height="planeHeight" :distortion="distortion"
:distortion="distortion" :scroll-ease="scrollEase"
:scroll-ease="scrollEase" :camera-fov="cameraFov"
:camera-fov="cameraFov" :camera-z="cameraZ"
:camera-z="cameraZ" class="h-full w-full"
class="h-full w-full" />
/>
<div <div
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none" class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
> >
Scroll. Scroll.
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Plane Width" title="Plane Width"
v-model="planeWidth" v-model="planeWidth"
:min="200" :min="200"
:max="400" :max="400"
:step="20" :step="20"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Plane Height" title="Plane Height"
v-model="planeHeight" v-model="planeHeight"
:min="200" :min="200"
:max="400" :max="400"
:step="20" :step="20"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Distortion" title="Distortion"
v-model="distortion" v-model="distortion"
:min="0" :min="0"
:max="10" :max="10"
:step="0.5" :step="0.5"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Scroll Ease" title="Scroll Ease"
v-model="scrollEase" v-model="scrollEase"
:min="0.005" :min="0.005"
:max="0.05" :max="0.05"
:step="0.005" :step="0.005"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Camera FOV" title="Camera FOV"
v-model="cameraFov" v-model="cameraFov"
:min="30" :min="30"
:max="90" :max="90"
:step="5" :step="5"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Camera Z" title="Camera Z"
v-model="cameraZ" v-model="cameraZ"
:min="10" :min="10"
:max="40" :max="40"
:step="2" :step="2"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" /> <Dependencies :dependency-list="['ogl']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="flyingPosters" /> <CodeExample :code-object="flyingPosters" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="flyingPosters.cli" /> <CliInstallation :command="flyingPosters.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

36
src/demo/Components/GlassIconsDemo.vue
View File

@@ -1,27 +1,25 @@
<template> <template>
<div class="glass-icons-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container" style="height: 500px; overflow: hidden">
<div class="demo-container" style="height: 500px; overflow: hidden"> <GlassIcons :items="items" class="my-glass-icons" />
<GlassIcons :items="items" class="my-glass-icons" /> </div>
</div>
<Customize> <Customize>
<PreviewSwitch title="Colorful" v-model="colorful" /> <PreviewSwitch title="Colorful" v-model="colorful" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="glassIcons" /> <CodeExample :code-object="glassIcons" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="glassIcons.cli" /> <CliInstallation :command="glassIcons.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

106
src/demo/Components/GooeyNavDemo.vue
View File

@@ -1,64 +1,62 @@
<template> <template>
<div class="gooey-nav-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div
<div class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center"
class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center" >
> <GooeyNav
<GooeyNav :key="rerenderKey"
:key="rerenderKey" :items="navItems"
:items="navItems" :animation-time="500"
:animation-time="500" :particle-count="particleCount"
:particle-count="particleCount" :particle-distances="[90, 0]"
:particle-distances="[90, 0]" :particle-r="particleR"
:particle-r="particleR" :time-variance="timeVariance"
:time-variance="timeVariance" :initial-active-index="0"
:initial-active-index="0" :colors="[1, 2, 3, 1, 2, 3, 1, 4]"
:colors="[1, 2, 3, 1, 2, 3, 1, 4]" />
/> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Particle Count" title="Particle Count"
v-model="particleCount" v-model="particleCount"
:min="1" :min="1"
:max="50" :max="50"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Animation Variance" title="Animation Variance"
v-model="timeVariance" v-model="timeVariance"
:min="0" :min="0"
:max="2000" :max="2000"
:step="100" :step="100"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Radius Factor" title="Radius Factor"
v-model="particleR" v-model="particleR"
:min="0" :min="0"
:max="1000" :max="1000"
:step="100" :step="100"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="gooeyNav" /> <CodeExample :code-object="gooeyNav" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="gooeyNav.cli" /> <CliInstallation :command="gooeyNav.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

74
src/demo/Components/InfiniteScrollDemo.vue
View File

@@ -1,52 +1,50 @@
<template> <template>
<div class="infinite-scroll-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div
<div class="demo-container"
class="demo-container" style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center"
style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center" >
> <InfiniteScroll
<InfiniteScroll :items="items"
:items="items" :is-tilted="isTilted"
:is-tilted="isTilted" :tilt-direction="tiltDirection"
:tilt-direction="tiltDirection" :autoplay="autoplay"
:autoplay="autoplay" :autoplay-speed="1"
:autoplay-speed="1" :autoplay-direction="autoplayDirection"
:autoplay-direction="autoplayDirection" :pause-on-hover="pauseOnHover"
:pause-on-hover="pauseOnHover" />
/> </div>
</div>
<Customize> <Customize>
<PreviewSwitch title="Tilt" v-model="isTilted" /> <PreviewSwitch title="Tilt" v-model="isTilted" />
<PreviewSelect v-if="isTilted" title="Tilt Direction" :options="tiltOptions" v-model="tiltDirection" /> <PreviewSelect v-if="isTilted" title="Tilt Direction" :options="tiltOptions" v-model="tiltDirection" />
<hr style="margin: 1rem 0; border-color: #222" /> <hr style="margin: 1rem 0; border-color: #222" />
<PreviewSwitch title="Autoplay" v-model="autoplay" /> <PreviewSwitch title="Autoplay" v-model="autoplay" />
<template v-if="autoplay"> <template v-if="autoplay">
<PreviewSelect title="Autoplay Direction" :options="autoplayOptions" v-model="autoplayDirection" /> <PreviewSelect title="Autoplay Direction" :options="autoplayOptions" v-model="autoplayDirection" />
<PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" /> <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
</template> </template>
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="infiniteScroll" /> <CodeExample :code-object="infiniteScroll" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="infiniteScroll.cli" /> <CliInstallation :command="infiniteScroll.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

149
src/demo/Components/MasonryDemo.vue
View File

@@ -1,88 +1,86 @@
<template> <template>
<div class="masonry-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container" style="height: 900px; overflow: hidden">
<div class="demo-container" style="height: 900px; overflow: hidden"> <RefreshButton @refresh="forceRerender" />
<RefreshButton @refresh="forceRerender" />
<Masonry <Masonry
:key="rerenderKey" :key="rerenderKey"
:items="sampleItems" :items="sampleItems"
:ease="ease" :ease="ease"
:duration="duration" :duration="duration"
:stagger="stagger" :stagger="stagger"
:animate-from="animateFrom" :animate-from="animateFrom"
:scale-on-hover="scaleOnHover" :scale-on-hover="scaleOnHover"
:hover-scale="hoverScale" :hover-scale="hoverScale"
:blur-to-focus="blurToFocus" :blur-to-focus="blurToFocus"
:color-shift-on-hover="colorShiftOnHover" :color-shift-on-hover="colorShiftOnHover"
class="masonry-demo-container" class="masonry-demo-container"
/> />
</div> </div>
<Customize> <Customize>
<PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" /> <PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" />
<PreviewSwitch title="Blur to Focus" v-model="blurToFocus" @update:model-value="forceRerender" /> <PreviewSwitch title="Blur to Focus" v-model="blurToFocus" @update:model-value="forceRerender" />
<PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" /> <PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" />
<PreviewSelect <PreviewSelect
title="Animation Direction" title="Animation Direction"
v-model="animateFrom" v-model="animateFrom"
:options="[ :options="[
{ label: 'Bottom', value: 'bottom' }, { label: 'Bottom', value: 'bottom' },
{ label: 'Top', value: 'top' }, { label: 'Top', value: 'top' },
{ label: 'Left', value: 'left' }, { label: 'Left', value: 'left' },
{ label: 'Right', value: 'right' }, { label: 'Right', value: 'right' },
{ label: 'Center', value: 'center' }, { label: 'Center', value: 'center' },
{ label: 'Random', value: 'random' } { label: 'Random', value: 'random' }
]" ]"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Duration (s)" title="Duration (s)"
v-model="duration" v-model="duration"
:min="0.1" :min="0.1"
:max="2" :max="2"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Stagger Delay (s)" title="Stagger Delay (s)"
v-model="stagger" v-model="stagger"
:min="0.01" :min="0.01"
:max="0.2" :max="0.2"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Hover Scale" title="Hover Scale"
v-model="hoverScale" v-model="hoverScale"
:min="0.8" :min="0.8"
:max="1.2" :max="1.2"
:step="0.05" :step="0.05"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="masonry" /> <CodeExample :code-object="masonry" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="masonry.cli" /> <CliInstallation :command="masonry.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -167,10 +165,3 @@ const propData = [
} }
]; ];
</script> </script>
<style scoped>
.masonry-demo-container {
width: 100%;
height: 100%;
}
</style>

56
src/demo/Components/PixelCardDemo.vue
View File

@@ -1,38 +1,34 @@
<template> <template>
<div class="pixel-card-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
<div <PixelCard :key="rerenderKey" :variant="selectedVariant">
class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center" <div class="absolute mix-blend-screen z-10 inset-0 flex items-center justify-center w-full h-full">
> <h2 class="text-5xl font-black select-none text-[#222]">Hover Me.</h2>
<PixelCard :key="rerenderKey" :variant="selectedVariant"> </div>
<div class="absolute mix-blend-screen z-10 inset-0 flex items-center justify-center w-full h-full"> </PixelCard>
<h2 class="text-5xl font-black select-none text-[#222]">Hover Me.</h2> </div>
</div>
</PixelCard>
</div>
<Customize> <Customize>
<PreviewSelect <PreviewSelect
title="Animation Variant" title="Animation Variant"
:options="variantOptions" :options="variantOptions"
v-model="selectedVariant" v-model="selectedVariant"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="pixelCard" /> <CodeExample :code-object="pixelCard" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="pixelCard.cli" /> <CliInstallation :command="pixelCard.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

80
src/demo/Components/ProfileCardDemo.vue
View File

@@ -1,48 +1,46 @@
<template> <template>
<div class="profile-card-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
<div class="demo-container" style="height: 700px; overflow: hidden; position: relative"> <ProfileCard
<ProfileCard :key="rerenderKey"
:key="rerenderKey" name="Javi A. Torres"
name="Javi A. Torres" title="Software Engineer"
title="Software Engineer" handle="javicodes"
handle="javicodes" status="Online"
status="Online" contact-text="Contact Me"
contact-text="Contact Me" avatar-url="/assets/person.png"
avatar-url="/assets/person.png" :icon-url="showIcon ? '/assets/iconpattern.png' : ''"
:icon-url="showIcon ? '/assets/iconpattern.png' : ''" :show-user-info="showUserInfo"
:show-user-info="showUserInfo" :show-behind-gradient="showBehindGradient"
:show-behind-gradient="showBehindGradient" grain-url="/assets/grain.webp"
grain-url="/assets/grain.webp" :behind-gradient="customBehindGradient"
:behind-gradient="customBehindGradient" :inner-gradient="customInnerGradient"
:inner-gradient="customInnerGradient" @contact-click="handleContactClick"
@contact-click="handleContactClick" />
/> </div>
</div>
<Customize> <Customize>
<button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button> <button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
<PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" /> <PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" />
<PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" /> <PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" />
<PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" /> <PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="profileCard" /> <CodeExample :code-object="profileCard" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="profileCard.cli" /> <CliInstallation :command="profileCard.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -208,12 +206,4 @@ const propData = [
.randomize-btn:hover { .randomize-btn:hover {
background: #222; background: #222;
} }
.demo-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
</style> </style>

70
src/demo/Components/SpotlightCardDemo.vue
View File

@@ -1,49 +1,47 @@
<template> <template>
<div class="spotlight-card-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative py-10">
<div class="demo-container relative py-10"> <SpotlightCard class-name="custom-spotlight-card">
<SpotlightCard class-name="custom-spotlight-card"> <div class="flex h-full flex-col items-start justify-center">
<div class="flex h-full flex-col items-start justify-center"> <i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
<i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
<h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Boost Your Experience</h3> <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Boost Your Experience</h3>
<p class="text-sm text-zinc-400"> <p class="text-sm text-zinc-400">
Get exclusive benefits, features & 24/7 support as a permanent club member. Get exclusive benefits, features & 24/7 support as a permanent club member.
</p> </p>
</div> </div>
</SpotlightCard> </SpotlightCard>
</div> </div>
<h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2> <h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2>
<div class="demo-container relative py-10"> <div class="demo-container relative py-10">
<SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)"> <SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)">
<div class="flex h-full flex-col items-start justify-center"> <div class="flex h-full flex-col items-start justify-center">
<i class="pi pi-lock text-3xl mb-3 text-white"></i> <i class="pi pi-lock text-3xl mb-3 text-white"></i>
<h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Enhanced Security</h3> <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Enhanced Security</h3>
<p class="text-sm text-zinc-400"> <p class="text-sm text-zinc-400">
Our state of the art software offers peace of mind through strict security measures. Our state of the art software offers peace of mind through strict security measures.
</p> </p>
</div> </div>
</SpotlightCard> </SpotlightCard>
</div> </div>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="spotlightCard" /> <CodeExample :code-object="spotlightCard" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="spotlightCard.cli" /> <CliInstallation :command="spotlightCard.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

80
src/demo/Components/TiltedCardDemo.vue
View File

@@ -1,53 +1,51 @@
<template> <template>
<div class="tilted-card-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden"> <TiltedCard
<TiltedCard image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58" alt-text="Kendrick Lamar - GNX Album Cover"
alt-text="Kendrick Lamar - GNX Album Cover" caption-text="Kendrick Lamar - GNX"
caption-text="Kendrick Lamar - GNX" container-height="300px"
container-height="300px" container-width="300px"
container-width="300px" image-height="300px"
image-height="300px" image-width="300px"
image-width="300px" :rotate-amplitude="rotateAmplitude"
:rotate-amplitude="rotateAmplitude" :scale-on-hover="scaleOnHover"
:scale-on-hover="scaleOnHover" :show-mobile-warning="false"
:show-mobile-warning="false" :show-tooltip="showTooltip"
:show-tooltip="showTooltip" :display-overlay-content="displayOverlayContent"
:display-overlay-content="displayOverlayContent" :overlay-content="displayOverlayContent"
:overlay-content="displayOverlayContent" >
> <template #overlay>
<template #overlay> <p class="tilted-card-demo-text">Kendrick Lamar - GNX</p>
<p class="tilted-card-demo-text">Kendrick Lamar - GNX</p> </template>
</template> </TiltedCard>
</TiltedCard> </div>
</div>
<Customize> <Customize>
<PreviewSlider title="Rotate Amplitude" v-model="rotateAmplitude" :min="0" :max="30" :step="1" /> <PreviewSlider title="Rotate Amplitude" v-model="rotateAmplitude" :min="0" :max="30" :step="1" />
<PreviewSlider title="Scale on Hover" v-model="scaleOnHover" :min="1" :max="1.5" :step="0.05" /> <PreviewSlider title="Scale on Hover" v-model="scaleOnHover" :min="1" :max="1.5" :step="0.05" />
<PreviewSwitch title="Show Tooltip" v-model="showTooltip" /> <PreviewSwitch title="Show Tooltip" v-model="showTooltip" />
<PreviewSwitch title="Show Overlay Content" v-model="displayOverlayContent" /> <PreviewSwitch title="Show Overlay Content" v-model="displayOverlayContent" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" /> <Dependencies :dependency-list="['motion-v']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="tiltedCard" /> <CodeExample :code-object="tiltedCard" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="tiltedCard.cli" /> <CliInstallation :command="tiltedCard.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

136
src/demo/TextAnimations/AsciiTextDemo.vue
View File

@@ -1,77 +1,75 @@
<template> <template>
<div class="ascii-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container"> <AsciiText
<AsciiText :key="rerenderKey"
:key="rerenderKey" :text="text"
:text="text" :ascii-font-size="asciiFontSize"
:ascii-font-size="asciiFontSize" :text-font-size="textFontSize"
:text-font-size="textFontSize" :text-color="textColor"
:text-color="textColor" :plane-base-height="planeBaseHeight"
:plane-base-height="planeBaseHeight" :enable-waves="enableWaves"
:enable-waves="enableWaves" />
/> </div>
<Customize>
<PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
<PreviewSlider
title="ASCII Font Size"
v-model="asciiFontSize"
:min="2"
:max="20"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Text Font Size"
v-model="textFontSize"
:min="100"
:max="400"
:step="25"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Base Height"
v-model="planeBaseHeight"
:min="4"
:max="16"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
<div class="flex gap-2 flex-wrap">
<button
v-for="color in colorOptions"
:key="color.name"
class="text-xs cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#333] text-white h-8 px-3 transition-colors"
:class="{ 'bg-[#333]': textColor === color.value }"
@click="changeColor(color.value)"
>
{{ color.name }}
</button>
</div> </div>
</Customize>
<Customize> <PropTable :data="propData" />
<PreviewText title="Text" v-model="text" @update:model-value="forceRerender" /> <Dependencies :dependency-list="['three', '@types/three']" />
</template>
<PreviewSlider <template #code>
title="ASCII Font Size" <CodeExample :code-object="asciiText" />
v-model="asciiFontSize" </template>
:min="2"
:max="20"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider <template #cli>
title="Text Font Size" <CliInstallation :command="asciiText.cli" />
v-model="textFontSize" </template>
:min="100" </TabbedLayout>
:max="400"
:step="25"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Base Height"
v-model="planeBaseHeight"
:min="4"
:max="16"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
<div class="flex gap-2 flex-wrap">
<button
v-for="color in colorOptions"
:key="color.name"
class="text-xs cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#333] text-white h-8 px-3 transition-colors"
:class="{ 'bg-[#333]': textColor === color.value }"
@click="changeColor(color.value)"
>
{{ color.name }}
</button>
</div>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['three', '@types/three']" />
</template>
<template #code>
<CodeExample :code-object="asciiText" />
</template>
<template #cli>
<CliInstallation :command="asciiText.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

154
src/demo/TextAnimations/BlurTextDemo.vue
View File

@@ -1,91 +1,89 @@
<template> <template>
<div class="blur-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative min-h-[400px] overflow-hidden">
<div class="demo-container relative min-h-[400px] overflow-hidden"> <RefreshButton @refresh="forceRerender" />
<RefreshButton @refresh="forceRerender" />
<BlurText <BlurText
:key="rerenderKey" :key="rerenderKey"
text="Isn't this so cool?!" text="Isn't this so cool?!"
:delay="delay" :delay="delay"
class-name="text-3xl md:text-6xl font-bold text-center" class-name="blur-text-demo"
:animate-by="animateBy" :animate-by="animateBy"
:direction="direction" :direction="direction"
:threshold="threshold" :threshold="threshold"
:root-margin="rootMargin" :root-margin="rootMargin"
:step-duration="stepDuration" :step-duration="stepDuration"
@animation-complete=" @animation-complete="
() => { () => {
showCallback && showToast(); showCallback && showToast();
} }
" "
/> />
</div>
<Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
<div class="flex gap-4 flex-wrap">
<button
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
@click="toggleAnimateBy"
>
Animate By:
<span class="text-[#a1a1aa]">&nbsp;{{ animateBy }}</span>
</button>
<button
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
@click="toggleDirection"
>
Direction:
<span class="text-[#a1a1aa]">&nbsp;{{ direction }}</span>
</button>
</div> </div>
<Customize> <PreviewSlider
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" /> title="Delay (ms)"
v-model="delay"
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<div class="flex gap-4 flex-wrap"> <PreviewSlider
<button title="Step Duration (s)"
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors" v-model="stepDuration"
@click="toggleAnimateBy" :min="0.1"
> :max="1"
Animate By: :step="0.05"
<span class="text-[#a1a1aa]">&nbsp;{{ animateBy }}</span> @update:model-value="forceRerender"
</button> />
<button <PreviewSlider
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors" title="Threshold"
@click="toggleDirection" v-model="threshold"
> :min="0.1"
Direction: :max="1"
<span class="text-[#a1a1aa]">&nbsp;{{ direction }}</span> :step="0.1"
</button> @update:model-value="forceRerender"
</div> />
</Customize>
<PreviewSlider <PropTable :data="propData" />
title="Delay (ms)"
v-model="delay"
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider <Dependencies :dependency-list="['motion-v']" />
title="Step Duration (s)" </template>
v-model="stepDuration"
:min="0.1"
:max="1"
:step="0.05"
@update:model-value="forceRerender"
/>
<PreviewSlider <template #code>
title="Threshold" <CodeExample :code-object="blurText" />
v-model="threshold" </template>
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" /> <template #cli>
<CliInstallation :command="blurText.cli" />
<Dependencies :dependency-list="['motion-v']" /> </template>
</template> </TabbedLayout>
<template #code>
<CodeExample :code-object="blurText" />
</template>
<template #cli>
<CliInstallation :command="blurText.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

82
src/demo/TextAnimations/CircularTextDemo.vue
View File

@@ -1,52 +1,50 @@
<template> <template>
<div class="circular-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
<div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center"> <CircularText
<CircularText :key="rerenderKey"
:key="rerenderKey" text="VUE * BITS * IS * AWESOME * "
text="VUE * BITS * IS * AWESOME * " :spin-duration="spinDuration"
:spin-duration="spinDuration" :on-hover="onHover"
:on-hover="onHover" class-name="text-blue-500"
class-name="text-blue-500" />
/> </div>
<Customize>
<div class="flex gap-4 flex-wrap">
<button
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
@click="toggleOnHover"
>
On Hover:
<span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span>
</button>
</div> </div>
<Customize> <PreviewSlider
<div class="flex gap-4 flex-wrap"> title="Spin Duration (s)"
<button v-model="spinDuration"
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors" :min="1"
@click="toggleOnHover" :max="50"
> :step="1"
On Hover: @update:model-value="forceRerender"
<span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span> />
</button> </Customize>
</div>
<PreviewSlider <PropTable :data="propData" />
title="Spin Duration (s)"
v-model="spinDuration"
:min="1"
:max="50"
:step="1"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" /> <Dependencies :dependency-list="['motion-v']" />
</template>
<Dependencies :dependency-list="['motion-v']" /> <template #code>
</template> <CodeExample :code-object="circularText" />
</template>
<template #code> <template #cli>
<CodeExample :code-object="circularText" /> <CliInstallation :command="circularText.cli" />
</template> </template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="circularText.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

120
src/demo/TextAnimations/CurvedLoopDemo.vue
View File

@@ -1,73 +1,71 @@
<template> <template>
<div class="curved-loop-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[500px] overflow-hidden p-0">
<div class="demo-container relative h-[500px] overflow-hidden p-0"> <CurvedLoop
<CurvedLoop :key="rerenderKey"
:key="rerenderKey" :marquee-text="marqueeText"
:marquee-text="marqueeText" :speed="speed"
:speed="speed" :curve-amount="curveAmount"
:curve-amount="curveAmount" :interactive="interactive"
:interactive="interactive" />
</div>
<Customize>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Marquee Text</label>
<input
v-model="marqueeText"
type="text"
placeholder="Enter text..."
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
@input="forceRerender"
/> />
</div> </div>
<Customize> <PreviewSlider
<div class="mb-4"> title="Speed"
<label class="block text-sm font-medium mb-2">Marquee Text</label> v-model="speed"
:min="0"
:max="10"
:step="0.1"
@update:model-value="forceRerender"
/>
<input <PreviewSlider
v-model="marqueeText" title="Curve Amount"
type="text" v-model="curveAmount"
placeholder="Enter text..." :min="-400"
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]" :max="400"
@input="forceRerender" :step="10"
/> value-unit="px"
</div> @update:model-value="forceRerender"
/>
<PreviewSlider <PreviewSwitch
title="Speed" title="Draggable"
v-model="speed" :model-value="interactive"
:min="0" @update:model-value="
:max="10" (val: boolean) => {
:step="0.1" interactive = val;
@update:model-value="forceRerender" forceRerender();
/> }
"
/>
</Customize>
<PreviewSlider <PropTable :data="propData" />
title="Curve Amount" </template>
v-model="curveAmount"
:min="-400"
:max="400"
:step="10"
value-unit="px"
@update:model-value="forceRerender"
/>
<PreviewSwitch <template #code>
title="Draggable" <CodeExample :code-object="curvedLoop" />
:model-value="interactive" </template>
@update:model-value="
(val: boolean) => {
interactive = val;
forceRerender();
}
"
/>
</Customize>
<PropTable :data="propData" /> <template #cli>
</template> <CliInstallation :command="curvedLoop.cli" />
</template>
<template #code> </TabbedLayout>
<CodeExample :code-object="curvedLoop" />
</template>
<template #cli>
<CliInstallation :command="curvedLoop.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

200
src/demo/TextAnimations/DecryptedTextDemo.vue
View File

@@ -1,119 +1,117 @@
<template> <template>
<div class="decrypted-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative py-6 overflow-hidden">
<div class="demo-container relative py-6 overflow-hidden"> <RefreshButton @click="forceRerender" />
<RefreshButton @click="forceRerender" />
<div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start"> <div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
<DecryptedText <DecryptedText
:speed="speed" :speed="speed"
text="Ahoy, matey!" text="Ahoy, matey!"
:max-iterations="maxIterations" :max-iterations="maxIterations"
:sequential="sequential" :sequential="sequential"
:reveal-direction="revealDirection" :reveal-direction="revealDirection"
parent-class-name="decrypted-text" parent-class-name="decrypted-text"
:use-original-chars-only="useOriginalCharsOnly" :use-original-chars-only="useOriginalCharsOnly"
:animate-on="animateOn" :animate-on="animateOn"
/> />
<DecryptedText <DecryptedText
:speed="speed" :speed="speed"
text="Set yer eyes on this" text="Set yer eyes on this"
:max-iterations="maxIterations" :max-iterations="maxIterations"
:sequential="sequential" :sequential="sequential"
:reveal-direction="revealDirection" :reveal-direction="revealDirection"
parent-class-name="decrypted-text" parent-class-name="decrypted-text"
:use-original-chars-only="useOriginalCharsOnly" :use-original-chars-only="useOriginalCharsOnly"
:animate-on="animateOn" :animate-on="animateOn"
/> />
<DecryptedText <DecryptedText
:speed="speed" :speed="speed"
text="And try tinkerin' round'" text="And try tinkerin' round'"
:max-iterations="maxIterations" :max-iterations="maxIterations"
:sequential="sequential" :sequential="sequential"
:reveal-direction="revealDirection" :reveal-direction="revealDirection"
parent-class-name="decrypted-text" parent-class-name="decrypted-text"
:use-original-chars-only="useOriginalCharsOnly" :use-original-chars-only="useOriginalCharsOnly"
:animate-on="animateOn" :animate-on="animateOn"
/> />
<DecryptedText <DecryptedText
:speed="speed" :speed="speed"
text="with these here props, arr!" text="with these here props, arr!"
:max-iterations="maxIterations" :max-iterations="maxIterations"
:sequential="sequential" :sequential="sequential"
:reveal-direction="revealDirection" :reveal-direction="revealDirection"
parent-class-name="decrypted-text" parent-class-name="decrypted-text"
:use-original-chars-only="useOriginalCharsOnly" :use-original-chars-only="useOriginalCharsOnly"
:animate-on="animateOn" :animate-on="animateOn"
@animation-complete="() => console.log('✅ Animation Finished!')" @animation-complete="() => console.log('✅ Animation Finished!')"
/> />
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" /> <PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" />
<PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" /> <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Speed" title="Speed"
v-model="speed" v-model="speed"
:min="10" :min="10"
:max="200" :max="200"
:step="10" :step="10"
value-unit="ms" value-unit="ms"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Iterations" title="Iterations"
v-model="maxIterations" v-model="maxIterations"
:min="1" :min="1"
:max="50" :max="50"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSelect <PreviewSelect
title="Animation Trigger" title="Animation Trigger"
v-model="animateOn" v-model="animateOn"
:options="animateOptions" :options="animateOptions"
@update:model-value=" @update:model-value="
val => { val => {
animateOn = val as 'view' | 'hover'; animateOn = val as 'view' | 'hover';
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSelect <PreviewSelect
title="Animation Direction" title="Animation Direction"
v-model="revealDirection" v-model="revealDirection"
:options="directionOptions" :options="directionOptions"
@update:model-value=" @update:model-value="
val => { val => {
revealDirection = val as 'start' | 'end' | 'center'; revealDirection = val as 'start' | 'end' | 'center';
forceRerender(); forceRerender();
} }
" "
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="decryptedText" /> <CodeExample :code-object="decryptedText" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="decryptedText.cli" /> <CliInstallation :command="decryptedText.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

102
src/demo/TextAnimations/FallingTextDemo.vue
View File

@@ -1,64 +1,62 @@
<template> <template>
<div class="falling-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
<div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center"> <FallingText
<FallingText :key="key"
:key="key" text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow."
text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow." :highlight-words="['Vue', 'Bits', 'animated', 'components', 'simplify']"
:highlight-words="['Vue', 'Bits', 'animated', 'components', 'simplify']" :trigger="trigger"
:trigger="trigger" :gravity="gravity"
:gravity="gravity" font-size="2rem"
font-size="2rem" :mouse-constraint-stiffness="mouseConstraintStiffness"
:mouse-constraint-stiffness="mouseConstraintStiffness" />
/>
<div class="absolute z-0 text-[4rem] font-[900] text-[#222] select-none" v-if="!effectStarted"> <div class="absolute z-0 text-[4rem] font-[900] text-[#222] select-none" v-if="!effectStarted">
{{ trigger === 'hover' ? 'Hover Me' : trigger === 'click' ? 'Click Me' : 'Auto Start' }} {{ trigger === 'hover' ? 'Hover Me' : trigger === 'click' ? 'Click Me' : 'Auto Start' }}
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewSelect <PreviewSelect
title="Animation Trigger" title="Animation Trigger"
v-model="trigger" v-model="trigger"
:options="triggerOptions" :options="triggerOptions"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Gravity" title="Gravity"
v-model="gravity" v-model="gravity"
:min="0.1" :min="0.1"
:max="2" :max="2"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Mouse Constraint Stiffness" title="Mouse Constraint Stiffness"
v-model="mouseConstraintStiffness" v-model="mouseConstraintStiffness"
:min="0.1" :min="0.1"
:max="2" :max="2"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['matter-js']" /> <Dependencies :dependency-list="['matter-js']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="fallingText" /> <CodeExample :code-object="fallingText" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="fallingText.cli" /> <CliInstallation :command="fallingText.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -141,5 +139,3 @@ const propData = [
} }
]; ];
</script> </script>
<style scoped></style>

122
src/demo/TextAnimations/FuzzyTextDemo.vue
View File

@@ -1,75 +1,73 @@
<template> <template>
<div class="fuzzy-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[500px] overflow-hidden">
<div class="demo-container relative h-[500px] overflow-hidden"> <div class="flex flex-col items-center justify-center h-full">
<div class="flex flex-col items-center justify-center h-full"> <FuzzyText
<FuzzyText :key="`main-${rerenderKey}`"
:key="`main-${rerenderKey}`" text="404"
text="404" :base-intensity="baseIntensity"
:base-intensity="baseIntensity" :hover-intensity="hoverIntensity"
:hover-intensity="hoverIntensity" :enable-hover="enableHover"
:enable-hover="enableHover" :font-size="140"
:font-size="140" />
/>
<div class="my-1" /> <div class="my-1" />
<FuzzyText <FuzzyText
:key="`sub-${rerenderKey}`" :key="`sub-${rerenderKey}`"
text="not found" text="not found"
:base-intensity="baseIntensity" :base-intensity="baseIntensity"
:hover-intensity="hoverIntensity" :hover-intensity="hoverIntensity"
:enable-hover="enableHover" :enable-hover="enableHover"
:font-size="70" :font-size="70"
font-family="Gochi Hand" font-family="Gochi Hand"
/> />
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Base Intensity" title="Base Intensity"
v-model="baseIntensity" v-model="baseIntensity"
:min="0" :min="0"
:max="1" :max="1"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Hover Intensity" title="Hover Intensity"
v-model="hoverIntensity" v-model="hoverIntensity"
:min="0" :min="0"
:max="2" :max="2"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSwitch <PreviewSwitch
title="Enable Hover" title="Enable Hover"
:model-value="enableHover" :model-value="enableHover"
@update:model-value=" @update:model-value="
(val: boolean) => { (val: boolean) => {
enableHover = val; enableHover = val;
forceRerender(); forceRerender();
} }
" "
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="fuzzyText" /> <CodeExample :code-object="fuzzyText" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="fuzzyText.cli" /> <CliInstallation :command="fuzzyText.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

64
src/demo/TextAnimations/GlitchTextDemo.vue
View File

@@ -1,41 +1,39 @@
<template> <template>
<div class="glitchtext-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container relative h-[500px] overflow-hidden">
<div class="demo-container relative h-[500px] overflow-hidden"> <GlitchText
<GlitchText :children="text"
:children="text" :speed="speed"
:speed="speed" :enable-shadows="enableShadows"
:enable-shadows="enableShadows" :enable-on-hover="enableOnHover"
:enable-on-hover="enableOnHover" class-name="demo-glitch-text"
class-name="demo-glitch-text" />
/> </div>
<Customize>
<div class="mb-4">
<PreviewText title="Text" v-model="text" />
<PreviewSlider title="Refresh Delay" v-model="speed" :min="0.1" :max="5" :step="0.1" />
<PreviewSwitch title="Glitch Colors" v-model="enableShadows" />
<PreviewSwitch title="Glitch On Hover" v-model="enableOnHover" />
</div> </div>
</Customize>
<Customize> <PropTable :data="propData" />
<div class="mb-4"> </template>
<PreviewText title="Text" v-model="text" />
<PreviewSlider title="Refresh Delay" v-model="speed" :min="0.1" :max="5" :step="0.1" /> <template #code>
<CodeExample :code-object="glitchText" />
</template>
<PreviewSwitch title="Glitch Colors" v-model="enableShadows" /> <template #cli>
<CliInstallation :command="glitchText.cli" />
<PreviewSwitch title="Glitch On Hover" v-model="enableOnHover" /> </template>
</div> </TabbedLayout>
</Customize>
<PropTable :data="propData" />
</template>
<template #code>
<CodeExample :code-object="glitchText" />
</template>
<template #cli>
<CliInstallation :command="glitchText.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

12
src/demo/TextAnimations/GradientTextDemo.vue
View File

@@ -133,16 +133,4 @@ const propData = [
.demo-container { .demo-container {
min-height: 200px; min-height: 200px;
} }
.demo-title-extra {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
color: #e5e7eb;
}
.demo-extra-info {
color: #a1a1aa;
font-size: 0.875rem;
}
</style> </style>

2
src/demo/TextAnimations/RotatingTextDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative min-h-[400px] max-h-[400px] overflow-hidden demo-container"> <div class="min-h-[400px] demo-container">
<div <div
class="flex flex-row justify-center items-center p-12 sm:p-20 md:p-24 w-full h-full overflow-hidden font-light text-[1.5rem] text-white sm:text-[1.875rem] md:text-[3rem] dark:text-muted leading-8 sm:leading-9 md:leading-none" class="flex flex-row justify-center items-center p-12 sm:p-20 md:p-24 w-full h-full overflow-hidden font-light text-[1.5rem] text-white sm:text-[1.875rem] md:text-[3rem] dark:text-muted leading-8 sm:leading-9 md:leading-none"
> >

100
src/demo/TextAnimations/ScrambleTextDemo.vue
View File

@@ -1,3 +1,52 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container h-[500px]">
<ScrambleText
:className="'m-[6vw] max-w-[680px] font-mono font-medium text-[clamp(14px,4vw,28px)] text-white'"
:radius="radius"
:duration="duration"
:speed="speed"
:scrambleChars="scrambleChars"
>
Once you hover over me, you will see the effect in action! You can customize the radius, duration, and speed
of the scramble effect.
</ScrambleText>
</div>
<Customize>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Scramble Characters</label>
<input
v-model="scrambleChars"
type="text"
placeholder="Enter text..."
maxlength="5"
class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div>
<PreviewSlider title="Radius" v-model="radius" :min="10" :max="300" :step="10" />
<PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="5" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="2" :step="0.1" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
<template #code>
<CodeExample :code-object="scrambleTextCode" />
</template>
<template #cli>
<CliInstallation :command="scrambleTextCode.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue'; import TabbedLayout from '../../components/common/TabbedLayout.vue';
@@ -54,54 +103,3 @@ const propData = [
} }
]; ];
</script> </script>
<template>
<div class="scramble-text-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container relative h-[500px] overflow-hidden">
<ScrambleText
:className="'m-[7vw] max-w-[800px] font-mono font-medium text-[clamp(14px,4vw,32px)] text-white'"
:radius="radius"
:duration="duration"
:speed="speed"
:scrambleChars="scrambleChars"
>
Once you hover over me, you will see the effect in action! You can customize the radius, duration, and speed
of the scramble effect.
</ScrambleText>
</div>
<Customize>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Scramble Characters</label>
<input
v-model="scrambleChars"
type="text"
placeholder="Enter text..."
maxlength="5"
class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div>
<PreviewSlider title="Radius" v-model="radius" :min="10" :max="300" :step="10" />
<PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="5" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="2" :step="0.1" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
<template #code>
<CodeExample :code-object="scrambleTextCode" />
</template>
<template #cli>
<CliInstallation :command="scrambleTextCode.cli" />
</template>
</TabbedLayout>
</div>
</template>

3
src/demo/TextAnimations/ScrollRevealDemo.vue
View File

@@ -181,8 +181,7 @@ const propData = [
} }
.scroll-content { .scroll-content {
padding-top: 150vh !important; padding: 150vh 2em 50vh 2em;
padding-bottom: 50vh;
} }
.scroll-instruction { .scroll-instruction {

70
src/demo/TextAnimations/ShinyTextDemo.vue
View File

@@ -1,48 +1,46 @@
<template> <template>
<div class="shiny-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <h2 class="demo-title-extra">Basic</h2>
<h2 class="demo-title-extra">Basic</h2>
<div class="demo-container"> <div class="demo-container">
<ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" /> <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
</div>
<h2 class="demo-title-extra">Button Text</h2>
<div class="demo-container">
<div class="shiny-button">
<ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
</div> </div>
</div>
<h2 class="demo-title-extra">Button Text</h2> <h2 class="demo-title-extra">Configurable Speed</h2>
<div class="demo-container"> <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
<div class="shiny-button"> <ShinyText
<ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" /> :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
</div> :disabled="false"
</div> :speed="speed"
class-name="shiny-text-demo"
/>
</div>
<h2 class="demo-title-extra">Configurable Speed</h2> <Customize>
<PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
</Customize>
<div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center"> <PropTable :data="propData" />
<ShinyText </template>
:text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
:disabled="false"
:speed="speed"
class-name="shiny-text-demo"
/>
</div>
<Customize> <template #code>
<PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" /> <CodeExample :code-object="shinyText" />
</Customize> </template>
<PropTable :data="propData" /> <template #cli>
</template> <CliInstallation :command="shinyText.cli" />
</template>
<template #code> </TabbedLayout>
<CodeExample :code-object="shinyText" />
</template>
<template #cli>
<CliInstallation :command="shinyText.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

118
src/demo/TextAnimations/SplitTextDemo.vue
View File

@@ -1,72 +1,70 @@
<template> <template>
<div class="split-text-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container"> <RefreshButton @refresh="forceRerender" />
<RefreshButton @refresh="forceRerender" />
<SplitText <SplitText
:key="rerenderKey" :key="rerenderKey"
text="Hello, Vue!" text="Hello, Vue!"
:delay="delay" :delay="delay"
:duration="duration" :duration="duration"
:ease="ease" :ease="ease"
:split-type="splitType" :split-type="splitType"
:threshold="threshold" :threshold="threshold"
class="split-text-demo-text" class="split-text-demo"
@animation-complete=" @animation-complete="
() => { () => {
showCallback && showToast(); showCallback && showToast();
} }
" "
/> />
</div> </div>
<Customize> <Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" /> <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Stagger Delay (ms)" title="Stagger Delay (ms)"
v-model="delay" v-model="delay"
:min="10" :min="10"
:max="500" :max="500"
:step="10" :step="10"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Duration (s)" title="Duration (s)"
v-model="duration" v-model="duration"
:min="0.1" :min="0.1"
:max="2" :max="3"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Threshold" title="Threshold"
v-model="threshold" v-model="threshold"
:min="0.1" :min="0.1"
:max="1" :max="1"
:step="0.1" :step="0.1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" /> <Dependencies :dependency-list="['gsap']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="splitText" /> <CodeExample :code-object="splitText" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="splitText.cli" /> <CliInstallation :command="splitText.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -86,7 +84,7 @@ import { useToast } from 'primevue/usetoast';
import { useForceRerender } from '@/composables/useForceRerender'; import { useForceRerender } from '@/composables/useForceRerender';
const delay = ref(10); const delay = ref(10);
const duration = ref(2); const duration = ref(3);
const ease = ref('elastic.out(1, 0.3)'); const ease = ref('elastic.out(1, 0.3)');
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars'); const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
const threshold = ref(0.1); const threshold = ref(0.1);

90
src/demo/TextAnimations/TextCursorDemo.vue
View File

@@ -1,58 +1,56 @@
<template> <template>
<div class="text-cursor-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container h-[500px]">
<div class="demo-container relative h-[500px] overflow-hidden"> <TextCursor
<TextCursor :key="key"
:key="key" :text="text"
:text="text" :follow-mouse-direction="followMouseDirection"
:follow-mouse-direction="followMouseDirection" :random-float="randomFloat"
:random-float="randomFloat" />
/>
<div <div
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none" class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
> >
Hover Around! Hover Around!
</div> </div>
</div>
<Customize>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Text</label>
<input
v-model="text"
type="text"
placeholder="Enter text..."
maxlength="10"
class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div> </div>
<Customize> <PreviewSwitch
<div class="mb-4"> title="Follow Mouse Direction"
<label class="block text-sm font-medium mb-2">Text</label> v-model="followMouseDirection"
@update:model-value="forceRerender"
/>
<input <PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
v-model="text" </Customize>
type="text"
placeholder="Enter text..."
maxlength="10"
class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div>
<PreviewSwitch <PropTable :data="propData" />
title="Follow Mouse Direction"
v-model="followMouseDirection"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" /> <Dependencies :dependency-list="['motion-v']" />
</Customize> </template>
<PropTable :data="propData" /> <template #code>
<CodeExample :code-object="textCursor" />
</template>
<Dependencies :dependency-list="['motion-v']" /> <template #cli>
</template> <CliInstallation :command="textCursor.cli" />
</template>
<template #code> </TabbedLayout>
<CodeExample :code-object="textCursor" />
</template>
<template #cli>
<CliInstallation :command="textCursor.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

216
src/demo/TextAnimations/TextPressureDemo.vue
View File

@@ -1,127 +1,123 @@
<template> <template>
<div class="text-pressure-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container min-h-[400px]">
<div class="demo-container relative bg-[#060010] min-h-[400px] max-h-[450px] overflow-hidden mb-6"> <TextPressure
<div class="w-full h-full"> :key="rerenderKey"
<TextPressure :text="text"
:key="rerenderKey" :flex="flex"
:text="text" :alpha="alpha"
:flex="flex" :stroke="stroke"
:alpha="alpha" :width="width"
:stroke="stroke" :weight="weight"
:width="width" :italic="italic"
:weight="weight" :text-color="textColor"
:italic="italic" :stroke-color="strokeColor"
:text-color="textColor" :min-font-size="36"
:stroke-color="strokeColor" />
:min-font-size="36" </div>
/>
</div> <Customize>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Text</label>
<input
v-model="text"
type="text"
placeholder="Your text here..."
maxlength="10"
class="w-[200px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div> </div>
<Customize> <div class="color-controls">
<div class="mb-4"> <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
<label class="block text-sm font-medium mb-2">Text</label>
<input <PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
v-model="text" </div>
type="text"
placeholder="Your text here..."
maxlength="10"
class="w-[200px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div>
<div class="color-controls"> <p class="mt-6 text-[#999] text-sm">Animation Settings</p>
<PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
<PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" /> <div class="flex gap-4 flex-wrap">
</div> <PreviewSwitch
title="Flex"
:model-value="flex"
@update:model-value="
(val: boolean) => {
flex = val;
forceRerender();
}
"
/>
<p class="mt-6 text-[#999] text-sm">Animation Settings</p> <PreviewSwitch
title="Alpha"
:model-value="alpha"
@update:model-value="
(val: boolean) => {
alpha = val;
forceRerender();
}
"
/>
<div class="flex gap-4 flex-wrap"> <PreviewSwitch
<PreviewSwitch title="Stroke"
title="Flex" :model-value="stroke"
:model-value="flex" @update:model-value="
@update:model-value=" (val: boolean) => {
(val: boolean) => { stroke = val;
flex = val; forceRerender();
forceRerender(); }
} "
" />
/>
<PreviewSwitch <PreviewSwitch
title="Alpha" title="Width"
:model-value="alpha" :model-value="width"
@update:model-value=" @update:model-value="
(val: boolean) => { (val: boolean) => {
alpha = val; width = val;
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSwitch <PreviewSwitch
title="Stroke" title="Weight"
:model-value="stroke" :model-value="weight"
@update:model-value=" @update:model-value="
(val: boolean) => { (val: boolean) => {
stroke = val; weight = val;
forceRerender(); forceRerender();
} }
" "
/> />
<PreviewSwitch <PreviewSwitch
title="Width" title="Italic"
:model-value="width" :model-value="italic"
@update:model-value=" @update:model-value="
(val: boolean) => { (val: boolean) => {
width = val; italic = val;
forceRerender(); forceRerender();
} }
" "
/> />
</div>
</Customize>
<PreviewSwitch <PropTable :data="propData" />
title="Weight" </template>
:model-value="weight"
@update:model-value="
(val: boolean) => {
weight = val;
forceRerender();
}
"
/>
<PreviewSwitch <template #code>
title="Italic" <CodeExample :code-object="textPressure" />
:model-value="italic" </template>
@update:model-value="
(val: boolean) => {
italic = val;
forceRerender();
}
"
/>
</div>
</Customize>
<PropTable :data="propData" /> <template #cli>
</template> <CliInstallation :command="textPressure.cli" />
</template>
<template #code> </TabbedLayout>
<CodeExample :code-object="textPressure" />
</template>
<template #cli>
<CliInstallation :command="textPressure.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

118
src/demo/TextAnimations/TextTrailDemo.vue
View File

@@ -1,73 +1,71 @@
<template> <template>
<div class="text-trail-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container h-[500px]">
<div class="demo-container relative h-[500px] overflow-hidden p-0"> <TextTrail
<TextTrail :key="`${key}-${animateColor}`"
:key="`${key}-${animateColor}`" :noise-factor="noiseFactor"
:noise-factor="noiseFactor" :noise-scale="noiseScale / 10000"
:noise-scale="noiseScale / 10000" :font-weight="fontWeight"
:font-weight="fontWeight" :alpha-persist-factor="alphaPersistFactor"
:alpha-persist-factor="alphaPersistFactor" :animate-color="animateColor"
:animate-color="animateColor" :text-color="animateColor ? undefined : '#ffffff'"
:text-color="animateColor ? undefined : '#ffffff'" />
/> </div>
</div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider
title="Noise Factor" title="Noise Factor"
v-model="noiseFactor" v-model="noiseFactor"
:min="1" :min="1"
:max="25" :max="25"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Noise Scale" title="Noise Scale"
v-model="noiseScale" v-model="noiseScale"
:min="0" :min="0"
:max="100" :max="100"
:step="1" :step="1"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Font Weight" title="Font Weight"
v-model="fontWeight" v-model="fontWeight"
:min="100" :min="100"
:max="900" :max="900"
:step="100" :step="100"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Alpha Persist Factor" title="Alpha Persist Factor"
v-model="alphaPersistFactor" v-model="alphaPersistFactor"
:min="0.5" :min="0.5"
:max="0.95" :max="0.95"
:step="0.01" :step="0.01"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" /> <PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['three']" /> <Dependencies :dependency-list="['three']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="textTrail" /> <CodeExample :code-object="textTrail" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="textTrail.cli" /> <CliInstallation :command="textTrail.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

100
src/demo/TextAnimations/TrueFocusDemo.vue
View File

@@ -1,65 +1,63 @@
<template> <template>
<div class="truefocus-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px"> <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
<div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full"> <TrueFocus :key="key" v-bind="config" />
<TrueFocus v-bind="config" />
</div>
</div> </div>
</div>
<Customize> <Customize>
<PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" /> <PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
<PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" /> <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
<PreviewSlider <PreviewSlider
title="Blur Amount" title="Blur Amount"
v-model="blurAmount" v-model="blurAmount"
:min="0" :min="0"
:max="15" :max="15"
:step="0.5" :step="0.5"
value-unit="px" value-unit="px"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Animation Duration" title="Animation Duration"
v-model="animationDuration" v-model="animationDuration"
:min="0.1" :min="0.1"
:max="3" :max="3"
:step="0.1" :step="0.1"
value-unit="s" value-unit="s"
:disabled="!manualMode" :disabled="!manualMode"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
<PreviewSlider <PreviewSlider
title="Pause Between Animations" title="Pause Between Animations"
v-model="pauseBetweenAnimations" v-model="pauseBetweenAnimations"
:min="0" :min="0"
:max="5" :max="5"
:step="0.5" :step="0.5"
value-unit="s" value-unit="s"
:disabled="manualMode" :disabled="manualMode"
@update:model-value="forceRerender" @update:model-value="forceRerender"
/> />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" /> <Dependencies :dependency-list="['motion-v']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="trueFocus" /> <CodeExample :code-object="trueFocus" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="trueFocus.cli" /> <CliInstallation :command="trueFocus.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">