mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-22 01:54:38 -06:00
Merge pull request #137 from Utkarsh-Singhal-26/refact/text-animations
[ REVAMP ] : Text Animations
This commit is contained in:
David
GitHub
@@ -1,33 +1,24 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<div class="h-[400px] overflow-hidden demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<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();
|
||||
}
|
||||
"
|
||||
:delay="delay"
|
||||
class-name="blur-text-demo"
|
||||
@animation-complete="showToast"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
|
||||
|
||||
<div class="flex gap-4 flex-wrap">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<button
|
||||
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors cursor-pointer"
|
||||
class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
|
||||
@click="toggleAnimateBy"
|
||||
>
|
||||
Animate By:
|
||||
@@ -35,7 +26,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors cursor-pointer"
|
||||
class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
|
||||
@click="toggleDirection"
|
||||
>
|
||||
Direction:
|
||||
@@ -43,11 +34,15 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<PreviewSlider title="Delay (ms)" v-model="delay" :min="50" :max="500" :step="10" />
|
||||
|
||||
<PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05" />
|
||||
|
||||
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
|
||||
<PreviewSlider
|
||||
title="Delay"
|
||||
v-model="delay"
|
||||
:min="50"
|
||||
:max="500"
|
||||
:step="10"
|
||||
value-unit="ms"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
@@ -66,30 +61,26 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import RefreshButton from '../../components/common/RefreshButton.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import BlurText from '../../content/TextAnimations/BlurText/BlurText.vue';
|
||||
import { blurText } from '@/constants/code/TextAnimations/blurTextCode';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue';
|
||||
import CodeExample from '@/components/code/CodeExample.vue';
|
||||
import Dependencies from '@/components/code/Dependencies.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PropTable from '@/components/common/PropTable.vue';
|
||||
import RefreshButton from '@/components/common/RefreshButton.vue';
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
import { blurText } from '@/constants/code/TextAnimations/blurTextCode';
|
||||
import BlurText from '@/content/TextAnimations/BlurText/BlurText.vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const { rerenderKey, forceRerender } = useForceRerender();
|
||||
const toast = useToast();
|
||||
|
||||
const animateBy = ref<'words' | 'letters'>('words');
|
||||
const direction = ref<'top' | 'bottom'>('top');
|
||||
const delay = ref(200);
|
||||
const stepDuration = ref(0.35);
|
||||
const threshold = ref(0.1);
|
||||
const rootMargin = ref('0px');
|
||||
const showCallback = ref(true);
|
||||
const toast = useToast();
|
||||
const { rerenderKey, forceRerender } = useForceRerender();
|
||||
|
||||
const toggleAnimateBy = () => {
|
||||
animateBy.value = animateBy.value === 'words' ? 'letters' : 'words';
|
||||
@@ -110,18 +101,23 @@ const showToast = () => {
|
||||
};
|
||||
|
||||
const propData = [
|
||||
{ name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
|
||||
{
|
||||
name: 'text',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'The text content to animate.'
|
||||
},
|
||||
{
|
||||
name: 'animateBy',
|
||||
type: 'string',
|
||||
default: '"words"',
|
||||
description: 'Determines whether to animate by "words" or "letters".'
|
||||
description: "Determines whether to animate by 'words' or 'letters'."
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: 'string',
|
||||
default: '"top"',
|
||||
description: 'Direction from which the words/letters appear ("top" or "bottom").'
|
||||
description: "Direction from which the words/letters appear ('top' or 'bottom')."
|
||||
},
|
||||
{
|
||||
name: 'delay',
|
||||
@@ -141,16 +137,12 @@ const propData = [
|
||||
default: '0.1',
|
||||
description: 'Intersection threshold for triggering the animation.'
|
||||
},
|
||||
{ name: 'rootMargin', type: 'string', default: '"0px"', description: 'Root margin for the intersection observer.' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
|
||||
{ name: 'animationFrom', type: 'object', default: 'undefined', description: 'Custom initial animation properties.' },
|
||||
{
|
||||
name: 'animationTo',
|
||||
type: 'array',
|
||||
default: 'undefined',
|
||||
description: 'Custom target animation properties array.'
|
||||
name: 'rootMargin',
|
||||
type: 'string',
|
||||
default: '"0px"',
|
||||
description: 'Root margin for the intersection observer.'
|
||||
},
|
||||
{ name: 'easing', type: 'function', default: '(t) => t', description: 'Custom easing function for the animation.' },
|
||||
{
|
||||
name: 'onAnimationComplete',
|
||||
type: 'function',
|
||||
|
||||
@@ -1,28 +1,14 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[400px] overflow-hidden">
|
||||
<CircularText
|
||||
:key="rerenderKey"
|
||||
text="VUE * BITS * IS * AWESOME * "
|
||||
:spin-duration="spinDuration"
|
||||
:on-hover="onHover"
|
||||
class-name="text-blue-500"
|
||||
/>
|
||||
<div class="h-[400px] overflow-hidden demo-container">
|
||||
<CircularText :key="rerenderKey" :text="text" :spin-duration="spinDuration" :on-hover="onHover" />
|
||||
</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" />
|
||||
<PreviewText title="Text" v-model="text" />
|
||||
<PreviewSelect title="On Hover" v-model="onHover" :options="hoverOptions" />
|
||||
<PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="60" :step="1" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
@@ -41,45 +27,58 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import CircularText from '../../content/TextAnimations/CircularText/CircularText.vue';
|
||||
import { circularText } from '@/constants/code/TextAnimations/circularTextCode';
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue';
|
||||
import CodeExample from '@/components/code/CodeExample.vue';
|
||||
import Dependencies from '@/components/code/Dependencies.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import PreviewSelect from '@/components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PreviewText from '@/components/common/PreviewText.vue';
|
||||
import PropTable from '@/components/common/PropTable.vue';
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
import { circularText } from '@/constants/code/TextAnimations/circularTextCode';
|
||||
import CircularText from '@/content/TextAnimations/CircularText/CircularText.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const { rerenderKey } = useForceRerender();
|
||||
|
||||
const text = ref('VUE*BITS*COMPONENTS*');
|
||||
const onHover = ref<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'>('speedUp');
|
||||
const spinDuration = ref(20);
|
||||
const { rerenderKey, forceRerender } = useForceRerender();
|
||||
|
||||
const hoverOptions: Array<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'> = [
|
||||
'slowDown',
|
||||
'speedUp',
|
||||
'pause',
|
||||
'goBonkers'
|
||||
const hoverOptions = [
|
||||
{ label: 'Slow Down', value: 'slowDown' },
|
||||
{ label: 'Speed Up', value: 'speedUp' },
|
||||
{ label: 'Pause', value: 'pause' },
|
||||
{ label: 'Go Bonkers', value: 'goBonkers' }
|
||||
];
|
||||
|
||||
const toggleOnHover = () => {
|
||||
const currentIndex = hoverOptions.indexOf(onHover.value);
|
||||
const nextIndex = (currentIndex + 1) % hoverOptions.length;
|
||||
onHover.value = hoverOptions[nextIndex];
|
||||
forceRerender();
|
||||
};
|
||||
|
||||
const propData = [
|
||||
{ name: 'text', type: 'string', default: '""', description: 'The text content to display in a circular pattern.' },
|
||||
{ name: 'spinDuration', type: 'number', default: '20', description: 'Duration of one full rotation in seconds.' },
|
||||
{
|
||||
name: 'text',
|
||||
type: 'string',
|
||||
default: "''",
|
||||
description: 'The text to display in a circular layout.'
|
||||
},
|
||||
{
|
||||
name: 'spinDuration',
|
||||
type: 'number',
|
||||
default: '20',
|
||||
description: 'The duration (in seconds) for one full rotation.'
|
||||
},
|
||||
{
|
||||
name: 'onHover',
|
||||
type: 'string',
|
||||
default: '"speedUp"',
|
||||
description: 'Hover behavior: "slowDown", "speedUp", "pause", or "goBonkers".'
|
||||
type: "'slowDown' | 'speedUp' | 'pause' | 'goBonkers'",
|
||||
default: 'undefined',
|
||||
description:
|
||||
"Specifies the hover behavior variant. Options include 'slowDown', 'speedUp', 'pause', and 'goBonkers'."
|
||||
},
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' }
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
default: "''",
|
||||
description: 'Optional additional CSS classes to apply to the component.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -1,37 +1,74 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[500px] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<div class="h-[500px] overflow-hidden demo-container">
|
||||
<div class="flex flex-col justify-center items-center h-full">
|
||||
<FuzzyText
|
||||
:key="`main-${rerenderKey}`"
|
||||
text="404"
|
||||
:base-intensity="baseIntensity"
|
||||
:hover-intensity="hoverIntensity"
|
||||
:enable-hover="enableHover"
|
||||
:fuzz-range="fuzzRange"
|
||||
:fps="fps"
|
||||
:direction="direction"
|
||||
:transition-duration="transitionDuration"
|
||||
:click-effect="clickEffect"
|
||||
:glitch-mode="glitchMode"
|
||||
:glitch-interval="glitchInterval"
|
||||
:glitch-duration="glitchDuration"
|
||||
:letter-spacing="letterSpacing"
|
||||
:font-size="140"
|
||||
/>
|
||||
|
||||
>
|
||||
404
|
||||
</FuzzyText>
|
||||
<div class="my-1" />
|
||||
|
||||
<FuzzyText
|
||||
:key="`sub-${rerenderKey}`"
|
||||
text="not found"
|
||||
:base-intensity="baseIntensity"
|
||||
:hover-intensity="hoverIntensity"
|
||||
:enable-hover="enableHover"
|
||||
:fuzz-range="fuzzRange"
|
||||
:fps="fps"
|
||||
:direction="direction"
|
||||
:transition-duration="transitionDuration"
|
||||
:click-effect="clickEffect"
|
||||
:glitch-mode="glitchMode"
|
||||
:glitch-interval="glitchInterval"
|
||||
:glitch-duration="glitchDuration"
|
||||
:letter-spacing="letterSpacing"
|
||||
:font-size="70"
|
||||
font-family="Gochi Hand"
|
||||
/>
|
||||
>
|
||||
not found
|
||||
</FuzzyText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01" />
|
||||
|
||||
<PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01" />
|
||||
|
||||
<PreviewSlider title="Fuzz Range" v-model="fuzzRange" :min="5" :max="100" :step="1" />
|
||||
<PreviewSlider title="FPS" v-model="fps" :min="10" :max="120" :step="5" />
|
||||
<PreviewSlider title="Transition Duration" v-model="transitionDuration" :min="0" :max="60" :step="1" />
|
||||
<PreviewSlider title="Letter Spacing" v-model="letterSpacing" :min="-10" :max="50" :step="1" />
|
||||
<PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
|
||||
<PreviewSwitch title="Enable Hover" v-model="enableHover" />
|
||||
<PreviewSwitch title="Click Effect" v-model="clickEffect" />
|
||||
<PreviewSwitch title="Glitch Mode" v-model="glitchMode" />
|
||||
<PreviewSlider
|
||||
title="Glitch Interval"
|
||||
v-model="glitchInterval"
|
||||
:min="500"
|
||||
:max="5000"
|
||||
:step="100"
|
||||
:disabled="!glitchMode"
|
||||
/>
|
||||
<PreviewSlider
|
||||
title="Glitch Duration"
|
||||
v-model="glitchDuration"
|
||||
:min="50"
|
||||
:max="1000"
|
||||
:step="50"
|
||||
:disabled="!glitchMode"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
@@ -48,35 +85,47 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.vue';
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue';
|
||||
import CodeExample from '@/components/code/CodeExample.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
|
||||
import PropTable from '@/components/common/PropTable.vue';
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue';
|
||||
import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
import FuzzyText from '@/content/TextAnimations/FuzzyText/FuzzyText.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const baseIntensity = ref(0.2);
|
||||
const hoverIntensity = ref(0.5);
|
||||
const enableHover = ref(true);
|
||||
const fuzzRange = ref(30);
|
||||
const fps = ref(60);
|
||||
const direction = ref<'horizontal' | 'vertical' | 'both'>('horizontal');
|
||||
const transitionDuration = ref(0);
|
||||
const clickEffect = ref(false);
|
||||
const glitchMode = ref(false);
|
||||
const glitchInterval = ref(2000);
|
||||
const glitchDuration = ref(200);
|
||||
const letterSpacing = ref(0);
|
||||
|
||||
const { rerenderKey } = useForceRerender();
|
||||
const directionOptions = [
|
||||
{ value: 'horizontal', label: 'Horizontal' },
|
||||
{ value: 'vertical', label: 'Vertical' },
|
||||
{ value: 'both', label: 'Both' }
|
||||
];
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'text',
|
||||
name: 'slot',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
default: '',
|
||||
description: 'The text content to display inside the fuzzy text component.'
|
||||
},
|
||||
{
|
||||
name: 'fontSize',
|
||||
type: 'number | string',
|
||||
default: '"clamp(2rem, 8vw, 8rem)"',
|
||||
default: `"clamp(2rem, 8vw, 8rem)"`,
|
||||
description:
|
||||
'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
|
||||
},
|
||||
@@ -89,8 +138,8 @@ const propData = [
|
||||
{
|
||||
name: 'fontFamily',
|
||||
type: 'string',
|
||||
default: '"inherit"',
|
||||
description: 'Specifies the font family of the text. "inherit" uses the computed style from the parent.'
|
||||
default: `"inherit"`,
|
||||
description: "Specifies the font family of the text. 'inherit' uses the computed style from the parent."
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
@@ -115,6 +164,72 @@ const propData = [
|
||||
type: 'number',
|
||||
default: '0.5',
|
||||
description: 'The fuzz intensity when the text is hovered.'
|
||||
},
|
||||
{
|
||||
name: 'fuzzRange',
|
||||
type: 'number',
|
||||
default: '30',
|
||||
description: 'Maximum pixel displacement for the fuzzy effect.'
|
||||
},
|
||||
{
|
||||
name: 'fps',
|
||||
type: 'number',
|
||||
default: '60',
|
||||
description: 'Frame rate cap for the animation. Lower values reduce CPU usage.'
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: `'horizontal' | 'vertical' | 'both'`,
|
||||
default: `'horizontal'`,
|
||||
description: 'The axis/axes for the fuzzy displacement effect.'
|
||||
},
|
||||
{
|
||||
name: 'transitionDuration',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: 'Number of frames to ease between intensity states for smooth transitions.'
|
||||
},
|
||||
{
|
||||
name: 'clickEffect',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Enables a momentary burst of maximum intensity on click.'
|
||||
},
|
||||
{
|
||||
name: 'glitchMode',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Enables periodic random intensity spikes for a glitch effect.'
|
||||
},
|
||||
{
|
||||
name: 'glitchInterval',
|
||||
type: 'number',
|
||||
default: '2000',
|
||||
description: 'Milliseconds between glitch bursts when glitchMode is enabled.'
|
||||
},
|
||||
{
|
||||
name: 'glitchDuration',
|
||||
type: 'number',
|
||||
default: '200',
|
||||
description: 'Milliseconds duration of each glitch burst.'
|
||||
},
|
||||
{
|
||||
name: 'gradient',
|
||||
type: 'string[] | null',
|
||||
default: 'null',
|
||||
description: 'Array of colors to create a gradient text effect (e.g. ["#ff0000", "#00ff00"]).'
|
||||
},
|
||||
{
|
||||
name: 'letterSpacing',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: 'Extra pixels between characters.'
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
default: `''`,
|
||||
description: 'CSS class for the canvas element.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -2,69 +2,77 @@
|
||||
<div class="gradient-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Default</h2>
|
||||
|
||||
<div class="demo-container h-[200px]">
|
||||
<div class="text-[2rem]">
|
||||
<GradientText
|
||||
text="Add a splash of color!"
|
||||
:colors="gradientPreview"
|
||||
:animation-speed="speed"
|
||||
:show-border="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="demo-title-extra">Border Animation</h2>
|
||||
|
||||
<div class="demo-container h-[200px]">
|
||||
<div class="text-[2rem]">
|
||||
<GradientText
|
||||
text="Now with a cool border!"
|
||||
:colors="gradientPreview"
|
||||
:animation-speed="speed"
|
||||
:show-border="true"
|
||||
class-name="custom-gradient-class"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative h-[400px] text-5xl demo-container">
|
||||
<GradientText
|
||||
:colors="colors"
|
||||
:animation-speed="animationSpeed"
|
||||
:direction="direction"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
:yoyo="yoyo"
|
||||
:show-border="showBorder"
|
||||
>
|
||||
Gradient Magic
|
||||
</GradientText>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Loop Duration" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
|
||||
<PreviewSlider
|
||||
title="Animation Speed"
|
||||
v-model="animationSpeed"
|
||||
:min="1"
|
||||
:max="20"
|
||||
:step="0.5"
|
||||
value-unit="s"
|
||||
/>
|
||||
<PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
|
||||
<PreviewSwitch title="Yoyo Mode" v-model="yoyo" />
|
||||
<PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
|
||||
<PreviewSwitch title="Show Border" v-model="showBorder" />
|
||||
|
||||
<div class="flex flex-col gap-0">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2">Colors</label>
|
||||
<label class="block mb-2 font-medium text-sm">Colors</label>
|
||||
|
||||
<input
|
||||
v-model="colors"
|
||||
type="text"
|
||||
placeholder="Enter colors separated by commas"
|
||||
maxlength="100"
|
||||
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
|
||||
/>
|
||||
<div class="flex flex-wrap gap-2 px-1 pt-1">
|
||||
<div v-for="(color, index) in colors" :key="index" class="relative w-8 h-8">
|
||||
<div
|
||||
class="relative border-[#222] border-2 rounded-md w-8 h-8 overflow-hidden"
|
||||
:style="{ backgroundColor: color }"
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
:value="color"
|
||||
@input="updateColor(index, ($event.target as HTMLInputElement).value)"
|
||||
class="absolute inset-0 opacity-0 w-8 h-8 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="colors.length > 2"
|
||||
@click="removeColor(index)"
|
||||
class="-top-1.5 -right-1.5 absolute flex justify-center items-center bg-[#170D27] border border-[#222] rounded-full w-4 h-4 cursor-pointer"
|
||||
>
|
||||
<i class="text-[#8BC79A] text-[8px]! pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="colors.length < 8"
|
||||
@click="addColor"
|
||||
class="flex justify-center items-center border-[#392e4e] border-2 hover:border-[#27FF64] border-dashed rounded-md w-8 h-8 transition-colors cursor-pointer"
|
||||
>
|
||||
<i class="text-[#8BC79A] text-sm pi pi-plus" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-[300px] h-3 rounded-md border border-[#333333]"
|
||||
class="mt-3 border border-[#333333] rounded-md w-[300px] h-3"
|
||||
:style="{
|
||||
background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
|
||||
background: `linear-gradient(to right, ${gradientPreview})`
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</Customize>
|
||||
|
||||
<p class="demo-extra-info mt-4 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
For a smoother animation, the gradient should start and end with the same color.
|
||||
</p>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
@@ -80,27 +88,57 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import GradientText from '../../content/TextAnimations/GradientText/GradientText.vue';
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue';
|
||||
import CodeExample from '@/components/code/CodeExample.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import PreviewSelect from '@/components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
|
||||
import PropTable from '@/components/common/PropTable.vue';
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue';
|
||||
import { gradientText } from '@/constants/code/TextAnimations/gradientTextCode';
|
||||
import GradientText from '@/content/TextAnimations/GradientText/GradientText.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const colors = ref('#40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa');
|
||||
const speed = ref(3);
|
||||
const colors = ref(['#27FF64', '#27FF64', '#A0FFBC']);
|
||||
const animationSpeed = ref(8);
|
||||
const direction = ref<'horizontal' | 'vertical' | 'diagonal'>('horizontal');
|
||||
const pauseOnHover = ref(false);
|
||||
const yoyo = ref(true);
|
||||
const showBorder = ref(false);
|
||||
|
||||
const gradientPreview = computed(() => colors.value.split(',').map(color => color.trim()));
|
||||
const directionOptions = [
|
||||
{ value: 'horizontal', label: 'Horizontal' },
|
||||
{ value: 'vertical', label: 'Vertical' },
|
||||
{ value: 'diagonal', label: 'Diagonal' }
|
||||
];
|
||||
|
||||
const gradientPreview = computed(() => [...colors.value, colors.value[0]].join(', '));
|
||||
|
||||
const updateColor = (index: number, newColor: string) => {
|
||||
const newColors = [...colors.value];
|
||||
newColors[index] = newColor;
|
||||
colors.value = newColors;
|
||||
};
|
||||
|
||||
const addColor = () => {
|
||||
if (colors.value.length < 8) {
|
||||
colors.value.push('#ffffff');
|
||||
}
|
||||
};
|
||||
|
||||
const removeColor = (index: number) => {
|
||||
if (colors.value.length > 2) {
|
||||
colors.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'text',
|
||||
name: 'slot',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'The text content to be displayed with gradient effect.'
|
||||
default: '-',
|
||||
description: 'The content to be displayed inside the gradient text.'
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
@@ -111,20 +149,38 @@ const propData = [
|
||||
{
|
||||
name: 'colors',
|
||||
type: 'string[]',
|
||||
default: '["#ffaa40", "#9c40ff", "#ffaa40"]',
|
||||
description: 'Defines the gradient colors for the text or border.'
|
||||
default: `["#5227FF", "#FF9FFC", "#B19EEF"]`,
|
||||
description: 'Array of colors for the gradient effect.'
|
||||
},
|
||||
{
|
||||
name: 'animationSpeed',
|
||||
type: 'number',
|
||||
default: '8',
|
||||
description: 'The duration of the gradient animation in seconds.'
|
||||
description: 'Duration of one animation cycle in seconds.'
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: `'horizontal' | 'vertical' | 'diagonal'`,
|
||||
default: `'horizontal'`,
|
||||
description: 'Direction of the gradient animation.'
|
||||
},
|
||||
{
|
||||
name: 'pauseOnHover',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Pauses the animation when hovering over the text.'
|
||||
},
|
||||
{
|
||||
name: 'yoyo',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: 'Reverses animation direction at the end instead of looping.'
|
||||
},
|
||||
{
|
||||
name: 'showBorder',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Determines whether a border with the gradient effect is displayed.'
|
||||
description: 'Displays a gradient border around the text.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -1,33 +1,31 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<h2 class="demo-title-extra">Basic</h2>
|
||||
|
||||
<div class="demo-container h-[200px]">
|
||||
<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 h-[200px]">
|
||||
<div class="shiny-button">
|
||||
<ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="demo-title-extra">Configurable Speed</h2>
|
||||
|
||||
<div class="demo-container h-[200px]">
|
||||
<div class="h-[400px] text-3xl demo-container">
|
||||
<ShinyText
|
||||
:text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
|
||||
:disabled="false"
|
||||
text="✨ Shiny Text Effect"
|
||||
:delay="delay"
|
||||
:speed="speed"
|
||||
class-name="shiny-text-demo"
|
||||
:color="color"
|
||||
:shine-color="shineColor"
|
||||
:spread="spread"
|
||||
:direction="direction"
|
||||
:yoyo="yoyo"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
|
||||
<PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="5" :step="0.1" value-unit="s" />
|
||||
<PreviewSlider title="Delay" v-model="delay" :min="0" :max="3" :step="0.1" value-unit="s" />
|
||||
<PreviewSlider title="Spread" v-model="spread" :min="0" :max="180" :step="5" value-unit="deg" />
|
||||
<PreviewColor title="Color" v-model="color" class="mb-2" />
|
||||
<PreviewColor title="Shine Color" v-model="shineColor" class="mb-2" />
|
||||
<PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
|
||||
<PreviewSwitch title="Yoyo Mode" v-model="yoyo" />
|
||||
<PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
|
||||
<PreviewSwitch title="Disabled" v-model="disabled" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
@@ -44,17 +42,33 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.vue';
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue';
|
||||
import CodeExample from '@/components/code/CodeExample.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue';
|
||||
import PreviewSelect from '@/components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
|
||||
import PropTable from '@/components/common/PropTable.vue';
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue';
|
||||
import { shinyText } from '@/constants/code/TextAnimations/shinyTextCode';
|
||||
import ShinyText from '@/content/TextAnimations/ShinyText/ShinyText.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const speed = ref(3);
|
||||
const speed = ref(2);
|
||||
const delay = ref(0);
|
||||
const color = ref('#b5b5b5');
|
||||
const shineColor = ref('#ffffff');
|
||||
const spread = ref(120);
|
||||
const direction = ref<'left' | 'right'>('left');
|
||||
const yoyo = ref(false);
|
||||
const pauseOnHover = ref(false);
|
||||
const disabled = ref(false);
|
||||
|
||||
const directionOptions = [
|
||||
{ value: 'left', label: 'Left' },
|
||||
{ value: 'right', label: 'Right' }
|
||||
];
|
||||
|
||||
const propData = [
|
||||
{
|
||||
@@ -64,16 +78,58 @@ const propData = [
|
||||
description: 'The text to be displayed with the shiny effect.'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Disables the shiny effect when set to true.'
|
||||
name: 'color',
|
||||
type: 'string',
|
||||
default: '"#b5b5b5"',
|
||||
description: 'The base color of the text.'
|
||||
},
|
||||
{
|
||||
name: 'shineColor',
|
||||
type: 'string',
|
||||
default: '"#ffffff"',
|
||||
description: 'The color of the shine/highlight effect.'
|
||||
},
|
||||
{
|
||||
name: 'speed',
|
||||
type: 'number',
|
||||
default: '5',
|
||||
description: 'Specifies the duration of the animation in seconds.'
|
||||
default: '2',
|
||||
description: 'Duration of one animation cycle in seconds.'
|
||||
},
|
||||
{
|
||||
name: 'delay',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: 'Pause duration (in seconds) between animation cycles.'
|
||||
},
|
||||
{
|
||||
name: 'spread',
|
||||
type: 'number',
|
||||
default: '120',
|
||||
description: 'The angle (in degrees) of the gradient spread.'
|
||||
},
|
||||
{
|
||||
name: 'yoyo',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'If true, the animation reverses direction instead of looping.'
|
||||
},
|
||||
{
|
||||
name: 'pauseOnHover',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Pauses the animation when the user hovers over the text.'
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: "'left' | 'right'",
|
||||
default: '"left"',
|
||||
description: 'The direction the shine moves across the text.'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Disables the shiny effect when set to true.'
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[400px]">
|
||||
<div class="h-[400px] demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<SplitText
|
||||
@@ -11,8 +11,7 @@
|
||||
:duration="duration"
|
||||
:ease="ease"
|
||||
:split-type="splitType"
|
||||
:threshold="threshold"
|
||||
class="split-text-demo"
|
||||
class-name="split-text-demo"
|
||||
@animation-complete="
|
||||
() => {
|
||||
showCallback && showToast();
|
||||
@@ -22,13 +21,27 @@
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<button
|
||||
class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
|
||||
@click="toggleSplitType"
|
||||
>
|
||||
Split Type:
|
||||
<span class="text-[#a1a1aa]"> {{ splitType }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
|
||||
@click="toggleEase"
|
||||
>
|
||||
Ease:
|
||||
<span class="text-[#a1a1aa]"> {{ ease }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
|
||||
|
||||
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
|
||||
|
||||
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
|
||||
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1" />
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
@@ -47,29 +60,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import RefreshButton from '../../components/common/RefreshButton.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue';
|
||||
import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue';
|
||||
import CodeExample from '@/components/code/CodeExample.vue';
|
||||
import Dependencies from '@/components/code/Dependencies.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
|
||||
import PropTable from '@/components/common/PropTable.vue';
|
||||
import RefreshButton from '@/components/common/RefreshButton.vue';
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
|
||||
import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const delay = ref(10);
|
||||
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);
|
||||
const showCallback = ref(true);
|
||||
const toast = useToast();
|
||||
const { rerenderKey, forceRerender } = useForceRerender();
|
||||
const toast = useToast();
|
||||
|
||||
const delay = ref(50);
|
||||
const duration = ref(1.25);
|
||||
const ease = ref<'power3.out' | 'bounce.out' | 'elastic.out(1, 0.3)'>('power3.out');
|
||||
const splitType = ref<'chars' | 'words' | 'lines'>('chars');
|
||||
const showCallback = ref(true);
|
||||
|
||||
const toggleSplitType = () => {
|
||||
splitType.value = splitType.value === 'chars' ? 'words' : splitType.value === 'words' ? 'lines' : 'chars';
|
||||
forceRerender();
|
||||
};
|
||||
|
||||
const toggleEase = () => {
|
||||
ease.value =
|
||||
ease.value === 'power3.out' ? 'bounce.out' : ease.value === 'bounce.out' ? 'elastic.out(1, 0.3)' : 'power3.out';
|
||||
forceRerender();
|
||||
};
|
||||
|
||||
const showToast = () => {
|
||||
toast.add({
|
||||
@@ -80,10 +104,31 @@ const showToast = () => {
|
||||
};
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'tag',
|
||||
type: 'string',
|
||||
default: '"p"',
|
||||
description: 'HTML tag to render: "h1", "h2", "h3", "h4", "h5", "h6", "p",'
|
||||
},
|
||||
{ name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
|
||||
{ name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
|
||||
{ name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'Additional class names to style the component.'
|
||||
},
|
||||
{
|
||||
name: 'delay',
|
||||
type: 'number',
|
||||
default: '50',
|
||||
description: 'Delay between animations for each letter (in ms).'
|
||||
},
|
||||
{
|
||||
name: 'duration',
|
||||
type: 'number',
|
||||
default: '1.25',
|
||||
description: 'Duration of each letter animation (in seconds).'
|
||||
},
|
||||
{ name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
|
||||
{
|
||||
name: 'splitType',
|
||||
@@ -114,7 +159,7 @@ const propData = [
|
||||
name: 'textAlign',
|
||||
type: 'string',
|
||||
default: '"center"',
|
||||
description: 'Text alignment: "left", "center", "right", etc.'
|
||||
description: "Text alignment: 'left', 'center', 'right', etc."
|
||||
},
|
||||
{
|
||||
name: 'onLetterAnimationComplete',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container py-[64px] h-[350px]">
|
||||
<div class="py-[64px] h-[350px] demo-container">
|
||||
<TextType
|
||||
:key="key"
|
||||
:text="texts"
|
||||
@@ -45,6 +45,7 @@
|
||||
:max="150"
|
||||
:step="5"
|
||||
value-unit="ms"
|
||||
:disabled="!variableSpeedEnabled"
|
||||
/>
|
||||
<PreviewSlider
|
||||
v-model="variableSpeedMax"
|
||||
@@ -53,6 +54,7 @@
|
||||
:max="300"
|
||||
:step="5"
|
||||
value-unit="ms"
|
||||
:disabled="!variableSpeedEnabled"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user