mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-09 00:19:31 -06:00
Simplify demo components
This commit is contained in:
David Haz
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user