[ REFACT ] : ShinyText Text Animation

src/demo/TextAnimations/ShinyTextDemo.vue

@@ -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',