Format

src/demo/TextAnimations/AsciiTextDemo.vue

@@ -57,11 +57,7 @@
             @update:model-value="forceRerender"
           />
 
-          <PreviewSwitch
-            title="Enable Waves"
-            v-model="enableWaves"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
 
           <div class="flex gap-4 flex-wrap">
             <button
@@ -92,28 +88,28 @@
 </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 PreviewSlider from '@/components/common/PreviewSlider.vue'
-import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
-import AsciiText from '@/content/TextAnimations/AsciiText/AsciiText.vue'
-import { asciiText } from '@/constants/code/TextAnimations/asciiTextCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+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 PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import AsciiText from '@/content/TextAnimations/AsciiText/AsciiText.vue';
+import { asciiText } from '@/constants/code/TextAnimations/asciiTextCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const text = ref('Hey!')
-const asciiFontSize = ref(8)
-const textFontSize = ref(200)
-const textColor = ref('#fdf9f3')
-const planeBaseHeight = ref(8)
-const enableWaves = ref(true)
+const text = ref('Hey!');
+const asciiFontSize = ref(8);
+const textFontSize = ref(200);
+const textColor = ref('#fdf9f3');
+const planeBaseHeight = ref(8);
+const enableWaves = ref(true);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 // Color options for easy selection
 const colorOptions = [
@@ -125,12 +121,12 @@ const colorOptions = [
   { name: 'Purple', value: '#9b59b6' },
   { name: 'Orange', value: '#f39c12' },
   { name: 'Pink', value: '#e91e63' }
-]
+];
 
 const changeColor = (color: string) => {
-  textColor.value = color
-  forceRerender()
-}
+  textColor.value = color;
+  forceRerender();
+};
 
 // Component properties documentation
 const propData = [
@@ -176,5 +172,5 @@ const propData = [
     default: '""',
     description: 'Additional CSS classes to apply to the component.'
   }
-]
+];
 </script>

src/demo/TextAnimations/ScrambleTextDemo.vue

@@ -1,58 +1,58 @@
 <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 ScrambleText from '../../content/TextAnimations/ScrambleText/ScrambleText.vue'
-import { scrambleTextCode } from '@/constants/code/TextAnimations/scrambleTextCode'
+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 ScrambleText from '../../content/TextAnimations/ScrambleText/ScrambleText.vue';
+import { scrambleTextCode } from '@/constants/code/TextAnimations/scrambleTextCode';
 
-const radius = ref(100)
-const duration = ref(1.2)
-const speed = ref(0.5)
-const scrambleChars = ref(".:")
+const radius = ref(100);
+const duration = ref(1.2);
+const speed = ref(0.5);
+const scrambleChars = ref('.:');
 
 const propData = [
   {
-    name: "radius",
-    type: "number",
-    default: "100",
-    description: "The radius around the mouse pointer within which characters will scramble."
+    name: 'radius',
+    type: 'number',
+    default: '100',
+    description: 'The radius around the mouse pointer within which characters will scramble.'
   },
   {
-    name: "duration",
-    type: "number",
-    default: "1.2",
-    description: "The duration of the scramble effect on a character."
+    name: 'duration',
+    type: 'number',
+    default: '1.2',
+    description: 'The duration of the scramble effect on a character.'
   },
   {
-    name: "speed",
-    type: "number",
-    default: "0.5",
-    description: "The speed of the scramble animation."
+    name: 'speed',
+    type: 'number',
+    default: '0.5',
+    description: 'The speed of the scramble animation.'
   },
   {
-    name: "scrambleChars",
-    type: "string",
+    name: 'scrambleChars',
+    type: 'string',
     default: "'.:'",
-    description: "The characters used for scrambling."
+    description: 'The characters used for scrambling.'
   },
   {
-    name: "className",
-    type: "string",
+    name: 'className',
+    type: 'string',
     default: '""',
-    description: "Additional CSS classes for the component."
+    description: 'Additional CSS classes for the component.'
   },
   {
-    name: "style",
-    type: "Record<string, string | number>",
-    default: "{}",
-    description: "Inline styles for the component."
+    name: 'style',
+    type: 'Record<string, string | number>',
+    default: '{}',
+    description: 'Inline styles for the component.'
   }
-]
+];
 </script>
 
 <template>
@@ -67,7 +67,8 @@ const propData = [
             :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.
+            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>
 
@@ -83,29 +84,11 @@ const propData = [
             />
           </div>
 
-          <PreviewSlider
-            title="Radius"
-            v-model="radius"
-            :min="10"
-            :max="300"
-            :step="10"
-          />
+          <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="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"
-          />
+          <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="2" :step="0.1" />
         </Customize>
 
         <PropTable :data="propData" />