mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-08 16:09:31 -06:00
Simplify demo components
This commit is contained in:
David Haz
@@ -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