Merge branch 'main' into refact/metallic-paint

src/demo/TextAnimations/CountUpDemo.vue

@@ -71,8 +71,8 @@ import PropTable from '../../components/common/PropTable.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
-import CountUp from '../../content/Animations/CountUp/CountUp.vue';
-import { countup } from '@/constants/code/Animations/countUpCode';
+import CountUp from '../../content/TextAnimations/CountUp/CountUp.vue';
+import { countup } from '@/constants/code/TextAnimations/countUpCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';

src/demo/TextAnimations/ShuffleDemo.vue

@@ -80,7 +80,7 @@ const { rerenderKey: key, forceRerender } = useForceRerender();
 const duration = ref(0.35);
 const shuffleTimes = ref(1);
 const stagger = ref(0.03);
-const shuffleDirection = ref<'left' | 'right'>('right');
+const shuffleDirection = ref<'left' | 'right' | 'up' | 'down'>('right');
 const ease = ref('power3.out');
 const loop = ref(false);
 const loopDelay = ref(0);
@@ -88,7 +88,9 @@ const triggerOnHover = ref(true);
 
 const directionOptions = [
   { label: 'Right', value: 'right' },
-  { label: 'Left', value: 'left' }
+  { label: 'Left', value: 'left' },
+  { label: 'Up', value: 'up' },
+  { label: 'Down', value: 'down' }
 ];
 
 const easeOptions = [
@@ -104,7 +106,7 @@ const propData = [
   { name: 'style', type: 'object', default: '{}', description: 'Inline styles applied to the wrapper element.' },
   {
     name: 'shuffleDirection',
-    type: '"left" | "right"',
+    type: '"left" | "right" | "up" | "down"',
     default: '"right"',
     description: 'Direction the per-letter strip slides to reveal the final character.'
   },

src/demo/TextAnimations/TextTypeDemo.vue

@@ -17,7 +17,7 @@
       </div>
 
       <Customize>
-        <PreviewSelect v-model="cursorCharacter" :options="['|', '_', '█', '▌', '▐']" title="Cursor Character" />
+        <PreviewSelect v-model="cursorCharacter" :options="cursorOptions" title="Cursor Character" />
         <PreviewSlider v-model="typingSpeed" title="Typing Speed" :min="10" :max="200" :step="5" value-unit="ms" />
         <PreviewSlider
           v-model="pauseDuration"
@@ -99,6 +99,14 @@ const cursorBlinkDuration = ref(0.5);
 
 const { rerenderKey: key } = useForceRerender();
 
+const cursorOptions = [
+  { value: '_', label: 'Underscore (_)' },
+  { value: '|', label: 'Pipe (|)' },
+  { value: '▎', label: 'Block (▎)' },
+  { value: '●', label: 'Dot (●)' },
+  { value: '█', label: 'Full Block (█)' }
+];
+
 const propData = [
   {
     name: 'text',