Added useTemplateRef API support

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;

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('#', '');

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 {

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;

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,

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);

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);
 

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 = {

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;

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<
   {

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;

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;
 

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;

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;

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('#', '');

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);

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;

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 };