From 48048e875f77dc2a95c59b14e69547b62a20a19b Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 11 Jul 2025 20:10:08 +0200
Subject: [PATCH 1/7] Add Beams component and demo with associated code
 examples

---
 src/constants/Components.ts                 |   1 +
 src/constants/code/Backgrounds/beamsCode.ts |  37 ++
 src/content/Backgrounds/Beams/Beams.vue     | 469 ++++++++++++++++++++
 src/demo/Backgrounds/BeamsDemo.vue          | 183 ++++++++
 4 files changed, 690 insertions(+)
 create mode 100644 src/constants/code/Backgrounds/beamsCode.ts
 create mode 100644 src/content/Backgrounds/Beams/Beams.vue
 create mode 100644 src/demo/Backgrounds/BeamsDemo.vue

diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index ac70fc8..d1c9376 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -54,6 +54,7 @@ const backgrounds = {
   'iridescence': () => import("../demo/Backgrounds/IridescenceDemo.vue"),
   'threads': () => import("../demo/Backgrounds/ThreadsDemo.vue"),
   'aurora': () => import("../demo/Backgrounds/AuroraDemo.vue"),
+  'beams': () => import("../demo/Backgrounds/BeamsDemo.vue"),
 };
 
 export const componentMap = {
diff --git a/src/constants/code/Backgrounds/beamsCode.ts b/src/constants/code/Backgrounds/beamsCode.ts
new file mode 100644
index 0000000..8fe6968
--- /dev/null
+++ b/src/constants/code/Backgrounds/beamsCode.ts
@@ -0,0 +1,37 @@
+import code from '@content/Backgrounds/Beams/Beams.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const beams: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Beams`,
+  installation: `npm install three`,
+  usage: `<template>
+  <div class="beams-container">
+    <Beams
+      :beam-width="2"
+      :beam-height="15"
+      :beam-number="12"
+      :light-color="'#ffffff'"
+      :speed="2"
+      :noise-intensity="1.75"
+      :scale="0.2"
+      :rotation="0"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Beams from "./Beams.vue";
+</script>
+
+<style scoped>
+  .beams-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+    background: #000;
+  }
+</style>`,
+  code
+}
diff --git a/src/content/Backgrounds/Beams/Beams.vue b/src/content/Backgrounds/Beams/Beams.vue
new file mode 100644
index 0000000..4f8585f
--- /dev/null
+++ b/src/content/Backgrounds/Beams/Beams.vue
@@ -0,0 +1,469 @@
+<template>
+  <div ref="containerRef" class="beams-container w-full h-full relative" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import * as THREE from 'three'
+import { degToRad } from 'three/src/math/MathUtils.js'
+
+interface BeamsProps {
+  beamWidth?: number
+  beamHeight?: number
+  beamNumber?: number
+  lightColor?: string
+  speed?: number
+  noiseIntensity?: number
+  scale?: number
+  rotation?: number
+}
+
+const props = withDefaults(defineProps<BeamsProps>(), {
+  beamWidth: 2,
+  beamHeight: 15,
+  beamNumber: 12,
+  lightColor: '#ffffff',
+  speed: 2,
+  noiseIntensity: 1.75,
+  scale: 0.2,
+  rotation: 0
+})
+
+const containerRef = ref<HTMLDivElement>()
+
+let renderer: THREE.WebGLRenderer | null = null
+let scene: THREE.Scene | null = null
+let camera: THREE.PerspectiveCamera | null = null
+let beamMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null
+let directionalLight: THREE.DirectionalLight | null = null
+let ambientLight: THREE.AmbientLight | null = null
+let animationId: number | null = null
+
+type UniformValue = THREE.IUniform<unknown> | unknown
+
+interface ExtendMaterialConfig {
+  header: string
+  vertexHeader?: string
+  fragmentHeader?: string
+  material?: THREE.MeshPhysicalMaterialParameters & { fog?: boolean }
+  uniforms?: Record<string, UniformValue>
+  vertex?: Record<string, string>
+  fragment?: Record<string, string>
+}
+
+type ShaderWithDefines = THREE.ShaderLibShader & {
+  defines?: Record<string, string | number | boolean>
+}
+
+const hexToNormalizedRGB = (hex: string): [number, number, number] => {
+  const clean = hex.replace('#', '')
+  const r = parseInt(clean.substring(0, 2), 16)
+  const g = parseInt(clean.substring(2, 4), 16)
+  const b = parseInt(clean.substring(4, 6), 16)
+  return [r / 255, g / 255, b / 255]
+}
+
+const noise = `
+float random (in vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+float noise (in vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(a, b, u.x) +
+           (c - a)* u.y * (1.0 - u.x) +
+           (d - b) * u.x * u.y;
+}
+vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+float cnoise(vec3 P){
+  vec3 Pi0 = floor(P);
+  vec3 Pi1 = Pi0 + vec3(1.0);
+  Pi0 = mod(Pi0, 289.0);
+  Pi1 = mod(Pi1, 289.0);
+  vec3 Pf0 = fract(P);
+  vec3 Pf1 = Pf0 - vec3(1.0);
+  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+  vec4 iy = vec4(Pi0.yy, Pi1.yy);
+  vec4 iz0 = Pi0.zzzz;
+  vec4 iz1 = Pi1.zzzz;
+  vec4 ixy = permute(permute(ix) + iy);
+  vec4 ixy0 = permute(ixy + iz0);
+  vec4 ixy1 = permute(ixy + iz1);
+  vec4 gx0 = ixy0 / 7.0;
+  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+  gx0 = fract(gx0);
+  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+  vec4 sz0 = step(gz0, vec4(0.0));
+  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+  gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+  vec4 gx1 = ixy1 / 7.0;
+  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+  gx1 = fract(gx1);
+  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+  vec4 sz1 = step(gz1, vec4(0.0));
+  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+  gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+  vec4 norm0 = taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
+  g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w;
+  vec4 norm1 = taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
+  g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w;
+  float n000 = dot(g000, Pf0);
+  float n100 = dot(g100, vec3(Pf1.x,Pf0.yz));
+  float n010 = dot(g010, vec3(Pf0.x,Pf1.y,Pf0.z));
+  float n110 = dot(g110, vec3(Pf1.xy,Pf0.z));
+  float n001 = dot(g001, vec3(Pf0.xy,Pf1.z));
+  float n101 = dot(g101, vec3(Pf1.x,Pf0.y,Pf1.z));
+  float n011 = dot(g011, vec3(Pf0.x,Pf1.yz));
+  float n111 = dot(g111, Pf1);
+  vec3 fade_xyz = fade(Pf0);
+  vec4 n_z = mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
+  vec2 n_yz = mix(n_z.xy,n_z.zw,fade_xyz.y);
+  float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
+  return 2.2 * n_xyz;
+}
+`
+
+function extendMaterial<T extends THREE.Material = THREE.Material>(
+  BaseMaterial: new (params?: THREE.MaterialParameters) => T,
+  cfg: ExtendMaterialConfig
+): THREE.ShaderMaterial {
+  const physical = THREE.ShaderLib.physical as ShaderWithDefines
+  const {
+    vertexShader: baseVert,
+    fragmentShader: baseFrag,
+    uniforms: baseUniforms,
+  } = physical
+  const baseDefines = physical.defines ?? {}
+
+  const uniforms: Record<string, THREE.IUniform> =
+    THREE.UniformsUtils.clone(baseUniforms)
+
+  const defaults = new BaseMaterial(cfg.material || {}) as T & {
+    color?: THREE.Color
+    roughness?: number
+    metalness?: number
+    envMap?: THREE.Texture
+    envMapIntensity?: number
+  }
+
+  if (defaults.color) uniforms.diffuse.value = defaults.color
+  if ('roughness' in defaults) uniforms.roughness.value = defaults.roughness
+  if ('metalness' in defaults) uniforms.metalness.value = defaults.metalness
+  if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap
+  if ('envMapIntensity' in defaults)
+    uniforms.envMapIntensity.value = defaults.envMapIntensity
+
+  Object.entries(cfg.uniforms ?? {}).forEach(([key, u]) => {
+    uniforms[key] =
+      u !== null && typeof u === 'object' && 'value' in u
+        ? (u as THREE.IUniform<unknown>)
+        : ({ value: u } as THREE.IUniform<unknown>)
+  })
+
+  let vert = `${cfg.header}\n${cfg.vertexHeader ?? ''}\n${baseVert}`
+  let frag = `${cfg.header}\n${cfg.fragmentHeader ?? ''}\n${baseFrag}`
+
+  for (const [inc, code] of Object.entries(cfg.vertex ?? {})) {
+    vert = vert.replace(inc, `${inc}\n${code}`)
+  }
+  for (const [inc, code] of Object.entries(cfg.fragment ?? {})) {
+    frag = frag.replace(inc, `${inc}\n${code}`)
+  }
+
+  const mat = new THREE.ShaderMaterial({
+    defines: { ...baseDefines },
+    uniforms,
+    vertexShader: vert,
+    fragmentShader: frag,
+    lights: true,
+    fog: !!cfg.material?.fog,
+  })
+
+  return mat
+}
+
+function createStackedPlanesBufferGeometry(
+  n: number,
+  width: number,
+  height: number,
+  spacing: number,
+  heightSegments: number
+): THREE.BufferGeometry {
+  const geometry = new THREE.BufferGeometry()
+  const numVertices = n * (heightSegments + 1) * 2
+  const numFaces = n * heightSegments * 2
+  const positions = new Float32Array(numVertices * 3)
+  const indices = new Uint32Array(numFaces * 3)
+  const uvs = new Float32Array(numVertices * 2)
+
+  let vertexOffset = 0
+  let indexOffset = 0
+  let uvOffset = 0
+  const totalWidth = n * width + (n - 1) * spacing
+  const xOffsetBase = -totalWidth / 2
+
+  for (let i = 0; i < n; i++) {
+    const xOffset = xOffsetBase + i * (width + spacing)
+    const uvXOffset = Math.random() * 300
+    const uvYOffset = Math.random() * 300
+
+    for (let j = 0; j <= heightSegments; j++) {
+      const y = height * (j / heightSegments - 0.5)
+      const v0 = [xOffset, y, 0]
+      const v1 = [xOffset + width, y, 0]
+      positions.set([...v0, ...v1], vertexOffset * 3)
+
+      const uvY = j / heightSegments
+      uvs.set(
+        [uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset],
+        uvOffset
+      )
+
+      if (j < heightSegments) {
+        const a = vertexOffset,
+          b = vertexOffset + 1,
+          c = vertexOffset + 2,
+          d = vertexOffset + 3
+        indices.set([a, b, c, c, b, d], indexOffset)
+        indexOffset += 6
+      }
+      vertexOffset += 2
+      uvOffset += 4
+    }
+  }
+
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+  geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
+  geometry.setIndex(new THREE.BufferAttribute(indices, 1))
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+const beamMaterial = computed(() =>
+  extendMaterial(THREE.MeshStandardMaterial, {
+    header: `
+  varying vec3 vEye;
+  varying float vNoise;
+  varying vec2 vUv;
+  varying vec3 vPosition;
+  uniform float time;
+  uniform float uSpeed;
+  uniform float uNoiseIntensity;
+  uniform float uScale;
+  ${noise}`,
+    vertexHeader: `
+  float getPos(vec3 pos) {
+    vec3 noisePos =
+      vec3(pos.x * 0., pos.y - uv.y, pos.z + time * uSpeed * 3.) * uScale;
+    return cnoise(noisePos);
+  }
+  vec3 getCurrentPos(vec3 pos) {
+    vec3 newpos = pos;
+    newpos.z += getPos(pos);
+    return newpos;
+  }
+  vec3 getNormal(vec3 pos) {
+    vec3 curpos = getCurrentPos(pos);
+    vec3 nextposX = getCurrentPos(pos + vec3(0.01, 0.0, 0.0));
+    vec3 nextposZ = getCurrentPos(pos + vec3(0.0, -0.01, 0.0));
+    vec3 tangentX = normalize(nextposX - curpos);
+    vec3 tangentZ = normalize(nextposZ - curpos);
+    return normalize(cross(tangentZ, tangentX));
+  }`,
+    fragmentHeader: '',
+    vertex: {
+      '#include <begin_vertex>': `transformed.z += getPos(transformed.xyz);`,
+      '#include <beginnormal_vertex>': `objectNormal = getNormal(position.xyz);`,
+    },
+    fragment: {
+      '#include <dithering_fragment>': `
+    float randomNoise = noise(gl_FragCoord.xy);
+    gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`,
+    },
+    material: { fog: true },
+    uniforms: {
+      diffuse: new THREE.Color(...hexToNormalizedRGB('#000000')),
+      time: { shared: true, mixed: true, linked: true, value: 0 },
+      roughness: 0.3,
+      metalness: 0.3,
+      uSpeed: { shared: true, mixed: true, linked: true, value: props.speed },
+      envMapIntensity: 10,
+      uNoiseIntensity: props.noiseIntensity,
+      uScale: props.scale,
+    },
+  })
+)
+
+const initThreeJS = () => {
+  if (!containerRef.value) return
+
+  cleanup()
+
+  const container = containerRef.value
+  
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+  renderer.setClearColor(0x000000, 1)
+  
+  scene = new THREE.Scene()
+  
+  camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000)
+  camera.position.set(0, 0, 20)
+  
+  const geometry = createStackedPlanesBufferGeometry(
+    props.beamNumber,
+    props.beamWidth,
+    props.beamHeight,
+    0,
+    100
+  )
+  
+  const material = beamMaterial.value
+  beamMesh = new THREE.Mesh(geometry, material)
+  
+  const group = new THREE.Group()
+  group.rotation.z = degToRad(props.rotation)
+  group.add(beamMesh)
+  scene.add(group)
+  
+  directionalLight = new THREE.DirectionalLight(new THREE.Color(props.lightColor), 1)
+  directionalLight.position.set(0, 3, 10)
+  const shadowCamera = directionalLight.shadow.camera as THREE.OrthographicCamera
+  shadowCamera.top = 24
+  shadowCamera.bottom = -24
+  shadowCamera.left = -24
+  shadowCamera.right = 24
+  shadowCamera.far = 64
+  directionalLight.shadow.bias = -0.004
+  scene.add(directionalLight)
+  
+  ambientLight = new THREE.AmbientLight(0xffffff, 1)
+  scene.add(ambientLight)
+  
+  container.appendChild(renderer.domElement)
+  
+  const resize = () => {
+    if (!container || !renderer || !camera) return
+    
+    const width = container.offsetWidth
+    const height = container.offsetHeight
+    
+    renderer.setSize(width, height)
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+  }
+  
+  const resizeObserver = new ResizeObserver(resize)
+  resizeObserver.observe(container)
+  
+  resize()
+  
+  const animate = (time: number) => {
+    animationId = requestAnimationFrame(animate)
+    
+    if (beamMesh && beamMesh.material) {
+      beamMesh.material.uniforms.time.value += 0.1 * 0.016
+    }
+    
+    if (renderer && scene && camera) {
+      renderer.render(scene, camera)
+    }
+  }
+  
+  animationId = requestAnimationFrame(animate)
+  
+  ;(container as any)._resizeObserver = resizeObserver
+}
+
+const cleanup = () => {
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+  
+  if (containerRef.value) {
+    const container = containerRef.value
+    
+    if ((container as any)._resizeObserver) {
+      ;(container as any)._resizeObserver.disconnect()
+      delete (container as any)._resizeObserver
+    }
+    
+    if (renderer && renderer.domElement.parentNode === container) {
+      container.removeChild(renderer.domElement)
+    }
+  }
+  
+  if (beamMesh) {
+    if (beamMesh.geometry) beamMesh.geometry.dispose()
+    if (beamMesh.material) beamMesh.material.dispose()
+    beamMesh = null
+  }
+  
+  if (renderer) {
+    renderer.dispose()
+    renderer = null
+  }
+  
+  scene = null
+  camera = null
+  directionalLight = null
+  ambientLight = null
+}
+
+watch(
+  () => [
+    props.beamWidth,
+    props.beamHeight,
+    props.beamNumber,
+    props.lightColor,
+    props.speed,
+    props.noiseIntensity,
+    props.scale,
+    props.rotation,
+  ],
+  () => {
+    initThreeJS()
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  initThreeJS()
+})
+
+onUnmounted(() => {
+  cleanup()
+})
+</script>
+
+<style scoped>
+.beams-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.beams-container canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
diff --git a/src/demo/Backgrounds/BeamsDemo.vue b/src/demo/Backgrounds/BeamsDemo.vue
new file mode 100644
index 0000000..17828ab
--- /dev/null
+++ b/src/demo/Backgrounds/BeamsDemo.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="beams-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <Beams
+            :beam-width="beamWidth"
+            :beam-height="beamHeight"
+            :beam-number="beamNumber"
+            :light-color="lightColor"
+            :speed="speed"
+            :noise-intensity="noiseIntensity"
+            :scale="scale"
+            :rotation="rotation"
+            class="w-full h-full"
+          />
+        </div>
+
+        <Customize>
+          <div class="flex gap-4 items-center">
+            <PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
+          </div>
+
+          <PreviewSlider
+            title="Beam Width"
+            :model-value="beamWidth"
+            @update:model-value="beamWidth = $event"
+            :min="0.1"
+            :max="10"
+            :step="0.1"
+          />
+
+          <PreviewSlider
+            title="Beam Height"
+            :model-value="beamHeight"
+            @update:model-value="beamHeight = $event"
+            :min="1"
+            :max="25"
+            :step="1"
+          />
+
+          <PreviewSlider
+            title="Beam Count"
+            :model-value="beamNumber"
+            @update:model-value="beamNumber = $event"
+            :min="1"
+            :max="50"
+            :step="1"
+          />
+
+          <PreviewSlider
+            title="Speed"
+            :model-value="speed"
+            @update:model-value="speed = $event"
+            :min="0.1"
+            :max="10"
+            :step="0.1"
+          />
+
+          <PreviewSlider
+            title="Noise Intensity"
+            :model-value="noiseIntensity"
+            @update:model-value="noiseIntensity = $event"
+            :min="0"
+            :max="5"
+            :step="0.05"
+          />
+
+          <PreviewSlider
+            title="Noise Scale"
+            :model-value="scale"
+            @update:model-value="scale = $event"
+            :min="0.01"
+            :max="1"
+            :step="0.01"
+          />
+
+          <PreviewSlider
+            title="Rotation"
+            :model-value="rotation"
+            @update:model-value="rotation = $event"
+            :min="0"
+            :max="360"
+            :step="1"
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['three']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="beams" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="beams.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<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 Beams from '@/content/Backgrounds/Beams/Beams.vue'
+import PreviewColor from '@/components/common/PreviewColor.vue'
+import PreviewSlider from '@/components/common/PreviewSlider.vue'
+import { beams } from '@/constants/code/Backgrounds/beamsCode'
+
+const beamWidth = ref(3)
+const beamHeight = ref(30)
+const beamNumber = ref(20)
+const lightColor = ref('#ffffff')
+const speed = ref(2)
+const noiseIntensity = ref(1.75)
+const scale = ref(0.2)
+const rotation = ref(30)
+
+const propData = [
+  {
+    name: 'beamWidth',
+    type: 'number',
+    default: '2',
+    description: 'Width of each beam.'
+  },
+  {
+    name: 'beamHeight',
+    type: 'number',
+    default: '15',
+    description: 'Height of each beam.'
+  },
+  {
+    name: 'beamNumber',
+    type: 'number',
+    default: '12',
+    description: 'Number of beams to display.'
+  },
+  {
+    name: 'lightColor',
+    type: 'string',
+    default: "'#ffffff'",
+    description: 'Color of the directional light.'
+  },
+  {
+    name: 'speed',
+    type: 'number',
+    default: '2',
+    description: 'Speed of the animation.'
+  },
+  {
+    name: 'noiseIntensity',
+    type: 'number',
+    default: '1.75',
+    description: 'Intensity of the noise effect overlay.'
+  },
+  {
+    name: 'scale',
+    type: 'number',
+    default: '0.2',
+    description: 'Scale of the noise pattern.'
+  },
+  {
+    name: 'rotation',
+    type: 'number',
+    default: '0',
+    description: 'Rotation of the entire beams system in degrees.'
+  }
+]
+</script>
+
+<style scoped>
+.demo-container {
+  overflow: hidden;
+  padding: 0;
+  height: 500px;
+}
+</style>

