From 6af299052ac9b64c96b61f3d39bb1b0c0ed611be Mon Sep 17 00:00:00 2001
From: msavulescu <msavulescu@wallbid.io>
Date: Fri, 18 Jul 2025 16:20:35 +0300
Subject: [PATCH] Added useTemplateRef API support

---
 src/components/landing/DisplayHeader/DisplayHeader.vue |  7 +++----
 src/components/landing/FeatureCards/FeatureCards.vue   |  4 ++--
 src/components/landing/PlasmaWave/PlasmaWave.vue       |  4 ++--
 src/components/navs/Sidebar.vue                        |  6 +++---
 .../Animations/AnimatedContent/AnimatedContent.vue     |  4 ++--
 src/content/Animations/BlobCursor/BlobCursor.vue       |  4 ++--
 src/content/Animations/ClickSpark/ClickSpark.vue       |  6 +++---
 src/content/Animations/CountUp/CountUp.vue             |  4 ++--
 src/content/Animations/Cubes/Cubes.vue                 |  4 ++--
 src/content/Animations/FadeContent/FadeContent.vue     |  4 ++--
 src/content/Animations/GlareHover/GlareHover.vue       |  4 ++--
 src/content/Animations/ImageTrail/ImageTrail.vue       |  4 ++--
 src/content/Animations/Magnet/Magnet.vue               |  4 ++--
 src/content/Animations/MagnetLines/MagnetLines.vue     |  4 ++--
 src/content/Animations/MetaBalls/MetaBalls.vue         |  4 ++--
 src/content/Animations/MetallicPaint/MetallicPaint.vue |  4 ++--
 src/content/Animations/Noise/Noise.vue                 |  4 ++--
 .../Animations/PixelTransition/PixelTransition.vue     |  8 ++++----
 src/content/Animations/Ribbons/Ribbons.vue             |  4 ++--
 src/content/Animations/ShapeBlur/ShapeBlur.vue         |  4 ++--
 src/content/Animations/SplashCursor/SplashCursor.vue   |  4 ++--
 src/content/Backgrounds/Aurora/Aurora.vue              |  4 ++--
 src/content/Backgrounds/Balatro/Balatro.vue            |  4 ++--
 src/content/Backgrounds/Ballpit/Ballpit.vue            |  4 ++--
 src/content/Backgrounds/Beams/Beams.vue                |  4 ++--
 src/content/Backgrounds/DotGrid/DotGrid.vue            |  6 +++---
 .../Backgrounds/GridDistortion/GridDistortion.vue      |  4 ++--
 src/content/Backgrounds/GridMotion/GridMotion.vue      |  4 ++--
 src/content/Backgrounds/Hyperspeed/Hyperspeed.vue      |  4 ++--
 src/content/Backgrounds/Iridescence/Iridescence.vue    |  4 ++--
 src/content/Backgrounds/LetterGlitch/LetterGlitch.vue  |  4 ++--
 src/content/Backgrounds/Lightning/Lightning.vue        |  4 ++--
 src/content/Backgrounds/LiquidChrome/LiquidChrome.vue  |  4 ++--
 src/content/Backgrounds/Orb/Orb.vue                    |  4 ++--
 src/content/Backgrounds/Particles/Particles.vue        |  4 ++--
 src/content/Backgrounds/Silk/Silk.vue                  |  4 ++--
 src/content/Backgrounds/Squares/Squares.vue            |  4 ++--
 src/content/Backgrounds/Threads/Threads.vue            |  4 ++--
 src/content/Backgrounds/Waves/Waves.vue                |  6 +++---
 src/content/Components/CardSwap/CardSwap.vue           |  4 ++--
 src/content/Components/Carousel/Carousel.vue           |  4 ++--
 .../Components/CircularGallery/CircularGallery.vue     |  4 ++--
 src/content/Components/DecayCard/DecayCard.vue         |  4 ++--
 src/content/Components/ElasticSlider/ElasticSlider.vue |  8 ++++----
 src/content/Components/FlyingPosters/FlyingPosters.vue |  6 +++---
 src/content/Components/GooeyNav/GooeyNav.vue           | 10 +++++-----
 .../Components/InfiniteScroll/InfiniteScroll.vue       |  6 +++---
 src/content/Components/Masonry/Masonry.vue             |  4 ++--
 src/content/Components/PixelCard/PixelCard.vue         |  6 +++---
 src/content/Components/ProfileCard/ProfileCard.vue     |  6 +++---
 src/content/Components/SpotlightCard/SpotlightCard.vue |  4 ++--
 src/content/Components/TiltedCard/TiltedCard.vue       |  4 ++--
 src/content/TextAnimations/AsciiText/AsciiText.vue     |  4 ++--
 src/content/TextAnimations/BlurText/BlurText.vue       |  4 ++--
 .../TextAnimations/DecryptedText/DecryptedText.vue     |  4 ++--
 src/content/TextAnimations/FallingText/FallingText.vue |  8 ++++----
 src/content/TextAnimations/FuzzyText/FuzzyText.vue     |  4 ++--
 .../TextAnimations/ScrambleText/ScrambleText.vue       |  4 ++--
 src/content/TextAnimations/ScrollFloat/ScrollFloat.vue |  4 ++--
 .../TextAnimations/ScrollReveal/ScrollReveal.vue       |  4 ++--
 src/content/TextAnimations/SplitText/SplitText.vue     |  4 ++--
 src/content/TextAnimations/TextCursor/TextCursor.vue   |  4 ++--
 .../TextAnimations/TextPressure/TextPressure.vue       |  6 +++---
 src/content/TextAnimations/TextTrail/TextTrail.vue     |  4 ++--
 src/content/TextAnimations/TrueFocus/TrueFocus.vue     |  4 ++--
 src/demo/Backgrounds/GridDistortionDemo.vue            |  4 ++--
 src/demo/TextAnimations/ScrollFloatDemo.vue            |  4 ++--
 src/demo/TextAnimations/ScrollRevealDemo.vue           |  4 ++--
 src/pages/CategoryPage.vue                             |  4 ++--
 69 files changed, 157 insertions(+), 158 deletions(-)

diff --git a/src/components/landing/DisplayHeader/DisplayHeader.vue b/src/components/landing/DisplayHeader/DisplayHeader.vue
index 8b2e5ac..123d2b4 100644
--- a/src/components/landing/DisplayHeader/DisplayHeader.vue
+++ b/src/components/landing/DisplayHeader/DisplayHeader.vue
@@ -6,7 +6,7 @@
       </router-link>
 
       <div class="nav-cta-group">
