[ REFACT ] : CountUp from Animations to TextAnimations

src/components/landing/FeatureCards/FeatureCards.vue

@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, defineComponent, h, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
-import CountUp from '../../../content/Animations/CountUp/CountUp.vue';
+import CountUp from '../../../content/TextAnimations/CountUp/CountUp.vue';
 import './FeatureCards.css';
 
 const isMobile = ref(false);

src/constants/Categories.ts

@@ -1,12 +1,24 @@
 // Highlighted sidebar items
-export const NEW = ['Antigravity', 'Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow', 'Grid Scan'];
+export const NEW = [
+  'Antigravity',
+  'Color Bends',
+  'Floating Lines',
+  'Ghost Cursor',
+  'Grid Scan',
+  'Laser Flow',
+  'Light Pillar',
+  'Liquid Ether',
+  'Pixel Blast',
+  'Pixel Snow',
+];
+
 export const UPDATED = [];
 
 // Used for main sidebar navigation
 export const CATEGORIES = [
   {
     name: 'Get Started',
-    subcategories: ['Index']
+    subcategories: [ 'Index' ],
   },
   {
     name: 'Text Animations',
@@ -14,6 +26,7 @@ export const CATEGORIES = [
       'Ascii Text',
       'Blur Text',
       'Circular Text',
+      'Count Up',
       'Curved Loop',
       'Decrypted Text',
       'Falling Text',
@@ -43,7 +56,6 @@ export const CATEGORIES = [
       'Antigravity',
       'Blob Cursor',
       'Click Spark',
-      'Count Up',
       'Crosshair',
       'Cubes',
       'Electric Border',
@@ -56,8 +68,8 @@ export const CATEGORIES = [
       'Logo Loop',
       'Magnet',
       'Magnet Lines',
-      'Meta Balls',
       'Metallic Paint',
+      'Meta Balls',
       'Noise',
       'Pixel Trail',
       'Pixel Transition',
@@ -95,8 +107,8 @@ export const CATEGORIES = [
       'Infinite Scroll',
       'Magic Bento',
       'Masonry',
-      'Pixel Card',
       'Pill Nav',
+      'Pixel Card',
       'Profile Card',
       'Rolling Gallery',
       'Scroll Stack',
@@ -128,9 +140,9 @@ export const CATEGORIES = [
       'Hyperspeed',
       'Iridescence',
       'Letter Glitch',
-      'Lightning',
       'Light Pillar',
       'Light Rays',
+      'Lightning',
       'Liquid Chrome',
       'Liquid Ether',
       'Orb',

src/constants/Components.ts

@@ -10,7 +10,6 @@ const animations = {
   'metallic-paint': () => import('../demo/Animations/MetallicPaintDemo.vue'),
   'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
   'cubes': () => import('../demo/Animations/CubesDemo.vue'),
-  'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
   'noise': () => import('../demo/Animations/NoiseDemo.vue'),
   'star-border': () => import('../demo/Animations/StarBorderDemo.vue'),
@@ -35,6 +34,7 @@ const textAnimations = {
   'circular-text': () => import("../demo/TextAnimations/CircularTextDemo.vue"),
   'shiny-text': () => import("../demo/TextAnimations/ShinyTextDemo.vue"),
   'text-pressure': () => import("../demo/TextAnimations/TextPressureDemo.vue"),
+  'count-up': () => import('../demo/TextAnimations/CountUpDemo.vue'),
   'curved-loop': () => import("../demo/TextAnimations/CurvedLoopDemo.vue"),
   'fuzzy-text': () => import("../demo/TextAnimations/FuzzyTextDemo.vue"),
   'gradient-text': () => import("../demo/TextAnimations/GradientTextDemo.vue"),

src/constants/code/TextAnimations/countUpCode.ts

@@ -1,7 +1,7 @@
-import code from '@/content/Animations/CountUp/CountUp.vue?raw';
+import code from '@/content/TextAnimations/CountUp/CountUp.vue?raw';
 import { createCodeObject } from '@/types/code';
 
-export const countup = createCodeObject(code, 'Animations/CountUp', {
+export const countup = createCodeObject(code, 'TextAnimations/CountUp', {
   usage: `<template>
   <CountUp
     :from="0"

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 '../../content/TextAnimations/CountUp/CountUp.vue';
-import { countup } from '@/constants/code/Animations/countUpCode';
+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';