From 4d38c713ab8444ab1fdd0f8b6b44188a83c1459c Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 11 Jul 2025 20:28:53 +0200
Subject: [PATCH 2/7] address PR comments for Beams component

---
 src/constants/Categories.ts                 |  3 ++-
 src/constants/code/Backgrounds/beamsCode.ts |  1 -
 src/content/Backgrounds/Beams/Beams.vue     | 14 --------------
 src/demo/Backgrounds/BeamsDemo.vue          |  5 +----
 4 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 646629f..9234c53 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -59,6 +59,7 @@ export const CATEGORIES = [
     name: 'Backgrounds',
     subcategories: [
       'Aurora',
+      'Beams',
       'Dot Grid',
       'Silk',
       'Lightning',
@@ -70,4 +71,4 @@ export const CATEGORIES = [
       'Threads',
     ],
   }
-];
\ No newline at end of file
+];
diff --git a/src/constants/code/Backgrounds/beamsCode.ts b/src/constants/code/Backgrounds/beamsCode.ts
index 8fe6968..753e6d9 100644
--- a/src/constants/code/Backgrounds/beamsCode.ts
+++ b/src/constants/code/Backgrounds/beamsCode.ts
@@ -15,7 +15,6 @@ export const beams: CodeObject = {
       :noise-intensity="1.75"
       :scale="0.2"
       :rotation="0"
-      class="w-full h-full"
     />
   </div>
 </template>
diff --git a/src/content/Backgrounds/Beams/Beams.vue b/src/content/Backgrounds/Beams/Beams.vue
index 4f8585f..48441d4 100644
--- a/src/content/Backgrounds/Beams/Beams.vue
+++ b/src/content/Backgrounds/Beams/Beams.vue
@@ -453,17 +453,3 @@ onUnmounted(() => {
   cleanup()
 })
 </script>
-
-<style scoped>
-.beams-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.beams-container canvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-</style>
diff --git a/src/demo/Backgrounds/BeamsDemo.vue b/src/demo/Backgrounds/BeamsDemo.vue
index 17828ab..3907233 100644
--- a/src/demo/Backgrounds/BeamsDemo.vue
+++ b/src/demo/Backgrounds/BeamsDemo.vue
@@ -12,14 +12,11 @@
             :noise-intensity="noiseIntensity"
             :scale="scale"
             :rotation="rotation"
-            class="w-full h-full"
           />
         </div>
 
         <Customize>
-          <div class="flex gap-4 items-center">
-            <PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
-          </div>
+          <PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
 
           <PreviewSlider
             title="Beam Width"

From 963be5986b4e24f7ea237c59470dffdbac47b3d1 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Fri, 11 Jul 2025 23:24:58 +0300
Subject: [PATCH 3/7] Fix footer text color

---
 src/components/landing/Footer/Footer.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/landing/Footer/Footer.css b/src/components/landing/Footer/Footer.css
index aa49be4..69fa91e 100644
--- a/src/components/landing/Footer/Footer.css
+++ b/src/components/landing/Footer/Footer.css
@@ -39,7 +39,7 @@
 
 .footer-description {
   font-size: 1rem;
-  color: rgba(161, 148, 184, 0.9);
+  color: rgba(148, 184, 164, 0.9);
   margin: 0;
   font-weight: 400;
   display: flex;
@@ -66,7 +66,7 @@
 
 .footer-copyright {
   font-size: 0.85rem;
-  color: rgba(161, 148, 184, 0.7);
+  color: rgba(148, 184, 163, 0.7);
   margin: 0;
   font-weight: 400;
 }

From f19ec4d1ef67a625094d035b8934f0191b67eb99 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Sat, 12 Jul 2025 00:29:13 +0200
Subject: [PATCH 4/7] fix linter

---
 src/content/Backgrounds/Beams/Beams.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/Backgrounds/Beams/Beams.vue b/src/content/Backgrounds/Beams/Beams.vue
index 48441d4..4cfde5e 100644
--- a/src/content/Backgrounds/Beams/Beams.vue
+++ b/src/content/Backgrounds/Beams/Beams.vue
@@ -375,7 +375,7 @@ const initThreeJS = () => {
   
   resize()
   
-  const animate = (time: number) => {
+  const animate = () => {
     animationId = requestAnimationFrame(animate)
     
     if (beamMesh && beamMesh.material) {
@@ -389,7 +389,7 @@ const initThreeJS = () => {
   
   animationId = requestAnimationFrame(animate)
   
-  ;(container as any)._resizeObserver = resizeObserver
+  ;(container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver
 }
 
 const cleanup = () => {
@@ -399,11 +399,11 @@ const cleanup = () => {
   }
   
   if (containerRef.value) {
-    const container = containerRef.value
+    const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver }
     
-    if ((container as any)._resizeObserver) {
-      ;(container as any)._resizeObserver.disconnect()
-      delete (container as any)._resizeObserver
+    if (container._resizeObserver) {
+      container._resizeObserver.disconnect()
+      delete container._resizeObserver
     }
     
     if (renderer && renderer.domElement.parentNode === container) {

From ea8a04eb3bccd15bf2aae8aa8e4a0e1b309e7c8f Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 02:44:24 +0600
Subject: [PATCH 5/7] Scroll Float added in text animation section

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/Components/scrollFloatCode.ts        |  25 +++
 .../ScrollFloat/ScrollFloat.vue               | 141 +++++++++++++
 src/demo/TextAnimations/ScrollFloatDemo.vue   | 191 ++++++++++++++++++
 5 files changed, 359 insertions(+)
 create mode 100644 src/constants/code/Components/scrollFloatCode.ts
 create mode 100644 src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
 create mode 100644 src/demo/TextAnimations/ScrollFloatDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 9234c53..6dae674 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'Scroll Float'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index d1c9376..ea07b7e 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -23,6 +23,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
+  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/Components/scrollFloatCode.ts
new file mode 100644
index 0000000..d4cd34b
--- /dev/null
+++ b/src/constants/code/Components/scrollFloatCode.ts
@@ -0,0 +1,25 @@
+import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const scrollFloatCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  usage: `<template>
+  <ScrollFloat
+    :children="scrollText"
+    :animation-duration="animationDuration"
+    :ease="ease"
+    :scroll-start="scrollStart"
+    :scroll-end="scrollEnd"
+    :stagger="stagger"
+    :container-class-name="containerClassName"
+    :text-class-name="textClassName"
+    :scroll-container-ref="{ current: containerRef }"
+    :key="rerenderKey"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollFloat from "./ScrollFloat.vue";
+</script>`,
+  code
+}
\ No newline at end of file
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
new file mode 100644
index 0000000..b12e5a4
--- /dev/null
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -0,0 +1,141 @@
+<template>
+    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
+      <span :class="`scroll-float-text ${textClassName}`">
+        <span
+          v-for="(char, index) in splitText"
+          :key="index"
+          class="char"
+        >
+          {{ char === " " ? "\u00A0" : char }}
+        </span>
+      </span>
+    </h2>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+  import { gsap } from 'gsap';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
+  
+  gsap.registerPlugin(ScrollTrigger);
+  
+  interface Props {
+    children: string;
+    scrollContainerRef?: { current: HTMLElement | null };
+    containerClassName?: string;
+    textClassName?: string;
+    animationDuration?: number;
+    ease?: string;
+    scrollStart?: string;
+    scrollEnd?: string;
+    stagger?: number;
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    containerClassName: '',
+    textClassName: '',
+    animationDuration: 1,
+    ease: 'back.inOut(2)',
+    scrollStart: 'center bottom+=50%',
+    scrollEnd: 'bottom bottom-=40%',
+    stagger: 0.03
+  });
+  
+  const containerRef = ref<HTMLElement | null>(null);
+  let scrollTriggerInstance: ScrollTrigger | null = null;
+  
+  const splitText = computed(() => {
+    const text = typeof props.children === 'string' ? props.children : '';
+    return text.split("");
+  });
+  
+  const initializeAnimation = () => {
+    const el = containerRef.value;
+    if (!el) return;
+  
+    const scroller =
+      props.scrollContainerRef && props.scrollContainerRef.current
+        ? props.scrollContainerRef.current
+        : window;
+  
+    const charElements = el.querySelectorAll('.char');
+  
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill();
+    }
+  
+    const tl = gsap.fromTo(
+      charElements,
+      {
+        willChange: 'opacity, transform',
+        opacity: 0,
+        yPercent: 120,
+        scaleY: 2.3,
+        scaleX: 0.7,
+        transformOrigin: '50% 0%'
+      },
+      {
+        duration: props.animationDuration,
+        ease: props.ease,
+        opacity: 1,
+        yPercent: 0,
+        scaleY: 1,
+        scaleX: 1,
+        stagger: props.stagger,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: props.scrollStart,
+          end: props.scrollEnd,
+          scrub: true
+        }
+      }
+    );
+  
+    scrollTriggerInstance = tl.scrollTrigger || null;
+  };
+  
+  onMounted(() => {
+    initializeAnimation();
+  });
+  
+  onUnmounted(() => {
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill();
+    }
+  });
+  
+  watch(
+    [
+      () => props.children,
+      () => props.scrollContainerRef,
+      () => props.animationDuration,
+      () => props.ease,
+      () => props.scrollStart,
+      () => props.scrollEnd,
+      () => props.stagger
+    ],
+    () => {
+      initializeAnimation();
+    },
+    { deep: true }
+  );
+  </script>
+  
+  <style scoped>
+  .scroll-float {
+    overflow: hidden;
+  }
+  
+  .scroll-float-text {
+    display: inline-block;
+    font-size: clamp(1.6rem, 8vw, 10rem);
+    font-weight: 900;
+    text-align: center;
+    line-height: 1.5;
+  }
+  
+  .char {
+    display: inline-block;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
new file mode 100644
index 0000000..fc0eda0
--- /dev/null
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="profile-card-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div 
+          ref="containerRef"
+          class="demo-container"
+          @wheel="smoothScroll"
+        >
+       
+          <div class="scroll-instruction">
+            Scroll Down
+          </div>
+          
+          <div class="scroll-content">
+            <ScrollFloat
+              :children="scrollText"
+              :animation-duration="animationDuration"
+              :ease="ease"
+              :scroll-start="scrollStart"
+              :scroll-end="scrollEnd"
+              :stagger="stagger"
+              :container-class-name="containerClassName"
+              :text-class-name="textClassName"
+              :scroll-container-ref="{ current: containerRef }"
+              :key="rerenderKey"
+            />
+          </div>
+        </div>
+
+        <Customize>
+        
+            <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
+            <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+            
+
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="scrollFloatCode" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="scrollFloatCode.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { gsap } from 'gsap'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import { scrollFloatCode } from '@/constants/code/Components/scrollFloatCode'
+
+
+const containerRef = ref<HTMLElement | null>(null)
+const scrollText = ref("vuebits")
+const animationDuration = ref(1)
+const ease = ref('back.inOut(2)')
+const scrollStart = ref('center bottom+=50%')
+const scrollEnd = ref('bottom bottom-=40%')
+const stagger = ref(0.03)
+const containerClassName = ref("")
+const textClassName = ref("")
+const rerenderKey = ref(0)
+
+
+const smoothScroll = (e: WheelEvent) => {
+  e.preventDefault()
+  const container = containerRef.value
+  if (!container) return
+
+  const delta = e.deltaY || e.detail
+  const scrollAmount = delta * 2
+  
+  gsap.to(container, {
+    scrollTop: container.scrollTop + scrollAmount,
+    duration: 2,
+    ease: "power3.out",
+    overwrite: "auto"
+  })
+}
+
+
+onMounted(() => {
+  const container = containerRef.value
+  if (container) {
+    container.addEventListener('wheel', smoothScroll, { passive: false })
+  }
+})
+
+onUnmounted(() => {
+  const container = containerRef.value
+  if (container) {
+    container.removeEventListener('wheel', smoothScroll)
+  }
+})
+
+const propData = [
+  {
+    name: 'children',
+    type: 'string',
+    default: '""',
+    description: 'The text content to be animated character by character'
+  },
+  {
+    name: 'scrollContainerRef',
+    type: 'object',
+    default: 'undefined',
+    description: 'Ref to a custom scroll container (defaults to window)'
+  },
+  {
+    name: 'containerClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the container element'
+  },
+  {
+    name: 'textClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the text element'
+  },
+  {
+    name: 'animationDuration',
+    type: 'number',
+    default: '1',
+    description: 'Duration of the animation in seconds'
+  },
+  {
+    name: 'ease',
+    type: 'string',
+    default: '"back.inOut(2)"',
+    description: 'GSAP easing function for the animation'
+  },
+  {
+    name: 'scrollStart',
+    type: 'string',
+    default: '"center bottom+=50%"',
+    description: 'ScrollTrigger start position'
+  },
+  {
+    name: 'scrollEnd',
+    type: 'string',
+    default: '"bottom bottom-=40%"',
+    description: 'ScrollTrigger end position'
+  },
+  {
+    name: 'stagger',
+    type: 'number',
+    default: '0.03',
+    description: 'Delay between each character animation'
+  }
+]
+</script>
+<style scoped>
+.demo-container {
+  height: 60vh ;
+  overflow-y: auto;
+}
+
+.scroll-content {
+  padding-top: 150vh !important; 
+  padding-bottom: 50vh;
+}
+.scroll-instruction {
+  text-align: center;
+  color: #271E37;
+  font-size: clamp(4rem, 6vw, 4rem);
+  font-weight: 900;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+}
+.scroll-content{
+  color: aliceblue;
+}
+
+</style>
\ No newline at end of file

From 936bca258a64682dbce501ebde85d851edc816fe Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 11:26:58 +0600
Subject: [PATCH 6/7] Issue resolved

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 .../code/Components/scrollFloatCode.ts        |   2 +-
 .../ScrollFloat/ScrollFloat.vue               | 252 ++++++++----------
 src/demo/TextAnimations/ScrollFloatDemo.vue   |   2 -
 3 files changed, 118 insertions(+), 138 deletions(-)

diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/Components/scrollFloatCode.ts
index d4cd34b..f7bba6c 100644
--- a/src/constants/code/Components/scrollFloatCode.ts
+++ b/src/constants/code/Components/scrollFloatCode.ts
@@ -2,7 +2,7 @@ import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const scrollFloatCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
   usage: `<template>
   <ScrollFloat
     :children="scrollText"
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
index b12e5a4..6aad9af 100644
--- a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -1,141 +1,123 @@
 <template>
-    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
-      <span :class="`scroll-float-text ${textClassName}`">
-        <span
-          v-for="(char, index) in splitText"
-          :key="index"
-          class="char"
-        >
-          {{ char === " " ? "\u00A0" : char }}
-        </span>
+  <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
+    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
+      <span
+        v-for="(char, index) in splitText"
+        :key="index"
+        class="inline-block char"
+      >
+        {{ char === " " ? "\u00A0" : char }}
       </span>
-    </h2>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-  import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  
-  gsap.registerPlugin(ScrollTrigger);
-  
-  interface Props {
-    children: string;
-    scrollContainerRef?: { current: HTMLElement | null };
-    containerClassName?: string;
-    textClassName?: string;
-    animationDuration?: number;
-    ease?: string;
-    scrollStart?: string;
-    scrollEnd?: string;
-    stagger?: number;
+    </span>
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface Props {
+  children: string;
+  scrollContainerRef?: { current: HTMLElement | null };
+  containerClassName?: string;
+  textClassName?: string;
+  animationDuration?: number;
+  ease?: string;
+  scrollStart?: string;
+  scrollEnd?: string;
+  stagger?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  containerClassName: '',
+  textClassName: '',
+  animationDuration: 1,
+  ease: 'back.inOut(2)',
+  scrollStart: 'center bottom+=50%',
+  scrollEnd: 'bottom bottom-=40%',
+  stagger: 0.03
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+let scrollTriggerInstance: ScrollTrigger | null = null;
+
+const splitText = computed(() => {
+  const text = typeof props.children === 'string' ? props.children : '';
+  return text.split("");
+});
+
+const initializeAnimation = () => {
+  const el = containerRef.value;
+  if (!el) return;
+
+  const scroller =
+    props.scrollContainerRef && props.scrollContainerRef.current
+      ? props.scrollContainerRef.current
+      : window;
+
+  const charElements = el.querySelectorAll('.char');
+
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
   }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    containerClassName: '',
-    textClassName: '',
-    animationDuration: 1,
-    ease: 'back.inOut(2)',
-    scrollStart: 'center bottom+=50%',
-    scrollEnd: 'bottom bottom-=40%',
-    stagger: 0.03
-  });
-  
-  const containerRef = ref<HTMLElement | null>(null);
-  let scrollTriggerInstance: ScrollTrigger | null = null;
-  
-  const splitText = computed(() => {
-    const text = typeof props.children === 'string' ? props.children : '';
-    return text.split("");
-  });
-  
-  const initializeAnimation = () => {
-    const el = containerRef.value;
-    if (!el) return;
-  
-    const scroller =
-      props.scrollContainerRef && props.scrollContainerRef.current
-        ? props.scrollContainerRef.current
-        : window;
-  
-    const charElements = el.querySelectorAll('.char');
-  
-    if (scrollTriggerInstance) {
-      scrollTriggerInstance.kill();
-    }
-  
-    const tl = gsap.fromTo(
-      charElements,
-      {
-        willChange: 'opacity, transform',
-        opacity: 0,
-        yPercent: 120,
-        scaleY: 2.3,
-        scaleX: 0.7,
-        transformOrigin: '50% 0%'
-      },
-      {
-        duration: props.animationDuration,
-        ease: props.ease,
-        opacity: 1,
-        yPercent: 0,
-        scaleY: 1,
-        scaleX: 1,
-        stagger: props.stagger,
-        scrollTrigger: {
-          trigger: el,
-          scroller,
-          start: props.scrollStart,
-          end: props.scrollEnd,
-          scrub: true
-        }
-      }
-    );
-  
-    scrollTriggerInstance = tl.scrollTrigger || null;
-  };
-  
-  onMounted(() => {
-    initializeAnimation();
-  });
-  
-  onUnmounted(() => {
-    if (scrollTriggerInstance) {
-      scrollTriggerInstance.kill();
-    }
-  });
-  
-  watch(
-    [
-      () => props.children,
-      () => props.scrollContainerRef,
-      () => props.animationDuration,
-      () => props.ease,
-      () => props.scrollStart,
-      () => props.scrollEnd,
-      () => props.stagger
-    ],
-    () => {
-      initializeAnimation();
+
+  const tl = gsap.fromTo(
+    charElements,
+    {
+      willChange: 'opacity, transform',
+      opacity: 0,
+      yPercent: 120,
+      scaleY: 2.3,
+      scaleX: 0.7,
+      transformOrigin: '50% 0%'
     },
-    { deep: true }
+    {
+      duration: props.animationDuration,
+      ease: props.ease,
+      opacity: 1,
+      yPercent: 0,
+      scaleY: 1,
+      scaleX: 1,
+      stagger: props.stagger,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: props.scrollStart,
+        end: props.scrollEnd,
+        scrub: true
+      }
+    }
   );
-  </script>
-  
-  <style scoped>
-  .scroll-float {
-    overflow: hidden;
+
+  scrollTriggerInstance = tl.scrollTrigger || null;
+};
+
+onMounted(() => {
+  initializeAnimation();
+});
+
+onUnmounted(() => {
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
   }
-  
-  .scroll-float-text {
-    display: inline-block;
-    font-size: clamp(1.6rem, 8vw, 10rem);
-    font-weight: 900;
-    text-align: center;
-    line-height: 1.5;
-  }
-  
-  .char {
-    display: inline-block;
-  }
-  </style>
\ No newline at end of file
+});
+
+watch(
+  [
+    () => props.children,
+    () => props.scrollContainerRef,
+    () => props.animationDuration,
+    () => props.ease,
+    () => props.scrollStart,
+    () => props.scrollEnd,
+    () => props.stagger
+  ],
+  () => {
+    initializeAnimation();
+  },
+  { deep: true }
+);
+</script>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index fc0eda0..82cbb4f 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="profile-card-demo">
     <TabbedLayout>
       <template #preview>
         <div 
@@ -47,7 +46,6 @@
         <CliInstallation :command="scrollFloatCode.cli" />
       </template>
     </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">

From ecaa5369b5678c10dddf6f603574cfa8f9772566 Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 12:48:43 +0600
Subject: [PATCH 7/7] Fixed file location, scroll float should be under text
 animation

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 .../code/{Components => TextAnimations}/scrollFloatCode.ts      | 0
 src/demo/TextAnimations/ScrollFloatDemo.vue                     | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/constants/code/{Components => TextAnimations}/scrollFloatCode.ts (100%)

diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/TextAnimations/scrollFloatCode.ts
similarity index 100%
rename from src/constants/code/Components/scrollFloatCode.ts
rename to src/constants/code/TextAnimations/scrollFloatCode.ts
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index 82cbb4f..c751f47 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -58,7 +58,7 @@ import CodeExample from '../../components/code/CodeExample.vue'
 import Customize from '../../components/common/Customize.vue'
 import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
 import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import { scrollFloatCode } from '@/constants/code/Components/scrollFloatCode'
+import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
 
 
 const containerRef = ref<HTMLElement | null>(null)