-        <nav class="landing-nav-items" ref="navRef">
+        <nav class="landing-nav-items">
           <router-link class="nav-link" :class="{ 'active-link': activeItem === 'home' }" to="/">Home</router-link>
 
           <router-link class="nav-link" to="/text-animations/split-text">Docs</router-link>
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import VueBitsLogo from '@/components/common/Logo.vue';
 import { useStars } from '@/composables/useStars';
@@ -38,8 +38,7 @@ interface Props {
 
 defineProps<Props>();
 
-const navRef = ref<HTMLElement | null>(null);
-const starCountRef = ref<HTMLElement | null>(null);
+const starCountRef = useTemplateRef<HTMLElement>('starCountRef');
 const stars = useStars();
 
 const openGitHub = () => {
diff --git a/src/components/landing/FeatureCards/FeatureCards.vue b/src/components/landing/FeatureCards/FeatureCards.vue
index 9c07478..54ea116 100644
--- a/src/components/landing/FeatureCards/FeatureCards.vue
+++ b/src/components/landing/FeatureCards/FeatureCards.vue
@@ -44,13 +44,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue';
+import { ref, onMounted, onUnmounted, defineComponent, h, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import CountUp from '../../../content/Animations/CountUp/CountUp.vue';
 import './FeatureCards.css';
 
 const isMobile = ref(false);
-const gridRef = ref<HTMLDivElement | null>(null);
+const gridRef = useTemplateRef<HTMLDivElement>('gridRef');
 
 const checkIsMobile = () => {
   isMobile.value = window.innerWidth <= 768;
diff --git a/src/components/landing/PlasmaWave/PlasmaWave.vue b/src/components/landing/PlasmaWave/PlasmaWave.vue
index f554cc4..be7e0f6 100644
--- a/src/components/landing/PlasmaWave/PlasmaWave.vue
+++ b/src/components/landing/PlasmaWave/PlasmaWave.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Camera, Transform, Program, Mesh, Geometry } from 'ogl';
 
 interface Props {
@@ -150,7 +150,7 @@ void main() {
 
 const isMobile = ref(false);
 const isVisible = ref(true);
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const uniformOffset = ref(new Float32Array([props.xOffset, props.yOffset]));
 const uniformResolution = ref(new Float32Array([1, 1]));
 const rendererRef = ref<Renderer | null>(null);
diff --git a/src/components/navs/Sidebar.vue b/src/components/navs/Sidebar.vue
index 149ded0..63320e3 100644
--- a/src/components/navs/Sidebar.vue
+++ b/src/components/navs/Sidebar.vue
@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed, useTemplateRef } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
 import Logo from '../../assets/logos/vue-bits-logo.svg';
@@ -118,8 +118,8 @@ const pendingActivePath = ref<string | null>(null);
 const isScrolledToBottom = ref(false);
 const isTransitioning = ref(false);
 
-const sidebarRef = ref<HTMLDivElement>();
-const sidebarContainerRef = ref<HTMLDivElement>();
+const sidebarRef = useTemplateRef<HTMLDivElement>('sidebarRef');
+const sidebarContainerRef = useTemplateRef<HTMLDivElement>('sidebarContainerRef');
 
 let hoverTimeoutRef: number | null = null;
 let hoverDelayTimeoutRef: number | null = null;
diff --git a/src/content/Animations/AnimatedContent/AnimatedContent.vue b/src/content/Animations/AnimatedContent/AnimatedContent.vue
index c51c8c5..e6b3f76 100644
--- a/src/content/Animations/AnimatedContent/AnimatedContent.vue
+++ b/src/content/Animations/AnimatedContent/AnimatedContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
@@ -37,7 +37,7 @@ const emit = defineEmits<{
   complete: [];
 }>();
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 onMounted(() => {
   const el = containerRef.value;
diff --git a/src/content/Animations/BlobCursor/BlobCursor.vue b/src/content/Animations/BlobCursor/BlobCursor.vue
index 896502a..9d85da6 100644
--- a/src/content/Animations/BlobCursor/BlobCursor.vue
+++ b/src/content/Animations/BlobCursor/BlobCursor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import gsap from 'gsap';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 
 interface BlobCursorProps {
   blobType?: 'circle' | 'square';
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<BlobCursorProps>(), {
   zIndex: 100
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const blobsRef = ref<(HTMLElement | null)[]>([]);
 
 const updateOffset = () => {
diff --git a/src/content/Animations/ClickSpark/ClickSpark.vue b/src/content/Animations/ClickSpark/ClickSpark.vue
index a8d5f1c..0bc18fb 100644
--- a/src/content/Animations/ClickSpark/ClickSpark.vue
+++ b/src/content/Animations/ClickSpark/ClickSpark.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, useTemplateRef } from 'vue';
 
 interface Spark {
   x: number;
@@ -36,8 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
   extraScale: 1.0
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const sparks = ref<Spark[]>([]);
 const startTimeRef = ref<number | null>(null);
 const animationId = ref<number | null>(null);
diff --git a/src/content/Animations/CountUp/CountUp.vue b/src/content/Animations/CountUp/CountUp.vue
index 1975607..1f6e7fe 100644
--- a/src/content/Animations/CountUp/CountUp.vue
+++ b/src/content/Animations/CountUp/CountUp.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed, useTemplateRef } from 'vue';
 
 interface Props {
   to: number;
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   separator: ''
 });
 
-const elementRef = ref<HTMLSpanElement | null>(null);
+const elementRef = useTemplateRef<HTMLSpanElement>('elementRef');
 const currentValue = ref(props.direction === 'down' ? props.to : props.from);
 const isInView = ref(false);
 const animationId = ref<number | null>(null);
diff --git a/src/content/Animations/Cubes/Cubes.vue b/src/content/Animations/Cubes/Cubes.vue
index 376c7ad..3e46d13 100644
--- a/src/content/Animations/Cubes/Cubes.vue
+++ b/src/content/Animations/Cubes/Cubes.vue
@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, withDefaults } from 'vue';
+import { ref, computed, onMounted, onUnmounted, withDefaults, useTemplateRef } from 'vue';
 import gsap from 'gsap';
 
 interface Gap {
@@ -122,7 +122,7 @@ const props = withDefaults(defineProps<Props>(), {
   rippleSpeed: 2
 });
 
-const sceneRef = ref<HTMLDivElement | null>(null);
+const sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');
 const rafRef = ref<number | null>(null);
 const idleTimerRef = ref<number | null>(null);
 const userActiveRef = ref(false);
diff --git a/src/content/Animations/FadeContent/FadeContent.vue b/src/content/Animations/FadeContent/FadeContent.vue
index 844708c..93f9c7a 100644
--- a/src/content/Animations/FadeContent/FadeContent.vue
+++ b/src/content/Animations/FadeContent/FadeContent.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
 
 interface Props {
   blur?: boolean;
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const inView = ref(false);
-const elementRef = ref<HTMLDivElement | null>(null);
+const elementRef = useTemplateRef<HTMLDivElement>('elementRef');
 let observer: IntersectionObserver | null = null;
 
 onMounted(() => {
diff --git a/src/content/Animations/GlareHover/GlareHover.vue b/src/content/Animations/GlareHover/GlareHover.vue
index 30cf3ab..f518c9e 100644
--- a/src/content/Animations/GlareHover/GlareHover.vue
+++ b/src/content/Animations/GlareHover/GlareHover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 
 interface GlareHoverProps {
   width?: string;
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<GlareHoverProps>(), {
   style: () => ({})
 });
 
-const overlayRef = ref<HTMLDivElement | null>(null);
+const overlayRef = useTemplateRef<HTMLDivElement>('overlayRef');
 
 const rgba = computed(() => {
   const hex = props.glareColor.replace('#', '');
diff --git a/src/content/Animations/ImageTrail/ImageTrail.vue b/src/content/Animations/ImageTrail/ImageTrail.vue
index c2200ba..bc959dd 100644
--- a/src/content/Animations/ImageTrail/ImageTrail.vue
+++ b/src/content/Animations/ImageTrail/ImageTrail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 function lerp(a: number, b: number, n: number): number {
@@ -1194,7 +1194,7 @@ const props = withDefaults(defineProps<ImageTrailProps>(), {
   variant: 1
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 onMounted(async () => {
   await nextTick();
diff --git a/src/content/Animations/Magnet/Magnet.vue b/src/content/Animations/Magnet/Magnet.vue
index e076e13..cb1ced3 100644
--- a/src/content/Animations/Magnet/Magnet.vue
+++ b/src/content/Animations/Magnet/Magnet.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 interface Props {
   padding?: number;
@@ -45,7 +45,7 @@ defineOptions({
   inheritAttrs: false
 });
 
-const magnetRef = ref<HTMLDivElement | null>(null);
+const magnetRef = useTemplateRef<HTMLDivElement>('magnetRef');
 const isActive = ref(false);
 const position = ref({ x: 0, y: 0 });
 
diff --git a/src/content/Animations/MagnetLines/MagnetLines.vue b/src/content/Animations/MagnetLines/MagnetLines.vue
index 9ea0d84..851fe68 100644
--- a/src/content/Animations/MagnetLines/MagnetLines.vue
+++ b/src/content/Animations/MagnetLines/MagnetLines.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { onMounted, onUnmounted, computed, useTemplateRef } from 'vue';
 
 interface MagnetLinesProps {
   rows?: number;
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<MagnetLinesProps>(), {
   style: () => ({})
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const total = computed(() => props.rows * props.columns);
 
diff --git a/src/content/Animations/MetaBalls/MetaBalls.vue b/src/content/Animations/MetaBalls/MetaBalls.vue
index 224f453..8be8ac6 100644
--- a/src/content/Animations/MetaBalls/MetaBalls.vue
+++ b/src/content/Animations/MetaBalls/MetaBalls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Camera, Mesh, Program, Renderer, Transform, Triangle, Vec3 } from 'ogl';
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 
 interface MetaBallsProps {
   color?: string;
@@ -118,7 +118,7 @@ void main() {
 }
 `;
 
-const containerRef = shallowRef<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 let cleanUpAnimation: () => void = () => {};
 
 const setupAnimation = () => {
diff --git a/src/content/Animations/MetallicPaint/MetallicPaint.vue b/src/content/Animations/MetallicPaint/MetallicPaint.vue
index 69d4b82..32e85ee 100644
--- a/src/content/Animations/MetallicPaint/MetallicPaint.vue
+++ b/src/content/Animations/MetallicPaint/MetallicPaint.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
 
 interface ShaderParams {
   patternScale: number;
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
   })
 });
 
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const gl = ref<WebGL2RenderingContext | null>(null);
 const uniforms = ref<Record<string, WebGLUniformLocation>>({});
 const totalAnimationTime = ref(0);
diff --git a/src/content/Animations/Noise/Noise.vue b/src/content/Animations/Noise/Noise.vue
index ef91be9..3e13e00 100644
--- a/src/content/Animations/Noise/Noise.vue
+++ b/src/content/Animations/Noise/Noise.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
 
 interface NoiseProps {
   patternRefreshInterval?: number;
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<NoiseProps>(), {
   mixBlendMode: 'normal'
 });
 
-const grainRef = ref<HTMLCanvasElement | null>(null);
+const grainRef = useTemplateRef<HTMLCanvasElement>('grainRef');
 
 let animationId = 0;
 let frame = 0;
diff --git a/src/content/Animations/PixelTransition/PixelTransition.vue b/src/content/Animations/PixelTransition/PixelTransition.vue
index fc75d93..5d53134 100644
--- a/src/content/Animations/PixelTransition/PixelTransition.vue
+++ b/src/content/Animations/PixelTransition/PixelTransition.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
+import { ref, onMounted, watch, onUnmounted, nextTick, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 interface PixelTransitionProps {
@@ -20,9 +20,9 @@ const props = withDefaults(defineProps<PixelTransitionProps>(), {
   aspectRatio: '100%'
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
-const pixelGridRef = ref<HTMLDivElement | null>(null);
-const activeRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const pixelGridRef = useTemplateRef<HTMLDivElement>('pixelGridRef');
+const activeRef = useTemplateRef<HTMLDivElement>('activeRef');
 const isActive = ref(false);
 let delayedCall: gsap.core.Tween | null = null;
 
diff --git a/src/content/Animations/Ribbons/Ribbons.vue b/src/content/Animations/Ribbons/Ribbons.vue
index e9626f3..9bf0fca 100644
--- a/src/content/Animations/Ribbons/Ribbons.vue
+++ b/src/content/Animations/Ribbons/Ribbons.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Transform, Vec3, Color, Polyline } from 'ogl';
 
 interface RibbonsProps {
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<RibbonsProps>(), {
   backgroundColor: () => [0, 0, 0, 0]
 });
 
-const ribbonsContainer = ref<HTMLDivElement>();
+const ribbonsContainer = useTemplateRef<HTMLDivElement>('ribbonsContainer');
 
 let renderer: Renderer;
 let scene: Transform;
diff --git a/src/content/Animations/ShapeBlur/ShapeBlur.vue b/src/content/Animations/ShapeBlur/ShapeBlur.vue
index e53cfcc..6f97068 100644
--- a/src/content/Animations/ShapeBlur/ShapeBlur.vue
+++ b/src/content/Animations/ShapeBlur/ShapeBlur.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 
 interface ShapeBlurProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<ShapeBlurProps>(), {
   circleEdge: 0.5
 });
 
-const shapeBlurContainer = ref<HTMLDivElement>();
+const shapeBlurContainer = useTemplateRef<HTMLDivElement>('shapeBlurContainer');
 
 let animationFrameId: number;
 let time = 0;
diff --git a/src/content/Animations/SplashCursor/SplashCursor.vue b/src/content/Animations/SplashCursor/SplashCursor.vue
index e69f127..1a13bdb 100644
--- a/src/content/Animations/SplashCursor/SplashCursor.vue
+++ b/src/content/Animations/SplashCursor/SplashCursor.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, withDefaults } from 'vue';
+import { onMounted, withDefaults, useTemplateRef } from 'vue';
 
 /* ---------- types ---------- */
 interface ColorRGB {
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<SplashCursorProps>(), {
 });
 
 /* ---------- refs ---------- */
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 
 /* ---------- helper types ---------- */
 interface Pointer {
diff --git a/src/content/Backgrounds/Aurora/Aurora.vue b/src/content/Backgrounds/Aurora/Aurora.vue
index 6705356..662038f 100644
--- a/src/content/Backgrounds/Aurora/Aurora.vue
+++ b/src/content/Backgrounds/Aurora/Aurora.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
+import { onMounted, onUnmounted, watch, type CSSProperties, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
 
 interface AuroraProps {
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<AuroraProps>(), {
   style: () => ({})
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const VERT = `#version 300 es
 in vec2 position;
diff --git a/src/content/Backgrounds/Balatro/Balatro.vue b/src/content/Backgrounds/Balatro/Balatro.vue
index cf54d2c..583f104 100644
--- a/src/content/Backgrounds/Balatro/Balatro.vue
+++ b/src/content/Backgrounds/Balatro/Balatro.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted, type CSSProperties } from 'vue';
+import { watch, onMounted, onUnmounted, type CSSProperties, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Triangle } from 'ogl';
 
 interface BalatroProps {
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<BalatroProps>(), {
   style: () => ({})
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const hexToVec4 = (hex: string): [number, number, number, number] => {
   const hexStr = hex.replace('#', '');
diff --git a/src/content/Backgrounds/Ballpit/Ballpit.vue b/src/content/Backgrounds/Ballpit/Ballpit.vue
index 7dc4c17..c510457 100644
--- a/src/content/Backgrounds/Ballpit/Ballpit.vue
+++ b/src/content/Backgrounds/Ballpit/Ballpit.vue
@@ -26,7 +26,7 @@ import {
   type WebGLRendererParameters
 } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { defineProps, onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 
 gsap.registerPlugin(Observer);
 
@@ -86,7 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
   controlSphere0: false
 });
 
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const spheresInstanceRef = ref<CreateBallpitReturn | null>(null);
 
 interface PostProcessing {
diff --git a/src/content/Backgrounds/Beams/Beams.vue b/src/content/Backgrounds/Beams/Beams.vue
index ae93ab3..53d182e 100644
--- a/src/content/Backgrounds/Beams/Beams.vue
+++ b/src/content/Backgrounds/Beams/Beams.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { onMounted, onUnmounted, watch, computed, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 import { degToRad } from 'three/src/math/MathUtils.js';
 
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<BeamsProps>(), {
   rotation: 0
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 let renderer: THREE.WebGLRenderer | null = null;
 let scene: THREE.Scene | null = null;
diff --git a/src/content/Backgrounds/DotGrid/DotGrid.vue b/src/content/Backgrounds/DotGrid/DotGrid.vue
index d78600b..15a8229 100644
--- a/src/content/Backgrounds/DotGrid/DotGrid.vue
+++ b/src/content/Backgrounds/DotGrid/DotGrid.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, nextTick, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { InertiaPlugin } from 'gsap/InertiaPlugin';
 
@@ -64,8 +64,8 @@ const props = withDefaults(defineProps<DotGridProps>(), {
   style: () => ({})
 });
 
-const wrapperRef = ref<HTMLDivElement>();
-const canvasRef = ref<HTMLCanvasElement>();
+const wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const dots = ref<Dot[]>([]);
 const pointer = ref({
   x: 0,
diff --git a/src/content/Backgrounds/GridDistortion/GridDistortion.vue b/src/content/Backgrounds/GridDistortion/GridDistortion.vue
index 7d01da7..d5918c2 100644
--- a/src/content/Backgrounds/GridDistortion/GridDistortion.vue
+++ b/src/content/Backgrounds/GridDistortion/GridDistortion.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import * as THREE from 'three';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch, useTemplateRef } from 'vue';
 
 interface GridDistortionProps {
   grid?: number;
@@ -44,7 +44,7 @@ void main() {
 }
 `;
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const imageAspectRef = ref(1);
 const cameraRef = ref<THREE.OrthographicCamera | null>(null);
 const initialDataRef = ref<Float32Array | null>(null);
diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
index 3adda46..9069661 100644
--- a/src/content/Backgrounds/GridMotion/GridMotion.vue
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 interface GridMotionProps {
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<GridMotionProps>(), {
   gradientColor: '#222222'
 });
 
-const gridRef = ref<HTMLElement | null>(null);
+const gridRef = useTemplateRef<HTMLElement>('gridRef');
 const rowRefs = ref<HTMLElement[]>([]);
 const mouseX = ref(window.innerWidth / 2);
 
diff --git a/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue b/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
index 67cc449..da4147c 100644
--- a/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
+++ b/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';
 
@@ -66,7 +66,7 @@ const props = withDefaults(defineProps<HyperspeedProps>(), {
   effectOptions: () => ({})
 });
 
-const hyperspeedContainer = ref<HTMLDivElement>();
+const hyperspeedContainer = useTemplateRef<HTMLDivElement>('hyperspeedContainer');
 let appRef: App | null = null;
 
 const defaultOptions: HyperspeedOptions = {
diff --git a/src/content/Backgrounds/Iridescence/Iridescence.vue b/src/content/Backgrounds/Iridescence/Iridescence.vue
index 6f78321..69888f7 100644
--- a/src/content/Backgrounds/Iridescence/Iridescence.vue
+++ b/src/content/Backgrounds/Iridescence/Iridescence.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
 import type { OGLRenderingContext } from 'ogl';
 
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   mouseReact: true
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const mousePos = ref({ x: 0.5, y: 0.5 });
 
 let renderer: Renderer | null = null;
diff --git a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
index 0f8e5d6..7b16ba3 100644
--- a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
+++ b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 interface Props {
   glitchColors?: string[];
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   smooth: true
 });
 
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const animationRef = ref<number | null>(null);
 const letters = ref<
   {
diff --git a/src/content/Backgrounds/Lightning/Lightning.vue b/src/content/Backgrounds/Lightning/Lightning.vue
index 8ab32d6..8ed31d7 100644
--- a/src/content/Backgrounds/Lightning/Lightning.vue
+++ b/src/content/Backgrounds/Lightning/Lightning.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 interface LightningProps {
   hue?: number;
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<LightningProps>(), {
   size: 1
 });
 
-const canvasRef = ref<HTMLCanvasElement>();
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 let animationId = 0;
 let gl: WebGLRenderingContext | null = null;
 let program: WebGLProgram | null = null;
diff --git a/src/content/Backgrounds/LiquidChrome/LiquidChrome.vue b/src/content/Backgrounds/LiquidChrome/LiquidChrome.vue
index e472401..b179c83 100644
--- a/src/content/Backgrounds/LiquidChrome/LiquidChrome.vue
+++ b/src/content/Backgrounds/LiquidChrome/LiquidChrome.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Triangle } from 'ogl';
 
 interface LiquidChromeProps {
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<LiquidChromeProps>(), {
   interactive: true
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 let cleanupAnimation: (() => void) | null = null;
 
diff --git a/src/content/Backgrounds/Orb/Orb.vue b/src/content/Backgrounds/Orb/Orb.vue
index cace13a..77c29b8 100644
--- a/src/content/Backgrounds/Orb/Orb.vue
+++ b/src/content/Backgrounds/Orb/Orb.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Triangle, Vec3 } from 'ogl';
 
 interface OrbProps {
@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<OrbProps>(), {
   forceHoverState: false
 });
 
-const ctnDom = ref<HTMLDivElement | null>(null);
+const ctnDom = useTemplateRef<HTMLDivElement>('ctnDom');
 
 const vert = /* glsl */ `
     precision highp float;
diff --git a/src/content/Backgrounds/Particles/Particles.vue b/src/content/Backgrounds/Particles/Particles.vue
index ff9d628..ed70345 100644
--- a/src/content/Backgrounds/Particles/Particles.vue
+++ b/src/content/Backgrounds/Particles/Particles.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Camera, Geometry, Program, Mesh } from 'ogl';
 
 interface ParticlesProps {
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<ParticlesProps>(), {
   className: ''
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const mouseRef = ref({ x: 0, y: 0 });
 
 let renderer: Renderer | null = null;
diff --git a/src/content/Backgrounds/Silk/Silk.vue b/src/content/Backgrounds/Silk/Silk.vue
index 4eeaa89..b91661a 100644
--- a/src/content/Backgrounds/Silk/Silk.vue
+++ b/src/content/Backgrounds/Silk/Silk.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
+import { onMounted, onUnmounted, watch, type CSSProperties, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Plane, Camera } from 'ogl';
 
 interface SilkProps {
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<SilkProps>(), {
   style: () => ({})
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const hexToNormalizedRGB = (hex: string): [number, number, number] => {
   const clean = hex.replace('#', '');
diff --git a/src/content/Backgrounds/Squares/Squares.vue b/src/content/Backgrounds/Squares/Squares.vue
index f1c0f6d..ad0b71b 100644
--- a/src/content/Backgrounds/Squares/Squares.vue
+++ b/src/content/Backgrounds/Squares/Squares.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 type CanvasStrokeStyle = string | CanvasGradient | CanvasPattern;
 
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   hoverFillColor: '#222'
 });
 
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const requestRef = ref<number | null>(null);
 const numSquaresX = ref<number>(0);
 const numSquaresY = ref<number>(0);
diff --git a/src/content/Backgrounds/Threads/Threads.vue b/src/content/Backgrounds/Threads/Threads.vue
index 669c100..3a260ab 100644
--- a/src/content/Backgrounds/Threads/Threads.vue
+++ b/src/content/Backgrounds/Threads/Threads.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Triangle, Color } from 'ogl';
 import type { OGLRenderingContext } from 'ogl';
 
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   enableMouseInteraction: false
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 let renderer: Renderer | null = null;
 let gl: OGLRenderingContext | null = null;
diff --git a/src/content/Backgrounds/Waves/Waves.vue b/src/content/Backgrounds/Waves/Waves.vue
index 1a0e528..65ab330 100644
--- a/src/content/Backgrounds/Waves/Waves.vue
+++ b/src/content/Backgrounds/Waves/Waves.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
+import { onMounted, onUnmounted, watch, type CSSProperties, useTemplateRef } from 'vue';
 
 class Grad {
   x: number;
@@ -180,8 +180,8 @@ const props = withDefaults(defineProps<WavesProps>(), {
   className: ''
 });
 
-const containerRef = ref<HTMLDivElement>();
-const canvasRef = ref<HTMLCanvasElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 
 let ctx: CanvasRenderingContext2D | null = null;
 let bounding = { width: 0, height: 0, left: 0, top: 0 };
diff --git a/src/content/Components/CardSwap/CardSwap.vue b/src/content/Components/CardSwap/CardSwap.vue
index fbc5dc2..a71cf6f 100644
--- a/src/content/Components/CardSwap/CardSwap.vue
+++ b/src/content/Components/CardSwap/CardSwap.vue
@@ -70,7 +70,7 @@ export { makeSlot, placeNow };
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, computed, useTemplateRef } from 'vue';
 
 const props = withDefaults(defineProps<CardSwapProps>(), {
   width: 500,
@@ -87,7 +87,7 @@ const emit = defineEmits<{
   'card-click': [index: number];
 }>();
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const cardRefs = ref<HTMLElement[]>([]);
 const order = ref<number[]>([0, 1, 2]);
 const tlRef = ref<gsap.core.Timeline | null>(null);
diff --git a/src/content/Components/Carousel/Carousel.vue b/src/content/Components/Carousel/Carousel.vue
index 0f15131..83cd27c 100644
--- a/src/content/Components/Carousel/Carousel.vue
+++ b/src/content/Components/Carousel/Carousel.vue
@@ -139,7 +139,7 @@ export const DEFAULT_ITEMS: CarouselItem[] = [
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Motion, useMotionValue, useTransform } from 'motion-v';
 
 const DRAG_BUFFER = 0;
@@ -167,7 +167,7 @@ const motionX = useMotionValue(0);
 const isHovered = ref<boolean>(false);
 const isResetting = ref<boolean>(false);
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 let autoplayTimer: number | null = null;
 
 const dragConstraints = computed(() => {
diff --git a/src/content/Components/CircularGallery/CircularGallery.vue b/src/content/Components/CircularGallery/CircularGallery.vue
index 10f12e7..6dbc450 100644
--- a/src/content/Components/CircularGallery/CircularGallery.vue
+++ b/src/content/Components/CircularGallery/CircularGallery.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl';
 
 interface CircularGalleryProps {
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<CircularGalleryProps>(), {
   scrollEase: 0.05
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 let app: App | null = null;
 
 type GL = Renderer['gl'];
diff --git a/src/content/Components/DecayCard/DecayCard.vue b/src/content/Components/DecayCard/DecayCard.vue
index f89a9cf..57022e4 100644
--- a/src/content/Components/DecayCard/DecayCard.vue
+++ b/src/content/Components/DecayCard/DecayCard.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 interface Props {
@@ -71,7 +71,7 @@ withDefaults(defineProps<Props>(), {
   image: 'https://picsum.photos/300/400?grayscale'
 });
 
-const svgRef = ref<HTMLDivElement | null>(null);
+const svgRef = useTemplateRef<HTMLDivElement>('svgRef');
 const displacementMapRef = ref<SVGFEDisplacementMapElement | null>(null);
 
 let cursor = {
diff --git a/src/content/Components/ElasticSlider/ElasticSlider.vue b/src/content/Components/ElasticSlider/ElasticSlider.vue
index 2f53b08..1c52820 100644
--- a/src/content/Components/ElasticSlider/ElasticSlider.vue
+++ b/src/content/Components/ElasticSlider/ElasticSlider.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, type Component } from 'vue';
+import { ref, computed, watch, onMounted, type Component, useTemplateRef } from 'vue';
 
 const MAX_OVERFLOW = 50;
 
@@ -98,9 +98,9 @@ const props = withDefaults(defineProps<Props>(), {
   rightIcon: '+'
 });
 
-const sliderRef = ref<HTMLDivElement>();
-const leftIconRef = ref<HTMLDivElement>();
-const rightIconRef = ref<HTMLDivElement>();
+const sliderRef = useTemplateRef<HTMLDivElement>('sliderRef');
+const leftIconRef = useTemplateRef<HTMLDivElement>('leftIconRef');
+const rightIconRef = useTemplateRef<HTMLDivElement>('rightIconRef');
 
 const value = ref(props.defaultValue);
 const region = ref<'left' | 'middle' | 'right'>('middle');
diff --git a/src/content/Components/FlyingPosters/FlyingPosters.vue b/src/content/Components/FlyingPosters/FlyingPosters.vue
index 96c51aa..c8036dc 100644
--- a/src/content/Components/FlyingPosters/FlyingPosters.vue
+++ b/src/content/Components/FlyingPosters/FlyingPosters.vue
@@ -546,7 +546,7 @@ export { Canvas, Media };
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 const props = withDefaults(defineProps<FlyingPostersProps>(), {
   items: () => [],
@@ -559,8 +559,8 @@ const props = withDefaults(defineProps<FlyingPostersProps>(), {
   className: ''
 });
 
-const containerRef = ref<HTMLDivElement>();
-const canvasRef = ref<HTMLCanvasElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const instanceRef = ref<Canvas | null>(null);
 
 const initCanvas = () => {
diff --git a/src/content/Components/GooeyNav/GooeyNav.vue b/src/content/Components/GooeyNav/GooeyNav.vue
index 39edb98..1cee48e 100644
--- a/src/content/Components/GooeyNav/GooeyNav.vue
+++ b/src/content/Components/GooeyNav/GooeyNav.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 interface GooeyNavItem {
   label: string;
@@ -66,10 +66,10 @@ const props = withDefaults(defineProps<GooeyNavProps>(), {
   initialActiveIndex: 0
 });
 
-const containerRef = ref<HTMLDivElement>();
-const navRef = ref<HTMLUListElement>();
-const filterRef = ref<HTMLSpanElement>();
-const textRef = ref<HTMLSpanElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const navRef = useTemplateRef<HTMLUListElement>('navRef');
+const filterRef = useTemplateRef<HTMLSpanElement>('filterRef');
+const textRef = useTemplateRef<HTMLSpanElement>('textRef');
 const activeIndex = ref<number>(props.initialActiveIndex);
 
 let resizeObserver: ResizeObserver | null = null;
diff --git a/src/content/Components/InfiniteScroll/InfiniteScroll.vue b/src/content/Components/InfiniteScroll/InfiniteScroll.vue
index 811ce33..267527f 100644
--- a/src/content/Components/InfiniteScroll/InfiniteScroll.vue
+++ b/src/content/Components/InfiniteScroll/InfiniteScroll.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { Observer } from 'gsap/Observer';
 
@@ -76,8 +76,8 @@ const props = withDefaults(defineProps<Props>(), {
   pauseOnHover: false
 });
 
-const wrapperRef = ref<HTMLDivElement | null>(null);
-const containerRef = ref<HTMLDivElement | null>(null);
+const wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 let observer: Observer | null = null;
 let rafId: number | null = null;
 let velocity = 0;
diff --git a/src/content/Components/Masonry/Masonry.vue b/src/content/Components/Masonry/Masonry.vue
index 72e9004..7e211d8 100644
--- a/src/content/Components/Masonry/Masonry.vue
+++ b/src/content/Components/Masonry/Masonry.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watchEffect, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watchEffect, nextTick, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 interface Item {
@@ -74,7 +74,7 @@ const useMedia = (queries: string[], values: number[], defaultValue: number) =>
 };
 
 const useMeasure = () => {
-  const containerRef = ref<HTMLDivElement | null>(null);
+  const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
   const size = ref({ width: 0, height: 0 });
   let resizeObserver: ResizeObserver | null = null;
 
diff --git a/src/content/Components/PixelCard/PixelCard.vue b/src/content/Components/PixelCard/PixelCard.vue
index 53111fd..c0b8ce1 100644
--- a/src/content/Components/PixelCard/PixelCard.vue
+++ b/src/content/Components/PixelCard/PixelCard.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, useTemplateRef } from 'vue';
 
 class Pixel {
   width: number;
@@ -189,8 +189,8 @@ const props = withDefaults(defineProps<PixelCardProps>(), {
   className: ''
 });
 
-const containerRef = ref<HTMLDivElement>();
-const canvasRef = ref<HTMLCanvasElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const pixelsRef = ref<Pixel[]>([]);
 const animationRef = ref<number | null>(null);
 const timePreviousRef = ref(performance.now());
diff --git a/src/content/Components/ProfileCard/ProfileCard.vue b/src/content/Components/ProfileCard/ProfileCard.vue
index 58afb90..c446632 100644
--- a/src/content/Components/ProfileCard/ProfileCard.vue
+++ b/src/content/Components/ProfileCard/ProfileCard.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, useTemplateRef } from 'vue';
 
 interface Props {
   avatarUrl?: string;
@@ -100,8 +100,8 @@ const emit = defineEmits<{
   contactClick: [];
 }>();
 
-const wrapRef = ref<HTMLDivElement>();
-const cardRef = ref<HTMLElement>();
+const wrapRef = useTemplateRef<HTMLDivElement>('wrapRef');
+const cardRef = useTemplateRef<HTMLElement>('cardRef');
 
 const DEFAULT_BEHIND_GRADIENT =
   'radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)';
diff --git a/src/content/Components/SpotlightCard/SpotlightCard.vue b/src/content/Components/SpotlightCard/SpotlightCard.vue
index 04933c0..94122a1 100644
--- a/src/content/Components/SpotlightCard/SpotlightCard.vue
+++ b/src/content/Components/SpotlightCard/SpotlightCard.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 
 interface Position {
   x: number;
@@ -35,7 +35,7 @@ interface SpotlightCardProps {
 
 const { className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' } = defineProps<SpotlightCardProps>();
 
-const divRef = ref<HTMLDivElement>();
+const divRef = useTemplateRef<HTMLDivElement>('divRef');
 const isFocused = ref<boolean>(false);
 const position = ref<Position>({ x: 0, y: 0 });
 const opacity = ref<number>(0);
diff --git a/src/content/Components/TiltedCard/TiltedCard.vue b/src/content/Components/TiltedCard/TiltedCard.vue
index 7f70d65..3d70895 100644
--- a/src/content/Components/TiltedCard/TiltedCard.vue
+++ b/src/content/Components/TiltedCard/TiltedCard.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 import { Motion } from 'motion-v';
 
 interface TiltedCardProps {
@@ -99,7 +99,7 @@ const props = withDefaults(defineProps<TiltedCardProps>(), {
   displayOverlayContent: false
 });
 
-const cardRef = ref<HTMLElement | null>(null);
+const cardRef = useTemplateRef<HTMLElement>('cardRef');
 const xValue = ref(0);
 const yValue = ref(0);
 const rotateXValue = ref(0);
diff --git a/src/content/TextAnimations/AsciiText/AsciiText.vue b/src/content/TextAnimations/AsciiText/AsciiText.vue
index 9162d1e..b222d63 100644
--- a/src/content/TextAnimations/AsciiText/AsciiText.vue
+++ b/src/content/TextAnimations/AsciiText/AsciiText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 
 interface AsciiTextProps {
@@ -495,7 +495,7 @@ class CanvAscii {
   }
 }
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 let asciiRef: CanvAscii | null = null;
 
 const initializeAscii = () => {
diff --git a/src/content/TextAnimations/BlurText/BlurText.vue b/src/content/TextAnimations/BlurText/BlurText.vue
index d430a8e..6017bd1 100644
--- a/src/content/TextAnimations/BlurText/BlurText.vue
+++ b/src/content/TextAnimations/BlurText/BlurText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Motion } from 'motion-v';
 
 interface BlurTextProps {
@@ -45,7 +45,7 @@ const buildKeyframes = (
 const elements = computed(() => (props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')));
 
 const inView = ref(false);
-const rootRef = ref<HTMLParagraphElement | null>(null);
+const rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');
 let observer: IntersectionObserver | null = null;
 
 const defaultFrom = computed(() =>
diff --git a/src/content/TextAnimations/DecryptedText/DecryptedText.vue b/src/content/TextAnimations/DecryptedText/DecryptedText.vue
index 05c6516..b28904b 100644
--- a/src/content/TextAnimations/DecryptedText/DecryptedText.vue
+++ b/src/content/TextAnimations/DecryptedText/DecryptedText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
 
 interface DecryptedTextProps {
   text: string;
@@ -33,7 +33,7 @@ const emit = defineEmits<{
   animationComplete: [];
 }>();
 
-const containerRef = ref<HTMLSpanElement>();
+const containerRef = useTemplateRef<HTMLSpanElement>('containerRef');
 const displayText = ref(props.text);
 const isHovering = ref(false);
 const isScrambling = ref(false);
diff --git a/src/content/TextAnimations/FallingText/FallingText.vue b/src/content/TextAnimations/FallingText/FallingText.vue
index 70a822d..39cc2c3 100644
--- a/src/content/TextAnimations/FallingText/FallingText.vue
+++ b/src/content/TextAnimations/FallingText/FallingText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
 import Matter from 'matter-js';
 
 interface FallingTextProps {
@@ -24,9 +24,9 @@ const props = withDefaults(defineProps<FallingTextProps>(), {
   fontSize: '1rem'
 });
 
-const containerRef = ref<HTMLDivElement>();
-const textRef = ref<HTMLDivElement>();
-const canvasContainerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const textRef = useTemplateRef<HTMLDivElement>('textRef');
+const canvasContainerRef = useTemplateRef<HTMLDivElement>('canvasContainerRef');
 
 const effectStarted = ref(false);
 
diff --git a/src/content/TextAnimations/FuzzyText/FuzzyText.vue b/src/content/TextAnimations/FuzzyText/FuzzyText.vue
index 94fee3f..6637e4f 100644
--- a/src/content/TextAnimations/FuzzyText/FuzzyText.vue
+++ b/src/content/TextAnimations/FuzzyText/FuzzyText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
 
 interface FuzzyTextProps {
   text: string;
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<FuzzyTextProps>(), {
   hoverIntensity: 0.5
 });
 
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 let animationFrameId: number;
 let isCancelled = false;
 let cleanup: (() => void) | null = null;
diff --git a/src/content/TextAnimations/ScrambleText/ScrambleText.vue b/src/content/TextAnimations/ScrambleText/ScrambleText.vue
index d536b0b..b5ac853 100644
--- a/src/content/TextAnimations/ScrambleText/ScrambleText.vue
+++ b/src/content/TextAnimations/ScrambleText/ScrambleText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { SplitText } from 'gsap/SplitText';
 import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<ScrambleTextProps>(), {
   style: () => ({})
 });
 
-const rootRef = ref<HTMLDivElement | null>(null);
+const rootRef = useTemplateRef<HTMLDivElement>('rootRef');
 
 let splitText: SplitText | null = null;
 let handleMove: ((e: PointerEvent) => void) | null = null;
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
index 01b98d2..61280fd 100644
--- a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
   stagger: 0.03
 });
 
-const containerRef = ref<HTMLElement | null>(null);
+const containerRef = useTemplateRef<HTMLElement>('containerRef');
 let scrollTriggerInstance: ScrollTrigger | null = null;
 
 const splitText = computed(() => {
diff --git a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
index b9dda72..abd7f7a 100644
--- a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
+++ b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   wordAnimationEnd: 'bottom bottom'
 });
 
-const containerRef = ref<HTMLElement | null>(null);
+const containerRef = useTemplateRef<HTMLElement>('containerRef');
 let scrollTriggerInstances: ScrollTrigger[] = [];
 
 const splitText = computed(() => {
diff --git a/src/content/TextAnimations/SplitText/SplitText.vue b/src/content/TextAnimations/SplitText/SplitText.vue
index 8379cc8..c116f52 100644
--- a/src/content/TextAnimations/SplitText/SplitText.vue
+++ b/src/content/TextAnimations/SplitText/SplitText.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { SplitText as GSAPSplitText } from 'gsap/SplitText';
@@ -51,7 +51,7 @@ const emit = defineEmits<{
   'animation-complete': [];
 }>();
 
-const textRef = ref<HTMLParagraphElement | null>(null);
+const textRef = useTemplateRef<HTMLParagraphElement>('textRef');
 const animationCompletedRef = ref(false);
 const scrollTriggerRef = ref<ScrollTrigger | null>(null);
 const timelineRef = ref<gsap.core.Timeline | null>(null);
diff --git a/src/content/TextAnimations/TextCursor/TextCursor.vue b/src/content/TextAnimations/TextCursor/TextCursor.vue
index f49a99e..39dd68f 100644
--- a/src/content/TextAnimations/TextCursor/TextCursor.vue
+++ b/src/content/TextAnimations/TextCursor/TextCursor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { Motion } from 'motion-v';
 
 interface TextCursorProps {
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<TextCursorProps>(), {
   maxPoints: 5
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const trail = ref<TrailItem[]>([]);
 const lastMoveTime = ref(Date.now());
 const idCounter = ref(0);
diff --git a/src/content/TextAnimations/TextPressure/TextPressure.vue b/src/content/TextAnimations/TextPressure/TextPressure.vue
index 9227015..11b3abe 100644
--- a/src/content/TextAnimations/TextPressure/TextPressure.vue
+++ b/src/content/TextAnimations/TextPressure/TextPressure.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, computed, watch, useTemplateRef } from 'vue';
 
 interface TextPressureProps {
   text?: string;
@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<TextPressureProps>(), {
   minFontSize: 24
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
-const titleRef = ref<HTMLHeadingElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const titleRef = useTemplateRef<HTMLHeadingElement>('titleRef');
 const spansRef = ref<(HTMLSpanElement | null)[]>([]);
 
 const mouseRef = ref({ x: 0, y: 0 });
diff --git a/src/content/TextAnimations/TextTrail/TextTrail.vue b/src/content/TextAnimations/TextTrail/TextTrail.vue
index 2ec7cb7..8702105 100644
--- a/src/content/TextAnimations/TextTrail/TextTrail.vue
+++ b/src/content/TextAnimations/TextTrail/TextTrail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import {
   CanvasTexture,
   Clock,
@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TextTrailProps>(), {
   supersample: 2
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const hexToRgb = (hex: string): [number, number, number] => {
   let h = hex.replace('#', '');
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index d03d667..f1de0b6 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { motion } from 'motion-v';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch, useTemplateRef } from 'vue';
 
 interface TrueFocusProps {
   sentence?: string;
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<TrueFocusProps>(), {
 const words = computed(() => props.sentence.split(' '));
 const currentIndex = ref(0);
 const lastActiveIndex = ref<number | null>(null);
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const wordRefs = ref<HTMLSpanElement[]>([]);
 const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
 
diff --git a/src/demo/Backgrounds/GridDistortionDemo.vue b/src/demo/Backgrounds/GridDistortionDemo.vue
index 9b609d9..79708cc 100644
--- a/src/demo/Backgrounds/GridDistortionDemo.vue
+++ b/src/demo/Backgrounds/GridDistortionDemo.vue
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { useForceRerender } from '@/composables/useForceRerender';
-import { ref, watch } from 'vue';
+import { ref, watch, useTemplateRef } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
@@ -53,7 +53,7 @@ const { rerenderKey: key, forceRerender } = useForceRerender();
 const grid = ref(10);
 const mouse = ref(0.25);
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 watch(
   () => [grid, mouse],
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index 84850a3..cb3a7dc 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -58,7 +58,7 @@ import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vu
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
 
-const containerRef = ref<HTMLElement | null>(null);
+const containerRef = useTemplateRef<HTMLElement>('containerRef');
 const scrollText = ref('Vue Bits!');
 const animationDuration = ref(1);
 const ease = ref('back.inOut(2)');
diff --git a/src/demo/TextAnimations/ScrollRevealDemo.vue b/src/demo/TextAnimations/ScrollRevealDemo.vue
index 5a2d9c7..1de8f92 100644
--- a/src/demo/TextAnimations/ScrollRevealDemo.vue
+++ b/src/demo/TextAnimations/ScrollRevealDemo.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -55,7 +55,7 @@ import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const containerRef = ref<HTMLElement | null>(null);
+const containerRef = useTemplateRef<HTMLElement>('containerRef');
 const scrollText = ref(
   'When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!'
 );
diff --git a/src/pages/CategoryPage.vue b/src/pages/CategoryPage.vue
index 417184a..0e72ff4 100644
--- a/src/pages/CategoryPage.vue
+++ b/src/pages/CategoryPage.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick, defineAsyncComponent } from 'vue';
+import { computed, watch, onMounted, nextTick, defineAsyncComponent, useTemplateRef } from 'vue';
 import { useRoute } from 'vue-router';
 import { componentMap } from '../constants/Components';
 import { decodeLabel } from '../utils/utils';
 import BackToTopButton from '@/components/common/BackToTopButton.vue';
 
 const route = useRoute();
-const scrollRef = ref<HTMLDivElement | null>(null);
+const scrollRef = useTemplateRef<HTMLDivElement>('scrollRef');
 
 const subcategory = computed(() => route.params.subcategory as string);
 const decodedLabel = computed(() => decodeLabel(subcategory.value));