mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
Simplify demo components
This commit is contained in:
David Haz
@@ -7,7 +7,6 @@ export const imageTrail: CodeObject = {
|
||||
usage: `<template>
|
||||
<div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
|
||||
<ImageTrail
|
||||
:key="key"
|
||||
:items="[
|
||||
'https://picsum.photos/id/287/300/300',
|
||||
'https://picsum.photos/id/1001/300/300',
|
||||
|
||||
@@ -120,7 +120,7 @@ onUnmounted(() => {
|
||||
v-for="(word, index) in words"
|
||||
:key="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="{
|
||||
filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
|
||||
'--border-color': borderColor,
|
||||
|
||||
@@ -139,23 +139,6 @@ div:has(> .props-table) {
|
||||
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 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,133 +1,128 @@
|
||||
<template>
|
||||
<div class="animated-content-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-6 overflow-hidden">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
|
||||
<div :key="key" class="flex justify-center items-center">
|
||||
<AnimatedContent
|
||||
:direction="direction"
|
||||
:delay="delay"
|
||||
:distance="distance"
|
||||
:reverse="reverse"
|
||||
:duration="duration"
|
||||
:ease="ease"
|
||||
:initial-opacity="initialOpacity"
|
||||
:animate-opacity="animateOpacity"
|
||||
:scale="scale"
|
||||
:threshold="threshold"
|
||||
@complete="() => console.log('✅ Animation Complete!')"
|
||||
>
|
||||
<div class="demo-content">
|
||||
<h4>Animated Content</h4>
|
||||
|
||||
<p>It will animate in when it enters the viewport.</p>
|
||||
</div>
|
||||
</AnimatedContent>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
<AnimatedContent
|
||||
:direction="direction"
|
||||
:delay="delay"
|
||||
:distance="distance"
|
||||
:reverse="reverse"
|
||||
:duration="duration"
|
||||
:ease="ease"
|
||||
:initial-opacity="initialOpacity"
|
||||
:animate-opacity="animateOpacity"
|
||||
:scale="scale"
|
||||
:threshold="threshold"
|
||||
:key="key"
|
||||
@complete="() => console.log('✅ Animation Complete!')"
|
||||
>
|
||||
<div class="demo-content">
|
||||
<h4>Animated Content</h4>
|
||||
<p>It will animate in when it enters the viewport.</p>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedContent>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Direction"
|
||||
v-model="direction"
|
||||
:options="directionOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
direction = val as 'vertical' | 'horizontal';
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Direction"
|
||||
v-model="direction"
|
||||
:options="directionOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
direction = val as 'vertical' | 'horizontal';
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSelect
|
||||
title="Easing Function"
|
||||
v-model="ease"
|
||||
:options="easeOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
ease = val as string;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSelect
|
||||
title="Easing Function"
|
||||
v-model="ease"
|
||||
:options="easeOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
ease = val as string;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Distance"
|
||||
v-model="distance"
|
||||
:min="50"
|
||||
:max="300"
|
||||
:step="10"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Distance"
|
||||
v-model="distance"
|
||||
:min="50"
|
||||
:max="300"
|
||||
:step="10"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Duration"
|
||||
v-model="duration"
|
||||
:min="0.1"
|
||||
:max="3"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Duration"
|
||||
v-model="duration"
|
||||
:min="0.1"
|
||||
:max="3"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Delay"
|
||||
v-model="delay"
|
||||
:min="0"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Delay"
|
||||
v-model="delay"
|
||||
:min="0"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Initial Opacity"
|
||||
v-model="initialOpacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Initial Opacity"
|
||||
v-model="initialOpacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Initial Scale"
|
||||
v-model="scale"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Initial Scale"
|
||||
v-model="scale"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@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" />
|
||||
</Customize>
|
||||
<PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="animatedContent" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="animatedContent" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="animatedContent.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="animatedContent.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-[400px] overflow-hidden demo-container">
|
||||
<div class="demo-container h-[400px]">
|
||||
<BlobCursor
|
||||
:blobType="blobType"
|
||||
:fillColor="fillColor"
|
||||
|
||||
@@ -1,88 +1,86 @@
|
||||
<template>
|
||||
<div class="click-spark-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<ClickSpark
|
||||
:key="rerenderKey"
|
||||
:spark-color="sparkColor"
|
||||
:spark-size="sparkSize"
|
||||
:spark-radius="sparkRadius"
|
||||
:spark-count="sparkCount"
|
||||
:duration="duration"
|
||||
:easing="easing"
|
||||
:extra-scale="extraScale"
|
||||
class="click-spark-demo-area"
|
||||
></ClickSpark>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<ClickSpark
|
||||
:key="rerenderKey"
|
||||
:spark-color="sparkColor"
|
||||
:spark-size="sparkSize"
|
||||
:spark-radius="sparkRadius"
|
||||
:spark-count="sparkCount"
|
||||
:duration="duration"
|
||||
:easing="easing"
|
||||
:extra-scale="extraScale"
|
||||
class="click-spark-demo-area"
|
||||
></ClickSpark>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Click Around!
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Click Around!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Spark Size"
|
||||
v-model="sparkSize"
|
||||
:min="5"
|
||||
:max="30"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Spark Size"
|
||||
v-model="sparkSize"
|
||||
:min="5"
|
||||
:max="30"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Spark Radius"
|
||||
v-model="sparkRadius"
|
||||
:min="10"
|
||||
:max="50"
|
||||
:step="5"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Spark Radius"
|
||||
v-model="sparkRadius"
|
||||
:min="10"
|
||||
:max="50"
|
||||
:step="5"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Spark Count"
|
||||
v-model="sparkCount"
|
||||
:min="4"
|
||||
:max="20"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Spark Count"
|
||||
v-model="sparkCount"
|
||||
:min="4"
|
||||
:max="20"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Duration (ms)"
|
||||
v-model="duration"
|
||||
:min="200"
|
||||
:max="1000"
|
||||
:step="50"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Duration (ms)"
|
||||
v-model="duration"
|
||||
:min="200"
|
||||
:max="1000"
|
||||
:step="50"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Extra Scale"
|
||||
v-model="extraScale"
|
||||
:min="0.5"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Extra Scale"
|
||||
v-model="extraScale"
|
||||
:min="0.5"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="clickSpark" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="clickSpark" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="clickSpark.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="clickSpark.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -124,36 +122,18 @@ const propData = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.click-spark-demo-area {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
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>
|
||||
|
||||
@@ -1,57 +1,55 @@
|
||||
<template>
|
||||
<div class="count-up-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Default</h2>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Default</h2>
|
||||
|
||||
<div class="demo-container relative">
|
||||
<CountUp
|
||||
:key="keyDefault"
|
||||
:from="0"
|
||||
:to="100"
|
||||
separator=","
|
||||
direction="up"
|
||||
:duration="1"
|
||||
class-name="count-up-text"
|
||||
/>
|
||||
<div class="demo-container relative">
|
||||
<CountUp
|
||||
:key="keyDefault"
|
||||
:from="0"
|
||||
:to="100"
|
||||
separator=","
|
||||
direction="up"
|
||||
:duration="1"
|
||||
class-name="count-up-text"
|
||||
/>
|
||||
|
||||
<RefreshButton @click="forceRerenderDefault" />
|
||||
</div>
|
||||
<RefreshButton @click="forceRerenderDefault" />
|
||||
</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]">
|
||||
<button
|
||||
class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
|
||||
@click="setStartCounting(true)"
|
||||
>
|
||||
Count to 500!
|
||||
</button>
|
||||
<div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
|
||||
<button
|
||||
class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
|
||||
@click="setStartCounting(true)"
|
||||
>
|
||||
Count to 500!
|
||||
</button>
|
||||
|
||||
<CountUp
|
||||
:key="keyProgramatically"
|
||||
:from="100"
|
||||
:to="500"
|
||||
:start-when="startCounting"
|
||||
:duration="5"
|
||||
class-name="count-up-text"
|
||||
/>
|
||||
<CountUp
|
||||
:key="keyProgramatically"
|
||||
:from="100"
|
||||
:to="500"
|
||||
:start-when="startCounting"
|
||||
:duration="5"
|
||||
class-name="count-up-text"
|
||||
/>
|
||||
|
||||
<RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" />
|
||||
</div>
|
||||
<RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" />
|
||||
</div>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="countup" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="countup" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="countup.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="countup.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative demo-container h-[650px] overflow-hidden">
|
||||
<div class="demo-container h-[650px]">
|
||||
<Cubes
|
||||
:borderStyle="borderStyle"
|
||||
:gridSize="gridSize"
|
||||
|
||||
@@ -1,80 +1,78 @@
|
||||
<template>
|
||||
<div class="fade-content-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<FadeContent
|
||||
:key="rerenderKey"
|
||||
:blur="blur"
|
||||
:duration="duration"
|
||||
:delay="delay"
|
||||
:threshold="threshold"
|
||||
:initial-opacity="initialOpacity"
|
||||
:easing="easing"
|
||||
class="fade-content-demo-content"
|
||||
>
|
||||
<div class="demo-content">
|
||||
<h4>Fade Content</h4>
|
||||
<FadeContent
|
||||
:key="rerenderKey"
|
||||
:blur="blur"
|
||||
:duration="duration"
|
||||
:delay="delay"
|
||||
:threshold="threshold"
|
||||
:initial-opacity="initialOpacity"
|
||||
:easing="easing"
|
||||
class="fade-content-demo-content"
|
||||
>
|
||||
<div class="demo-content">
|
||||
<h4>Fade Content</h4>
|
||||
|
||||
<p>It will fade in when it enters the viewport.</p>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<p>It will fade in when it enters the viewport.</p>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Duration (ms)"
|
||||
v-model="duration"
|
||||
:min="100"
|
||||
:max="3000"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Duration (ms)"
|
||||
v-model="duration"
|
||||
:min="100"
|
||||
:max="3000"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Delay (ms)"
|
||||
v-model="delay"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="50"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Delay (ms)"
|
||||
v-model="delay"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="50"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Initial Opacity"
|
||||
v-model="initialOpacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Initial Opacity"
|
||||
v-model="initialOpacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="fadeContent" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="fadeContent" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="fadeContent.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="fadeContent.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,57 +1,53 @@
|
||||
<template>
|
||||
<div class="glare-hover-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[600px] overflow-hidden">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<GlareHover
|
||||
background="#111"
|
||||
border-color="#222"
|
||||
border-radius="20px"
|
||||
width="400px"
|
||||
height="300px"
|
||||
:glare-color="glareColor"
|
||||
:glare-opacity="glareOpacity"
|
||||
:glare-size="glareSize"
|
||||
:transition-duration="transitionDuration"
|
||||
:play-once="playOnce"
|
||||
>
|
||||
<div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
|
||||
</GlareHover>
|
||||
</div>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container min-h-[400px]">
|
||||
<GlareHover
|
||||
background="#111"
|
||||
border-color="#222"
|
||||
border-radius="20px"
|
||||
width="400px"
|
||||
height="300px"
|
||||
:glare-color="glareColor"
|
||||
:glare-opacity="glareOpacity"
|
||||
:glare-size="glareSize"
|
||||
:transition-duration="transitionDuration"
|
||||
:play-once="playOnce"
|
||||
>
|
||||
<div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
|
||||
</GlareHover>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Glare Color" v-model="glareColor" />
|
||||
<Customize>
|
||||
<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
|
||||
title="Transition Duration"
|
||||
v-model="transitionDuration"
|
||||
:min="200"
|
||||
:max="2000"
|
||||
:step="50"
|
||||
value-unit="ms"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Transition Duration"
|
||||
v-model="transitionDuration"
|
||||
:min="200"
|
||||
:max="2000"
|
||||
:step="50"
|
||||
value-unit="ms"
|
||||
/>
|
||||
|
||||
<PreviewSwitch title="Play Once" v-model="playOnce" />
|
||||
</Customize>
|
||||
<PreviewSwitch title="Play Once" v-model="playOnce" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="glareHover" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="glareHover" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="glareHover.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="glareHover.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -13,7 +13,7 @@
|
||||
<Customize>
|
||||
<div class="inline-flex gap-2" role="group">
|
||||
<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
|
||||
>
|
||||
Variant
|
||||
@@ -23,8 +23,8 @@
|
||||
v-for="num in 8"
|
||||
:key="num"
|
||||
:class="[
|
||||
'text-xs h-8 px-3 border border-[#271E37] font-bold',
|
||||
variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0D0716]'
|
||||
'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-[#0b0b0b]'
|
||||
]"
|
||||
@click="
|
||||
() => {
|
||||
|
||||
@@ -1,67 +1,65 @@
|
||||
<template>
|
||||
<div class="magnet-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Container</h2>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Container</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
|
||||
<div class="magnet-container">Hover Me!</div>
|
||||
</Magnet>
|
||||
</div>
|
||||
<div class="demo-container">
|
||||
<Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
|
||||
<div class="magnet-container">Hover Me!</div>
|
||||
</Magnet>
|
||||
</div>
|
||||
|
||||
<h2 class="demo-title-extra">Link</h2>
|
||||
<h2 class="demo-title-extra">Link</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<Magnet
|
||||
:key="rerenderKey + 1"
|
||||
:padding="Math.floor(padding / 2)"
|
||||
:disabled="disabled"
|
||||
:magnetStrength="magnetStrength"
|
||||
>
|
||||
<a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
|
||||
Star
|
||||
<span class="accent">Vue Bits</span>
|
||||
on GitHub!
|
||||
</a>
|
||||
</Magnet>
|
||||
</div>
|
||||
<div class="demo-container">
|
||||
<Magnet
|
||||
:key="rerenderKey + 1"
|
||||
:padding="Math.floor(padding / 2)"
|
||||
:disabled="disabled"
|
||||
:magnetStrength="magnetStrength"
|
||||
>
|
||||
<a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
|
||||
Star
|
||||
<span class="accent">Vue Bits</span>
|
||||
on GitHub!
|
||||
</a>
|
||||
</Magnet>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Padding"
|
||||
v-model="padding"
|
||||
:min="0"
|
||||
:max="300"
|
||||
:step="10"
|
||||
value-unit="px"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Padding"
|
||||
v-model="padding"
|
||||
:min="0"
|
||||
:max="300"
|
||||
:step="10"
|
||||
value-unit="px"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Strength"
|
||||
v-model="magnetStrength"
|
||||
:min="1"
|
||||
:max="10"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Strength"
|
||||
v-model="magnetStrength"
|
||||
:min="1"
|
||||
:max="10"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="magnet" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="magnet" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="magnet.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="magnet.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
<template>
|
||||
<div class="magnet-lines-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<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" />
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
|
||||
</div>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="magnetLines" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="magnetLines" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="magnetLines.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="magnetLines.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-[500px] overflow-hidden demo-container">
|
||||
<div class="demo-container h-[500px]">
|
||||
<MetaBalls
|
||||
:color="color"
|
||||
:cursorBallColor="color"
|
||||
|
||||
@@ -1,91 +1,82 @@
|
||||
<template>
|
||||
<div class="metallic-paint-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<MetallicPaint
|
||||
v-if="imageData"
|
||||
:key="rerenderKey"
|
||||
:image-data="imageData"
|
||||
:params="{
|
||||
edge,
|
||||
patternBlur,
|
||||
patternScale,
|
||||
refraction,
|
||||
speed,
|
||||
liquid
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<MetallicPaint
|
||||
v-if="imageData"
|
||||
:key="rerenderKey"
|
||||
:image-data="imageData"
|
||||
:params="{
|
||||
edge,
|
||||
patternBlur,
|
||||
patternScale,
|
||||
refraction,
|
||||
speed,
|
||||
liquid
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Edge"
|
||||
v-model="edge"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Pattern Scale"
|
||||
v-model="patternScale"
|
||||
:min="1"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Pattern Scale"
|
||||
v-model="patternScale"
|
||||
:min="1"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Pattern Blur"
|
||||
v-model="patternBlur"
|
||||
:min="0"
|
||||
:max="0.1"
|
||||
:step="0.001"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Pattern Blur"
|
||||
v-model="patternBlur"
|
||||
:min="0"
|
||||
:max="0.1"
|
||||
:step="0.001"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Refraction"
|
||||
v-model="refraction"
|
||||
:min="0"
|
||||
:max="0.1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Refraction"
|
||||
v-model="refraction"
|
||||
:min="0"
|
||||
:max="0.1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Liquid"
|
||||
v-model="liquid"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Liquid"
|
||||
v-model="liquid"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
v-model="speed"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
v-model="speed"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="metallicPaint" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="metallicPaint" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="metallicPaint.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="metallicPaint.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,29 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
|
||||
<Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container overflow-hidden h-[400px]">
|
||||
<div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
|
||||
<Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
|
||||
<PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
|
||||
</Customize>
|
||||
<Customize>
|
||||
<PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
|
||||
<PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="noise" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="noise" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="noise.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="noise.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,74 +1,70 @@
|
||||
<template>
|
||||
<div class="pixel-transition-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="demo-container flex flex-col items-center justify-center min-h-[400px] max-h-[400px] relative overflow-hidden"
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container min-h-[400px]">
|
||||
<PixelTransition
|
||||
:key="key"
|
||||
:grid-size="gridSize"
|
||||
:pixel-color="pixelColor"
|
||||
:animation-step-duration="animationStepDuration"
|
||||
class-name="custom-pixel-card"
|
||||
>
|
||||
<PixelTransition
|
||||
:key="key"
|
||||
:grid-size="gridSize"
|
||||
:pixel-color="pixelColor"
|
||||
:animation-step-duration="animationStepDuration"
|
||||
class-name="custom-pixel-card"
|
||||
>
|
||||
<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 #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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</PixelTransition>
|
||||
<template #secondContent>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</PixelTransition>
|
||||
|
||||
<div class="mt-2 text-[#a6a6a6]">Psst, hover the card!</div>
|
||||
</div>
|
||||
<div class="mt-2 absolute bottom-[2em] text-[#a6a6a6]">Psst, hover the image!</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Grid Size"
|
||||
v-model="gridSize"
|
||||
:min="2"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
width="200"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Grid Size"
|
||||
v-model="gridSize"
|
||||
:min="2"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
width="200"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Animation Duration"
|
||||
v-model="animationStepDuration"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
@update:model-value="forceRerender"
|
||||
width="200"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Animation Duration"
|
||||
v-model="animationStepDuration"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
@update:model-value="forceRerender"
|
||||
width="200"
|
||||
/>
|
||||
|
||||
<PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
<PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="pixelTransition" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="pixelTransition" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="pixelTransition.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="pixelTransition.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,61 +1,59 @@
|
||||
<template>
|
||||
<div class="ribbons-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; position: relative">
|
||||
<div class="hover-text">Hover Me.</div>
|
||||
<Ribbons
|
||||
:base-thickness="baseThickness"
|
||||
:colors="colors"
|
||||
:speed-multiplier="speedMultiplier"
|
||||
:max-age="maxAge"
|
||||
:enable-fade="enableFade"
|
||||
:enable-shader-effect="enableWaves"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="hover-text">Hover Me.</div>
|
||||
<Ribbons
|
||||
:base-thickness="baseThickness"
|
||||
:colors="colors"
|
||||
:speed-multiplier="speedMultiplier"
|
||||
:max-age="maxAge"
|
||||
:enable-fade="enableFade"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
<PreviewSlider title="Thickness" v-model="baseThickness" :min="1" :max="60" :step="1" />
|
||||
|
||||
<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" />
|
||||
</Customize>
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="ribbons" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="ribbons" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="ribbons.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="ribbons.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -180,6 +178,8 @@ const propData = [
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,36 @@
|
||||
<template>
|
||||
<div class="splash-cursor-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<span class="text-6xl text-center text-[#222] font-black select-none">Move Your Cursor</span>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<span class="text-6xl text-center text-[#333] font-black select-none">Move Your Cursor</span>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" />
|
||||
<Customize>
|
||||
<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" />
|
||||
</Customize>
|
||||
<PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="splashCursor" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="splashCursor" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="splashCursor.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
<template #cli>
|
||||
<CliInstallation :command="splashCursor.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
|
||||
<SplashCursor
|
||||
:key="rerenderKey"
|
||||
:SIM_RESOLUTION="simResolution"
|
||||
:DENSITY_DISSIPATION="densityDissipation"
|
||||
:SPLAT_FORCE="splatForce"
|
||||
/>
|
||||
</div>
|
||||
<SplashCursor
|
||||
:key="rerenderKey"
|
||||
:SIM_RESOLUTION="simResolution"
|
||||
:DENSITY_DISSIPATION="densityDissipation"
|
||||
:SPLAT_FORCE="splatForce"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,131 +1,129 @@
|
||||
<template>
|
||||
<div class="card-swap-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
<span class="inline lg:block">looked so good</span>
|
||||
</h2>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
<span class="inline lg:block">looked so good</span>
|
||||
</h2>
|
||||
|
||||
<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!
|
||||
</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>
|
||||
<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!
|
||||
</p>
|
||||
</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"
|
||||
<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"
|
||||
>
|
||||
Easing:
|
||||
<span class="text-zinc-400"> {{ easing }}</span>
|
||||
</button>
|
||||
</Customize>
|
||||
<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>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<span>Smooth</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<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 #code>
|
||||
<CodeExample :code-object="cardSwap" />
|
||||
</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>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="cardSwap.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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"> {{ 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,67 +1,65 @@
|
||||
<template>
|
||||
<div class="carousel-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
|
||||
<Carousel
|
||||
:key="rerenderKey"
|
||||
:base-width="width"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-delay="autoplayDelay"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
:loop="loop"
|
||||
:round="round"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
|
||||
<Carousel
|
||||
:key="rerenderKey"
|
||||
:base-width="width"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-delay="autoplayDelay"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
:loop="loop"
|
||||
:round="round"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Width"
|
||||
v-model="width"
|
||||
:min="250"
|
||||
:max="330"
|
||||
:step="10"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Width"
|
||||
v-model="width"
|
||||
:min="250"
|
||||
:max="330"
|
||||
:step="10"
|
||||
@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
|
||||
title="Delay"
|
||||
v-model="autoplayDelay"
|
||||
:min="1000"
|
||||
:max="4000"
|
||||
:step="1000"
|
||||
:disabled="!autoplay"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Delay"
|
||||
v-model="autoplayDelay"
|
||||
:min="1000"
|
||||
:max="4000"
|
||||
:step="1000"
|
||||
:disabled="!autoplay"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Pause On Hover"
|
||||
v-model="pauseOnHover"
|
||||
:disabled="!autoplay"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSwitch
|
||||
title="Pause On Hover"
|
||||
v-model="pauseOnHover"
|
||||
:disabled="!autoplay"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="carousel" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="carousel" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="carousel.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="carousel.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,75 +1,73 @@
|
||||
<template>
|
||||
<div class="circular-gallery-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px] p-0 overflow-hidden">
|
||||
<CircularGallery
|
||||
:key="rerenderKey"
|
||||
:bend="bend"
|
||||
:border-radius="borderRadius"
|
||||
:scroll-speed="scrollSpeed"
|
||||
:scroll-ease="scrollEase"
|
||||
:text-color="textColor"
|
||||
:font="font"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px]">
|
||||
<CircularGallery
|
||||
:key="rerenderKey"
|
||||
:bend="bend"
|
||||
:border-radius="borderRadius"
|
||||
:scroll-speed="scrollSpeed"
|
||||
:scroll-ease="scrollEase"
|
||||
:text-color="textColor"
|
||||
:font="font"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Bend Level"
|
||||
v-model="bend"
|
||||
:min="-10"
|
||||
:max="10"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Bend Level"
|
||||
v-model="bend"
|
||||
:min="-10"
|
||||
:max="10"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Border Radius"
|
||||
v-model="borderRadius"
|
||||
:min="0"
|
||||
:max="0.5"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Border Radius"
|
||||
v-model="borderRadius"
|
||||
:min="0"
|
||||
:max="0.5"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Scroll Speed"
|
||||
v-model="scrollSpeed"
|
||||
:min="0.5"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Scroll Speed"
|
||||
v-model="scrollSpeed"
|
||||
:min="0.5"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Scroll Ease"
|
||||
v-model="scrollEase"
|
||||
:min="0.01"
|
||||
:max="0.15"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Scroll Ease"
|
||||
v-model="scrollEase"
|
||||
:min="0.01"
|
||||
:max="0.15"
|
||||
:step="0.01"
|
||||
@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" />
|
||||
</Customize>
|
||||
<PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="circularGallery" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="circularGallery" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="circularGallery.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="circularGallery.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,31 +1,29 @@
|
||||
<template>
|
||||
<div class="decay-card-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="overflow: hidden">
|
||||
<DecayCard>
|
||||
<div class="text-[2rem]">
|
||||
Decay
|
||||
<br />
|
||||
Card
|
||||
</div>
|
||||
</DecayCard>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="overflow: hidden">
|
||||
<DecayCard>
|
||||
<div class="text-[2rem]">
|
||||
Decay
|
||||
<br />
|
||||
Card
|
||||
</div>
|
||||
</DecayCard>
|
||||
</div>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="decayCard" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="decayCard" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="decayCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="decayCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,86 +1,82 @@
|
||||
<template>
|
||||
<div class="dock-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="min-height: 400px; position: relative">
|
||||
<div class="demo-content">
|
||||
<Dock
|
||||
:key="rerenderKey"
|
||||
:items="items"
|
||||
:panel-height="panelHeight"
|
||||
:base-item-size="baseItemSize"
|
||||
:magnification="magnification"
|
||||
:distance="200"
|
||||
:dock-height="256"
|
||||
:spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Dock
|
||||
:key="rerenderKey"
|
||||
:items="items"
|
||||
:panel-height="panelHeight"
|
||||
:base-item-size="baseItemSize"
|
||||
:magnification="magnification"
|
||||
:distance="200"
|
||||
:dock-height="256"
|
||||
:spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Try It!
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Try It!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Background Height"
|
||||
:min="30"
|
||||
:max="200"
|
||||
:step="10"
|
||||
:model-value="panelHeight"
|
||||
@update:model-value="
|
||||
(val: number) => {
|
||||
panelHeight = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Background Height"
|
||||
:min="30"
|
||||
:max="200"
|
||||
:step="10"
|
||||
:model-value="panelHeight"
|
||||
@update:model-value="
|
||||
(val: number) => {
|
||||
panelHeight = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Item Size"
|
||||
:min="20"
|
||||
:max="60"
|
||||
:step="10"
|
||||
:model-value="baseItemSize"
|
||||
@update:model-value="
|
||||
(val: number) => {
|
||||
baseItemSize = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Item Size"
|
||||
:min="20"
|
||||
:max="60"
|
||||
:step="10"
|
||||
:model-value="baseItemSize"
|
||||
@update:model-value="
|
||||
(val: number) => {
|
||||
baseItemSize = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Magnification"
|
||||
:min="50"
|
||||
:max="100"
|
||||
:step="10"
|
||||
:model-value="magnification"
|
||||
@update:model-value="
|
||||
(val: number) => {
|
||||
magnification = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Magnification"
|
||||
:min="50"
|
||||
:max="100"
|
||||
:step="10"
|
||||
:model-value="magnification"
|
||||
@update:model-value="
|
||||
(val: number) => {
|
||||
magnification = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="dock" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="dock" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="dock.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="dock.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -179,29 +175,7 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
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>
|
||||
|
||||
@@ -1,39 +1,37 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="space-y-8">
|
||||
<div class="demo-section">
|
||||
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
|
||||
<ElasticSlider />
|
||||
</div>
|
||||
<div class="demo-section">
|
||||
<div class="demo-container relative min-h-[200px] flex items-center justify-center">
|
||||
<ElasticSlider />
|
||||
</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 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 #code>
|
||||
@@ -112,11 +110,4 @@ const propData = [
|
||||
min-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-title-extra {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
<template>
|
||||
<div class="flowing-menu-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
|
||||
<FlowingMenu :items="demoItems" />
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
|
||||
<FlowingMenu :items="demoItems" />
|
||||
</div>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="flowingMenu" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="flowingMenu" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="flowingMenu.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="flowingMenu.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,97 +1,95 @@
|
||||
<template>
|
||||
<div class="flying-posters-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
|
||||
<FlyingPosters
|
||||
:key="rerenderKey"
|
||||
:items="items"
|
||||
:plane-width="planeWidth"
|
||||
:plane-height="planeHeight"
|
||||
:distortion="distortion"
|
||||
:scroll-ease="scrollEase"
|
||||
:camera-fov="cameraFov"
|
||||
:camera-z="cameraZ"
|
||||
class="h-full w-full"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
|
||||
<FlyingPosters
|
||||
:key="rerenderKey"
|
||||
:items="items"
|
||||
:plane-width="planeWidth"
|
||||
:plane-height="planeHeight"
|
||||
:distortion="distortion"
|
||||
:scroll-ease="scrollEase"
|
||||
:camera-fov="cameraFov"
|
||||
:camera-z="cameraZ"
|
||||
class="h-full w-full"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Scroll.
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Scroll.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Plane Width"
|
||||
v-model="planeWidth"
|
||||
:min="200"
|
||||
:max="400"
|
||||
:step="20"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Plane Width"
|
||||
v-model="planeWidth"
|
||||
:min="200"
|
||||
:max="400"
|
||||
:step="20"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Plane Height"
|
||||
v-model="planeHeight"
|
||||
:min="200"
|
||||
:max="400"
|
||||
:step="20"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Plane Height"
|
||||
v-model="planeHeight"
|
||||
:min="200"
|
||||
:max="400"
|
||||
:step="20"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Distortion"
|
||||
v-model="distortion"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.5"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Distortion"
|
||||
v-model="distortion"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.5"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Scroll Ease"
|
||||
v-model="scrollEase"
|
||||
:min="0.005"
|
||||
:max="0.05"
|
||||
:step="0.005"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Scroll Ease"
|
||||
v-model="scrollEase"
|
||||
:min="0.005"
|
||||
:max="0.05"
|
||||
:step="0.005"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Camera FOV"
|
||||
v-model="cameraFov"
|
||||
:min="30"
|
||||
:max="90"
|
||||
:step="5"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Camera FOV"
|
||||
v-model="cameraFov"
|
||||
:min="30"
|
||||
:max="90"
|
||||
:step="5"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Camera Z"
|
||||
v-model="cameraZ"
|
||||
:min="10"
|
||||
:max="40"
|
||||
:step="2"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Camera Z"
|
||||
v-model="cameraZ"
|
||||
:min="10"
|
||||
:max="40"
|
||||
:step="2"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="flyingPosters" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="flyingPosters" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="flyingPosters.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="flyingPosters.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
<template>
|
||||
<div class="glass-icons-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden">
|
||||
<GlassIcons :items="items" class="my-glass-icons" />
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden">
|
||||
<GlassIcons :items="items" class="my-glass-icons" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Colorful" v-model="colorful" />
|
||||
</Customize>
|
||||
<Customize>
|
||||
<PreviewSwitch title="Colorful" v-model="colorful" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="glassIcons" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="glassIcons" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="glassIcons.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="glassIcons.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,64 +1,62 @@
|
||||
<template>
|
||||
<div class="gooey-nav-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<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"
|
||||
>
|
||||
<GooeyNav
|
||||
:key="rerenderKey"
|
||||
:items="navItems"
|
||||
:animation-time="500"
|
||||
:particle-count="particleCount"
|
||||
:particle-distances="[90, 0]"
|
||||
:particle-r="particleR"
|
||||
:time-variance="timeVariance"
|
||||
:initial-active-index="0"
|
||||
:colors="[1, 2, 3, 1, 2, 3, 1, 4]"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<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"
|
||||
>
|
||||
<GooeyNav
|
||||
:key="rerenderKey"
|
||||
:items="navItems"
|
||||
:animation-time="500"
|
||||
:particle-count="particleCount"
|
||||
:particle-distances="[90, 0]"
|
||||
:particle-r="particleR"
|
||||
:time-variance="timeVariance"
|
||||
:initial-active-index="0"
|
||||
:colors="[1, 2, 3, 1, 2, 3, 1, 4]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Particle Count"
|
||||
v-model="particleCount"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Particle Count"
|
||||
v-model="particleCount"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Animation Variance"
|
||||
v-model="timeVariance"
|
||||
:min="0"
|
||||
:max="2000"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Animation Variance"
|
||||
v-model="timeVariance"
|
||||
:min="0"
|
||||
:max="2000"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Radius Factor"
|
||||
v-model="particleR"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Radius Factor"
|
||||
v-model="particleR"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="gooeyNav" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="gooeyNav" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="gooeyNav.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="gooeyNav.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,52 +1,50 @@
|
||||
<template>
|
||||
<div class="infinite-scroll-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="demo-container"
|
||||
style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<InfiniteScroll
|
||||
:items="items"
|
||||
:is-tilted="isTilted"
|
||||
:tilt-direction="tiltDirection"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="1"
|
||||
:autoplay-direction="autoplayDirection"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="demo-container"
|
||||
style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<InfiniteScroll
|
||||
:items="items"
|
||||
:is-tilted="isTilted"
|
||||
:tilt-direction="tiltDirection"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="1"
|
||||
:autoplay-direction="autoplayDirection"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Tilt" v-model="isTilted" />
|
||||
<Customize>
|
||||
<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">
|
||||
<PreviewSelect title="Autoplay Direction" :options="autoplayOptions" v-model="autoplayDirection" />
|
||||
<template v-if="autoplay">
|
||||
<PreviewSelect title="Autoplay Direction" :options="autoplayOptions" v-model="autoplayDirection" />
|
||||
|
||||
<PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
|
||||
</template>
|
||||
</Customize>
|
||||
<PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
|
||||
</template>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="infiniteScroll" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="infiniteScroll" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="infiniteScroll.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="infiniteScroll.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,88 +1,86 @@
|
||||
<template>
|
||||
<div class="masonry-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 900px; overflow: hidden">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 900px; overflow: hidden">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<Masonry
|
||||
:key="rerenderKey"
|
||||
:items="sampleItems"
|
||||
:ease="ease"
|
||||
:duration="duration"
|
||||
:stagger="stagger"
|
||||
:animate-from="animateFrom"
|
||||
:scale-on-hover="scaleOnHover"
|
||||
:hover-scale="hoverScale"
|
||||
:blur-to-focus="blurToFocus"
|
||||
:color-shift-on-hover="colorShiftOnHover"
|
||||
class="masonry-demo-container"
|
||||
/>
|
||||
</div>
|
||||
<Masonry
|
||||
:key="rerenderKey"
|
||||
:items="sampleItems"
|
||||
:ease="ease"
|
||||
:duration="duration"
|
||||
:stagger="stagger"
|
||||
:animate-from="animateFrom"
|
||||
:scale-on-hover="scaleOnHover"
|
||||
:hover-scale="hoverScale"
|
||||
:blur-to-focus="blurToFocus"
|
||||
:color-shift-on-hover="colorShiftOnHover"
|
||||
class="masonry-demo-container"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<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
|
||||
title="Animation Direction"
|
||||
v-model="animateFrom"
|
||||
:options="[
|
||||
{ label: 'Bottom', value: 'bottom' },
|
||||
{ label: 'Top', value: 'top' },
|
||||
{ label: 'Left', value: 'left' },
|
||||
{ label: 'Right', value: 'right' },
|
||||
{ label: 'Center', value: 'center' },
|
||||
{ label: 'Random', value: 'random' }
|
||||
]"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSelect
|
||||
title="Animation Direction"
|
||||
v-model="animateFrom"
|
||||
:options="[
|
||||
{ label: 'Bottom', value: 'bottom' },
|
||||
{ label: 'Top', value: 'top' },
|
||||
{ label: 'Left', value: 'left' },
|
||||
{ label: 'Right', value: 'right' },
|
||||
{ label: 'Center', value: 'center' },
|
||||
{ label: 'Random', value: 'random' }
|
||||
]"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Duration (s)"
|
||||
v-model="duration"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Duration (s)"
|
||||
v-model="duration"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Stagger Delay (s)"
|
||||
v-model="stagger"
|
||||
:min="0.01"
|
||||
:max="0.2"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Stagger Delay (s)"
|
||||
v-model="stagger"
|
||||
:min="0.01"
|
||||
:max="0.2"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Hover Scale"
|
||||
v-model="hoverScale"
|
||||
:min="0.8"
|
||||
:max="1.2"
|
||||
:step="0.05"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Hover Scale"
|
||||
v-model="hoverScale"
|
||||
:min="0.8"
|
||||
:max="1.2"
|
||||
:step="0.05"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="masonry" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="masonry" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="masonry.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="masonry.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -167,10 +165,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.masonry-demo-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +1,34 @@
|
||||
<template>
|
||||
<div class="pixel-card-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center"
|
||||
>
|
||||
<PixelCard :key="rerenderKey" :variant="selectedVariant">
|
||||
<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>
|
||||
</div>
|
||||
</PixelCard>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
|
||||
<PixelCard :key="rerenderKey" :variant="selectedVariant">
|
||||
<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>
|
||||
</div>
|
||||
</PixelCard>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Variant"
|
||||
:options="variantOptions"
|
||||
v-model="selectedVariant"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Variant"
|
||||
:options="variantOptions"
|
||||
v-model="selectedVariant"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="pixelCard" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="pixelCard" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="pixelCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="pixelCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,48 +1,46 @@
|
||||
<template>
|
||||
<div class="profile-card-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
|
||||
<ProfileCard
|
||||
:key="rerenderKey"
|
||||
name="Javi A. Torres"
|
||||
title="Software Engineer"
|
||||
handle="javicodes"
|
||||
status="Online"
|
||||
contact-text="Contact Me"
|
||||
avatar-url="/assets/person.png"
|
||||
:icon-url="showIcon ? '/assets/iconpattern.png' : ''"
|
||||
:show-user-info="showUserInfo"
|
||||
:show-behind-gradient="showBehindGradient"
|
||||
grain-url="/assets/grain.webp"
|
||||
:behind-gradient="customBehindGradient"
|
||||
:inner-gradient="customInnerGradient"
|
||||
@contact-click="handleContactClick"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
|
||||
<ProfileCard
|
||||
:key="rerenderKey"
|
||||
name="Javi A. Torres"
|
||||
title="Software Engineer"
|
||||
handle="javicodes"
|
||||
status="Online"
|
||||
contact-text="Contact Me"
|
||||
avatar-url="/assets/person.png"
|
||||
:icon-url="showIcon ? '/assets/iconpattern.png' : ''"
|
||||
:show-user-info="showUserInfo"
|
||||
:show-behind-gradient="showBehindGradient"
|
||||
grain-url="/assets/grain.webp"
|
||||
:behind-gradient="customBehindGradient"
|
||||
:inner-gradient="customInnerGradient"
|
||||
@contact-click="handleContactClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
|
||||
<Customize>
|
||||
<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" />
|
||||
</Customize>
|
||||
<PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="profileCard" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="profileCard" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="profileCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="profileCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -208,12 +206,4 @@ const propData = [
|
||||
.randomize-btn:hover {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,47 @@
|
||||
<template>
|
||||
<div class="spotlight-card-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-10">
|
||||
<SpotlightCard class-name="custom-spotlight-card">
|
||||
<div class="flex h-full flex-col items-start justify-center">
|
||||
<i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-10">
|
||||
<SpotlightCard class-name="custom-spotlight-card">
|
||||
<div class="flex h-full flex-col items-start justify-center">
|
||||
<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">
|
||||
Get exclusive benefits, features & 24/7 support as a permanent club member.
|
||||
</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
<p class="text-sm text-zinc-400">
|
||||
Get exclusive benefits, features & 24/7 support as a permanent club member.
|
||||
</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</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">
|
||||
<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">
|
||||
<i class="pi pi-lock text-3xl mb-3 text-white"></i>
|
||||
<div class="demo-container relative py-10">
|
||||
<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">
|
||||
<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">
|
||||
Our state of the art software offers peace of mind through strict security measures.
|
||||
</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
<p class="text-sm text-zinc-400">
|
||||
Our state of the art software offers peace of mind through strict security measures.
|
||||
</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="spotlightCard" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="spotlightCard" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="spotlightCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="spotlightCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,53 +1,51 @@
|
||||
<template>
|
||||
<div class="tilted-card-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
|
||||
<TiltedCard
|
||||
image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
|
||||
alt-text="Kendrick Lamar - GNX Album Cover"
|
||||
caption-text="Kendrick Lamar - GNX"
|
||||
container-height="300px"
|
||||
container-width="300px"
|
||||
image-height="300px"
|
||||
image-width="300px"
|
||||
:rotate-amplitude="rotateAmplitude"
|
||||
:scale-on-hover="scaleOnHover"
|
||||
:show-mobile-warning="false"
|
||||
:show-tooltip="showTooltip"
|
||||
:display-overlay-content="displayOverlayContent"
|
||||
:overlay-content="displayOverlayContent"
|
||||
>
|
||||
<template #overlay>
|
||||
<p class="tilted-card-demo-text">Kendrick Lamar - GNX</p>
|
||||
</template>
|
||||
</TiltedCard>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
|
||||
<TiltedCard
|
||||
image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
|
||||
alt-text="Kendrick Lamar - GNX Album Cover"
|
||||
caption-text="Kendrick Lamar - GNX"
|
||||
container-height="300px"
|
||||
container-width="300px"
|
||||
image-height="300px"
|
||||
image-width="300px"
|
||||
:rotate-amplitude="rotateAmplitude"
|
||||
:scale-on-hover="scaleOnHover"
|
||||
:show-mobile-warning="false"
|
||||
:show-tooltip="showTooltip"
|
||||
:display-overlay-content="displayOverlayContent"
|
||||
:overlay-content="displayOverlayContent"
|
||||
>
|
||||
<template #overlay>
|
||||
<p class="tilted-card-demo-text">Kendrick Lamar - GNX</p>
|
||||
</template>
|
||||
</TiltedCard>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Rotate Amplitude" v-model="rotateAmplitude" :min="0" :max="30" :step="1" />
|
||||
<Customize>
|
||||
<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" />
|
||||
</Customize>
|
||||
<PreviewSwitch title="Show Overlay Content" v-model="displayOverlayContent" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="tiltedCard" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="tiltedCard" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="tiltedCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="tiltedCard.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,77 +1,75 @@
|
||||
<template>
|
||||
<div class="ascii-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<AsciiText
|
||||
:key="rerenderKey"
|
||||
:text="text"
|
||||
:ascii-font-size="asciiFontSize"
|
||||
:text-font-size="textFontSize"
|
||||
:text-color="textColor"
|
||||
:plane-base-height="planeBaseHeight"
|
||||
:enable-waves="enableWaves"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<AsciiText
|
||||
:key="rerenderKey"
|
||||
:text="text"
|
||||
:ascii-font-size="asciiFontSize"
|
||||
:text-font-size="textFontSize"
|
||||
:text-color="textColor"
|
||||
:plane-base-height="planeBaseHeight"
|
||||
: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>
|
||||
</Customize>
|
||||
|
||||
<Customize>
|
||||
<PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['three', '@types/three']" />
|
||||
</template>
|
||||
|
||||
<PreviewSlider
|
||||
title="ASCII Font Size"
|
||||
v-model="asciiFontSize"
|
||||
:min="2"
|
||||
:max="20"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<template #code>
|
||||
<CodeExample :code-object="asciiText" />
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</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 #cli>
|
||||
<CliInstallation :command="asciiText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,91 +1,89 @@
|
||||
<template>
|
||||
<div class="blur-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[400px] overflow-hidden">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[400px] overflow-hidden">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<BlurText
|
||||
:key="rerenderKey"
|
||||
text="Isn't this so cool?!"
|
||||
:delay="delay"
|
||||
class-name="text-3xl md:text-6xl font-bold text-center"
|
||||
:animate-by="animateBy"
|
||||
:direction="direction"
|
||||
:threshold="threshold"
|
||||
:root-margin="rootMargin"
|
||||
:step-duration="stepDuration"
|
||||
@animation-complete="
|
||||
() => {
|
||||
showCallback && showToast();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<BlurText
|
||||
:key="rerenderKey"
|
||||
text="Isn't this so cool?!"
|
||||
:delay="delay"
|
||||
class-name="blur-text-demo"
|
||||
:animate-by="animateBy"
|
||||
:direction="direction"
|
||||
:threshold="threshold"
|
||||
:root-margin="rootMargin"
|
||||
:step-duration="stepDuration"
|
||||
@animation-complete="
|
||||
() => {
|
||||
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]"> {{ 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]"> {{ direction }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
|
||||
<PreviewSlider
|
||||
title="Delay (ms)"
|
||||
v-model="delay"
|
||||
:min="50"
|
||||
:max="500"
|
||||
:step="10"
|
||||
@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]"> {{ animateBy }}</span>
|
||||
</button>
|
||||
<PreviewSlider
|
||||
title="Step Duration (s)"
|
||||
v-model="stepDuration"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.05"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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]"> {{ direction }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PreviewSlider
|
||||
title="Delay (ms)"
|
||||
v-model="delay"
|
||||
:min="50"
|
||||
:max="500"
|
||||
:step="10"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Step Duration (s)"
|
||||
v-model="stepDuration"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.05"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<template #code>
|
||||
<CodeExample :code-object="blurText" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="blurText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="blurText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="blurText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,52 +1,50 @@
|
||||
<template>
|
||||
<div class="circular-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
|
||||
<CircularText
|
||||
:key="rerenderKey"
|
||||
text="VUE * BITS * IS * AWESOME * "
|
||||
:spin-duration="spinDuration"
|
||||
:on-hover="onHover"
|
||||
class-name="text-blue-500"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
|
||||
<CircularText
|
||||
:key="rerenderKey"
|
||||
text="VUE * BITS * IS * AWESOME * "
|
||||
:spin-duration="spinDuration"
|
||||
:on-hover="onHover"
|
||||
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]"> {{ onHover }}</span>
|
||||
</button>
|
||||
</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]"> {{ onHover }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<PreviewSlider
|
||||
title="Spin Duration (s)"
|
||||
v-model="spinDuration"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PreviewSlider
|
||||
title="Spin Duration (s)"
|
||||
v-model="spinDuration"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="circularText" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="circularText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="circularText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="circularText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,73 +1,71 @@
|
||||
<template>
|
||||
<div class="curved-loop-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden p-0">
|
||||
<CurvedLoop
|
||||
:key="rerenderKey"
|
||||
:marquee-text="marqueeText"
|
||||
:speed="speed"
|
||||
:curve-amount="curveAmount"
|
||||
:interactive="interactive"
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden p-0">
|
||||
<CurvedLoop
|
||||
:key="rerenderKey"
|
||||
:marquee-text="marqueeText"
|
||||
:speed="speed"
|
||||
:curve-amount="curveAmount"
|
||||
: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>
|
||||
|
||||
<Customize>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2">Marquee Text</label>
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
v-model="speed"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<PreviewSlider
|
||||
title="Curve Amount"
|
||||
v-model="curveAmount"
|
||||
:min="-400"
|
||||
:max="400"
|
||||
:step="10"
|
||||
value-unit="px"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
v-model="speed"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSwitch
|
||||
title="Draggable"
|
||||
:model-value="interactive"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
interactive = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PreviewSlider
|
||||
title="Curve Amount"
|
||||
v-model="curveAmount"
|
||||
:min="-400"
|
||||
:max="400"
|
||||
:step="10"
|
||||
value-unit="px"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Draggable"
|
||||
:model-value="interactive"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
interactive = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
<template #code>
|
||||
<CodeExample :code-object="curvedLoop" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="curvedLoop" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="curvedLoop.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="curvedLoop.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,119 +1,117 @@
|
||||
<template>
|
||||
<div class="decrypted-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-6 overflow-hidden">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative py-6 overflow-hidden">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
|
||||
<div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="Ahoy, matey!"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
/>
|
||||
<div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="Ahoy, matey!"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
/>
|
||||
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="Set yer eyes on this"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
/>
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="Set yer eyes on this"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
/>
|
||||
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="And try tinkerin' round'"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
/>
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="And try tinkerin' round'"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
/>
|
||||
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="with these here props, arr!"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
@animation-complete="() => console.log('✅ Animation Finished!')"
|
||||
/>
|
||||
</div>
|
||||
<DecryptedText
|
||||
:speed="speed"
|
||||
text="with these here props, arr!"
|
||||
:max-iterations="maxIterations"
|
||||
:sequential="sequential"
|
||||
:reveal-direction="revealDirection"
|
||||
parent-class-name="decrypted-text"
|
||||
:use-original-chars-only="useOriginalCharsOnly"
|
||||
:animate-on="animateOn"
|
||||
@animation-complete="() => console.log('✅ Animation Finished!')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<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
|
||||
title="Speed"
|
||||
v-model="speed"
|
||||
:min="10"
|
||||
:max="200"
|
||||
:step="10"
|
||||
value-unit="ms"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
v-model="speed"
|
||||
:min="10"
|
||||
:max="200"
|
||||
:step="10"
|
||||
value-unit="ms"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Iterations"
|
||||
v-model="maxIterations"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Iterations"
|
||||
v-model="maxIterations"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSelect
|
||||
title="Animation Trigger"
|
||||
v-model="animateOn"
|
||||
:options="animateOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
animateOn = val as 'view' | 'hover';
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSelect
|
||||
title="Animation Trigger"
|
||||
v-model="animateOn"
|
||||
:options="animateOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
animateOn = val as 'view' | 'hover';
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSelect
|
||||
title="Animation Direction"
|
||||
v-model="revealDirection"
|
||||
:options="directionOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
revealDirection = val as 'start' | 'end' | 'center';
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Direction"
|
||||
v-model="revealDirection"
|
||||
:options="directionOptions"
|
||||
@update:model-value="
|
||||
val => {
|
||||
revealDirection = val as 'start' | 'end' | 'center';
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="decryptedText" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="decryptedText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="decryptedText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="decryptedText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,64 +1,62 @@
|
||||
<template>
|
||||
<div class="falling-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
|
||||
<FallingText
|
||||
:key="key"
|
||||
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']"
|
||||
:trigger="trigger"
|
||||
:gravity="gravity"
|
||||
font-size="2rem"
|
||||
:mouse-constraint-stiffness="mouseConstraintStiffness"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
|
||||
<FallingText
|
||||
:key="key"
|
||||
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']"
|
||||
:trigger="trigger"
|
||||
:gravity="gravity"
|
||||
font-size="2rem"
|
||||
:mouse-constraint-stiffness="mouseConstraintStiffness"
|
||||
/>
|
||||
|
||||
<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' }}
|
||||
</div>
|
||||
<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' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Trigger"
|
||||
v-model="trigger"
|
||||
:options="triggerOptions"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSelect
|
||||
title="Animation Trigger"
|
||||
v-model="trigger"
|
||||
:options="triggerOptions"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Gravity"
|
||||
v-model="gravity"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Gravity"
|
||||
v-model="gravity"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Mouse Constraint Stiffness"
|
||||
v-model="mouseConstraintStiffness"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Mouse Constraint Stiffness"
|
||||
v-model="mouseConstraintStiffness"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['matter-js']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['matter-js']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="fallingText" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="fallingText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="fallingText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="fallingText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -141,5 +139,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,75 +1,73 @@
|
||||
<template>
|
||||
<div class="fuzzy-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<FuzzyText
|
||||
:key="`main-${rerenderKey}`"
|
||||
text="404"
|
||||
:base-intensity="baseIntensity"
|
||||
:hover-intensity="hoverIntensity"
|
||||
:enable-hover="enableHover"
|
||||
:font-size="140"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<FuzzyText
|
||||
:key="`main-${rerenderKey}`"
|
||||
text="404"
|
||||
:base-intensity="baseIntensity"
|
||||
:hover-intensity="hoverIntensity"
|
||||
:enable-hover="enableHover"
|
||||
:font-size="140"
|
||||
/>
|
||||
|
||||
<div class="my-1" />
|
||||
<div class="my-1" />
|
||||
|
||||
<FuzzyText
|
||||
:key="`sub-${rerenderKey}`"
|
||||
text="not found"
|
||||
:base-intensity="baseIntensity"
|
||||
:hover-intensity="hoverIntensity"
|
||||
:enable-hover="enableHover"
|
||||
:font-size="70"
|
||||
font-family="Gochi Hand"
|
||||
/>
|
||||
</div>
|
||||
<FuzzyText
|
||||
:key="`sub-${rerenderKey}`"
|
||||
text="not found"
|
||||
:base-intensity="baseIntensity"
|
||||
:hover-intensity="hoverIntensity"
|
||||
:enable-hover="enableHover"
|
||||
:font-size="70"
|
||||
font-family="Gochi Hand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Base Intensity"
|
||||
v-model="baseIntensity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Base Intensity"
|
||||
v-model="baseIntensity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Hover Intensity"
|
||||
v-model="hoverIntensity"
|
||||
:min="0"
|
||||
:max="2"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Hover Intensity"
|
||||
v-model="hoverIntensity"
|
||||
:min="0"
|
||||
:max="2"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Enable Hover"
|
||||
:model-value="enableHover"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
enableHover = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSwitch
|
||||
title="Enable Hover"
|
||||
:model-value="enableHover"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
enableHover = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="fuzzyText" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="fuzzyText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="fuzzyText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="fuzzyText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,41 +1,39 @@
|
||||
<template>
|
||||
<div class="glitchtext-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<GlitchText
|
||||
:children="text"
|
||||
:speed="speed"
|
||||
:enable-shadows="enableShadows"
|
||||
:enable-on-hover="enableOnHover"
|
||||
class-name="demo-glitch-text"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<GlitchText
|
||||
:children="text"
|
||||
:speed="speed"
|
||||
:enable-shadows="enableShadows"
|
||||
:enable-on-hover="enableOnHover"
|
||||
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>
|
||||
</Customize>
|
||||
|
||||
<Customize>
|
||||
<div class="mb-4">
|
||||
<PreviewText title="Text" v-model="text" />
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<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" />
|
||||
|
||||
<PreviewSwitch title="Glitch On Hover" v-model="enableOnHover" />
|
||||
</div>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="glitchText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="glitchText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="glitchText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -133,16 +133,4 @@ const propData = [
|
||||
.demo-container {
|
||||
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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative min-h-[400px] max-h-[400px] overflow-hidden demo-container">
|
||||
<div class="min-h-[400px] demo-container">
|
||||
<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"
|
||||
>
|
||||
|
||||
@@ -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">
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
@@ -54,54 +103,3 @@ const propData = [
|
||||
}
|
||||
];
|
||||
</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>
|
||||
|
||||
@@ -181,8 +181,7 @@ const propData = [
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
padding-top: 150vh !important;
|
||||
padding-bottom: 50vh;
|
||||
padding: 150vh 2em 50vh 2em;
|
||||
}
|
||||
|
||||
.scroll-instruction {
|
||||
|
||||
@@ -1,48 +1,46 @@
|
||||
<template>
|
||||
<div class="shiny-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Basic</h2>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Basic</h2>
|
||||
|
||||
<div class="demo-container">
|
||||
<ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
|
||||
<div class="demo-container">
|
||||
<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>
|
||||
|
||||
<h2 class="demo-title-extra">Button Text</h2>
|
||||
<h2 class="demo-title-extra">Configurable Speed</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 class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
|
||||
<ShinyText
|
||||
:text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
|
||||
:disabled="false"
|
||||
: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">
|
||||
<ShinyText
|
||||
:text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
|
||||
:disabled="false"
|
||||
:speed="speed"
|
||||
class-name="shiny-text-demo"
|
||||
/>
|
||||
</div>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
|
||||
</Customize>
|
||||
<template #code>
|
||||
<CodeExample :code-object="shinyText" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="shinyText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="shinyText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="shinyText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,72 +1,70 @@
|
||||
<template>
|
||||
<div class="split-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<SplitText
|
||||
:key="rerenderKey"
|
||||
text="Hello, Vue!"
|
||||
:delay="delay"
|
||||
:duration="duration"
|
||||
:ease="ease"
|
||||
:split-type="splitType"
|
||||
:threshold="threshold"
|
||||
class="split-text-demo-text"
|
||||
@animation-complete="
|
||||
() => {
|
||||
showCallback && showToast();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<SplitText
|
||||
:key="rerenderKey"
|
||||
text="Hello, Vue!"
|
||||
:delay="delay"
|
||||
:duration="duration"
|
||||
:ease="ease"
|
||||
:split-type="splitType"
|
||||
:threshold="threshold"
|
||||
class="split-text-demo"
|
||||
@animation-complete="
|
||||
() => {
|
||||
showCallback && showToast();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Stagger Delay (ms)"
|
||||
v-model="delay"
|
||||
:min="10"
|
||||
:max="500"
|
||||
:step="10"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Stagger Delay (ms)"
|
||||
v-model="delay"
|
||||
:min="10"
|
||||
:max="500"
|
||||
:step="10"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Duration (s)"
|
||||
v-model="duration"
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Duration (s)"
|
||||
v-model="duration"
|
||||
:min="0.1"
|
||||
:max="3"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Threshold"
|
||||
v-model="threshold"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="splitText" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="splitText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="splitText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="splitText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -86,7 +84,7 @@ import { useToast } from 'primevue/usetoast';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
|
||||
const delay = ref(10);
|
||||
const duration = ref(2);
|
||||
const duration = ref(3);
|
||||
const ease = ref('elastic.out(1, 0.3)');
|
||||
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
|
||||
const threshold = ref(0.1);
|
||||
|
||||
@@ -1,58 +1,56 @@
|
||||
<template>
|
||||
<div class="text-cursor-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden">
|
||||
<TextCursor
|
||||
:key="key"
|
||||
:text="text"
|
||||
:follow-mouse-direction="followMouseDirection"
|
||||
:random-float="randomFloat"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px]">
|
||||
<TextCursor
|
||||
:key="key"
|
||||
:text="text"
|
||||
:follow-mouse-direction="followMouseDirection"
|
||||
:random-float="randomFloat"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Hover Around!
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
|
||||
>
|
||||
Hover Around!
|
||||
</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>
|
||||
|
||||
<Customize>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2">Text</label>
|
||||
<PreviewSwitch
|
||||
title="Follow Mouse Direction"
|
||||
v-model="followMouseDirection"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Follow Mouse Direction"
|
||||
v-model="followMouseDirection"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<template #code>
|
||||
<CodeExample :code-object="textCursor" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="textCursor" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="textCursor.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="textCursor.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,127 +1,123 @@
|
||||
<template>
|
||||
<div class="text-pressure-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative bg-[#060010] min-h-[400px] max-h-[450px] overflow-hidden mb-6">
|
||||
<div class="w-full h-full">
|
||||
<TextPressure
|
||||
:key="rerenderKey"
|
||||
:text="text"
|
||||
:flex="flex"
|
||||
:alpha="alpha"
|
||||
:stroke="stroke"
|
||||
:width="width"
|
||||
:weight="weight"
|
||||
:italic="italic"
|
||||
:text-color="textColor"
|
||||
:stroke-color="strokeColor"
|
||||
:min-font-size="36"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container min-h-[400px]">
|
||||
<TextPressure
|
||||
:key="rerenderKey"
|
||||
:text="text"
|
||||
:flex="flex"
|
||||
:alpha="alpha"
|
||||
:stroke="stroke"
|
||||
:width="width"
|
||||
:weight="weight"
|
||||
:italic="italic"
|
||||
:text-color="textColor"
|
||||
:stroke-color="strokeColor"
|
||||
:min-font-size="36"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<Customize>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2">Text</label>
|
||||
<div class="color-controls">
|
||||
<PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
|
||||
|
||||
<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>
|
||||
<PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
|
||||
</div>
|
||||
|
||||
<div class="color-controls">
|
||||
<PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
|
||||
<p class="mt-6 text-[#999] text-sm">Animation Settings</p>
|
||||
|
||||
<PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
|
||||
</div>
|
||||
<div class="flex gap-4 flex-wrap">
|
||||
<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
|
||||
title="Flex"
|
||||
:model-value="flex"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
flex = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSwitch
|
||||
title="Stroke"
|
||||
:model-value="stroke"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
stroke = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Alpha"
|
||||
:model-value="alpha"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
alpha = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSwitch
|
||||
title="Width"
|
||||
:model-value="width"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
width = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Stroke"
|
||||
:model-value="stroke"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
stroke = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSwitch
|
||||
title="Weight"
|
||||
:model-value="weight"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
weight = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Width"
|
||||
:model-value="width"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
width = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PreviewSwitch
|
||||
title="Italic"
|
||||
:model-value="italic"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
italic = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</Customize>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Weight"
|
||||
:model-value="weight"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
weight = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Italic"
|
||||
:model-value="italic"
|
||||
@update:model-value="
|
||||
(val: boolean) => {
|
||||
italic = val;
|
||||
forceRerender();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</Customize>
|
||||
<template #code>
|
||||
<CodeExample :code-object="textPressure" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="textPressure" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="textPressure.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="textPressure.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,73 +1,71 @@
|
||||
<template>
|
||||
<div class="text-trail-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative h-[500px] overflow-hidden p-0">
|
||||
<TextTrail
|
||||
:key="`${key}-${animateColor}`"
|
||||
:noise-factor="noiseFactor"
|
||||
:noise-scale="noiseScale / 10000"
|
||||
:font-weight="fontWeight"
|
||||
:alpha-persist-factor="alphaPersistFactor"
|
||||
:animate-color="animateColor"
|
||||
:text-color="animateColor ? undefined : '#ffffff'"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px]">
|
||||
<TextTrail
|
||||
:key="`${key}-${animateColor}`"
|
||||
:noise-factor="noiseFactor"
|
||||
:noise-scale="noiseScale / 10000"
|
||||
:font-weight="fontWeight"
|
||||
:alpha-persist-factor="alphaPersistFactor"
|
||||
:animate-color="animateColor"
|
||||
:text-color="animateColor ? undefined : '#ffffff'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Noise Factor"
|
||||
v-model="noiseFactor"
|
||||
:min="1"
|
||||
:max="25"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSlider
|
||||
title="Noise Factor"
|
||||
v-model="noiseFactor"
|
||||
:min="1"
|
||||
:max="25"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Noise Scale"
|
||||
v-model="noiseScale"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Noise Scale"
|
||||
v-model="noiseScale"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Font Weight"
|
||||
v-model="fontWeight"
|
||||
:min="100"
|
||||
:max="900"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Font Weight"
|
||||
v-model="fontWeight"
|
||||
:min="100"
|
||||
:max="900"
|
||||
:step="100"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Alpha Persist Factor"
|
||||
v-model="alphaPersistFactor"
|
||||
:min="0.5"
|
||||
:max="0.95"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Alpha Persist Factor"
|
||||
v-model="alphaPersistFactor"
|
||||
:min="0.5"
|
||||
:max="0.95"
|
||||
:step="0.01"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
<PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="textTrail" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="textTrail" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="textTrail.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="textTrail.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,65 +1,63 @@
|
||||
<template>
|
||||
<div class="truefocus-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<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">
|
||||
<TrueFocus v-bind="config" />
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
|
||||
<TrueFocus :key="key" v-bind="config" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
|
||||
<Customize>
|
||||
<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
|
||||
title="Blur Amount"
|
||||
v-model="blurAmount"
|
||||
:min="0"
|
||||
:max="15"
|
||||
:step="0.5"
|
||||
value-unit="px"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Blur Amount"
|
||||
v-model="blurAmount"
|
||||
:min="0"
|
||||
:max="15"
|
||||
:step="0.5"
|
||||
value-unit="px"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Animation Duration"
|
||||
v-model="animationDuration"
|
||||
:min="0.1"
|
||||
:max="3"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
:disabled="!manualMode"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Animation Duration"
|
||||
v-model="animationDuration"
|
||||
:min="0.1"
|
||||
:max="3"
|
||||
:step="0.1"
|
||||
value-unit="s"
|
||||
:disabled="!manualMode"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Pause Between Animations"
|
||||
v-model="pauseBetweenAnimations"
|
||||
:min="0"
|
||||
:max="5"
|
||||
:step="0.5"
|
||||
value-unit="s"
|
||||
:disabled="manualMode"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSlider
|
||||
title="Pause Between Animations"
|
||||
v-model="pauseBetweenAnimations"
|
||||
:min="0"
|
||||
:max="5"
|
||||
:step="0.5"
|
||||
value-unit="s"
|
||||
:disabled="manualMode"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="trueFocus" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="trueFocus" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="trueFocus.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="trueFocus.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user