From 7df5128cc32d2e14c14b6083e90a221772b974f6 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Sat, 12 Jul 2025 18:39:32 +0200
Subject: [PATCH] Add AsciiText component

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/TextAnimations/asciiTextCode.ts      |  23 +
 .../TextAnimations/AsciiText/AsciiText.vue    | 623 ++++++++++++++++++
 src/demo/TextAnimations/AsciiTextDemo.vue     | 180 +++++
 5 files changed, 828 insertions(+)
 create mode 100644 src/constants/code/TextAnimations/asciiTextCode.ts
 create mode 100644 src/content/TextAnimations/AsciiText/AsciiText.vue
 create mode 100644 src/demo/TextAnimations/AsciiTextDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 9234c53..bc9d20d 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'Ascii Text',
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index d1c9376..68dd023 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"),
+  'ascii-text': () => import("../demo/TextAnimations/AsciiTextDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/TextAnimations/asciiTextCode.ts b/src/constants/code/TextAnimations/asciiTextCode.ts
new file mode 100644
index 0000000..b9a1a54
--- /dev/null
+++ b/src/constants/code/TextAnimations/asciiTextCode.ts
@@ -0,0 +1,23 @@
+import code from '@/content/TextAnimations/AsciiText/AsciiText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const asciiText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/AsciiText`,
+  installation: `npm install three @types/three`,
+  usage: `<template>
+  <AsciiText
+    text="Hey!"
+    :ascii-font-size="8"
+    :text-font-size="200"
+    text-color="#fdf9f3"
+    :plane-base-height="8"
+    :enable-waves="true"
+    class-name="w-full h-full"
+  />
+</template>
+
+<script setup lang="ts">
+  import AsciiText from "./AsciiText.vue";
+</script>`,
+  code
+}
diff --git a/src/content/TextAnimations/AsciiText/AsciiText.vue b/src/content/TextAnimations/AsciiText/AsciiText.vue
new file mode 100644
index 0000000..1e254a1
--- /dev/null
+++ b/src/content/TextAnimations/AsciiText/AsciiText.vue
@@ -0,0 +1,623 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as THREE from 'three'
+
+interface AsciiTextProps {
+  text?: string
+  asciiFontSize?: number
+  textFontSize?: number
+  textColor?: string
+  planeBaseHeight?: number
+  enableWaves?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<AsciiTextProps>(), {
+  text: 'David!',
+  asciiFontSize: 8,
+  textFontSize: 200,
+  textColor: '#fdf9f3',
+  planeBaseHeight: 8,
+  enableWaves: true,
+  className: ''
+})
+
+const vertexShader = `
+varying vec2 vUv;
+uniform float uTime;
+uniform float mouse;
+uniform float uEnableWaves;
+
+void main() {
+    vUv = uv;
+    float time = uTime * 5.;
+
+    float waveFactor = uEnableWaves;
+
+    vec3 transformed = position;
+
+    transformed.x += sin(time + position.y) * 0.5 * waveFactor;
+    transformed.y += cos(time + position.z) * 0.15 * waveFactor;
+    transformed.z += sin(time + position.x) * waveFactor;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);
+}
+`
+
+const fragmentShader = `
+varying vec2 vUv;
+uniform float mouse;
+uniform float uTime;
+uniform sampler2D uTexture;
+
+void main() {
+    float time = uTime;
+    vec2 pos = vUv;
+    
+    float move = sin(time + mouse) * 0.01;
+    float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;
+    float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;
+    float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;
+    float a = texture2D(uTexture, pos).a;
+    gl_FragColor = vec4(r, g, b, a);
+}
+`
+
+// @ts-expect-error - Adding map function to Math object
+Math.map = function (n: number, start: number, stop: number, start2: number, stop2: number) {
+  return ((n - start) / (stop - start)) * (stop2 - start2) + start2
+}
+
+const PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1
+
+interface AsciiFilterOptions {
+  fontSize?: number
+  fontFamily?: string
+  charset?: string
+  invert?: boolean
+}
+
+interface CanvasTxtOptions {
+  fontSize?: number
+  fontFamily?: string
+  color?: string
+}
+
+class AsciiFilter {
+  renderer: THREE.WebGLRenderer
+  domElement: HTMLDivElement
+  pre: HTMLPreElement
+  canvas: HTMLCanvasElement
+  context: CanvasRenderingContext2D | null
+  deg: number
+  invert: boolean
+  fontSize: number
+  fontFamily: string
+  charset: string
+  width: number = 0
+  height: number = 0
+  center: { x: number; y: number } = { x: 0, y: 0 }
+  mouse: { x: number; y: number } = { x: 0, y: 0 }
+  cols: number = 0
+  rows: number = 0
+
+  constructor(
+    renderer: THREE.WebGLRenderer,
+    { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {}
+  ) {
+    this.renderer = renderer
+    this.domElement = document.createElement('div')
+    this.domElement.style.position = 'absolute'
+    this.domElement.style.top = '0'
+    this.domElement.style.left = '0'
+    this.domElement.style.width = '100%'
+    this.domElement.style.height = '100%'
+
+    this.pre = document.createElement('pre')
+    this.domElement.appendChild(this.pre)
+
+    this.canvas = document.createElement('canvas')
+    this.context = this.canvas.getContext('2d')
+    this.domElement.appendChild(this.canvas)
+
+    this.deg = 0
+    this.invert = invert ?? true
+    this.fontSize = fontSize ?? 12
+    this.fontFamily = fontFamily ?? "'Courier New', monospace"
+    this.charset =
+      charset ??
+      " .'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$"
+
+    if (this.context) {
+      this.context.imageSmoothingEnabled = false
+    }
+
+    this.onMouseMove = this.onMouseMove.bind(this)
+    document.addEventListener('mousemove', this.onMouseMove)
+  }
+
+  setSize(width: number, height: number) {
+    this.width = width
+    this.height = height
+    this.renderer.setSize(width, height)
+    this.reset()
+
+    this.center = { x: width / 2, y: height / 2 }
+    this.mouse = { x: this.center.x, y: this.center.y }
+  }
+
+  reset() {
+    this.context!.font = `${this.fontSize}px ${this.fontFamily}`
+    const charWidth = this.context!.measureText('A').width
+
+    this.cols = Math.floor(
+      this.width / (this.fontSize * (charWidth / this.fontSize))
+    )
+    this.rows = Math.floor(this.height / this.fontSize)
+
+    this.canvas.width = this.cols
+    this.canvas.height = this.rows
+    this.pre.style.fontFamily = this.fontFamily
+    this.pre.style.fontSize = `${this.fontSize}px`
+    this.pre.style.margin = '0'
+    this.pre.style.padding = '0'
+    this.pre.style.lineHeight = '1em'
+    this.pre.style.position = 'absolute'
+    this.pre.style.left = '0'
+    this.pre.style.top = '0'
+    this.pre.style.zIndex = '9'
+    this.pre.style.backgroundImage = 'radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%)'
+    this.pre.style.backgroundAttachment = 'fixed'
+    this.pre.style.webkitTextFillColor = 'transparent'
+    this.pre.style.webkitBackgroundClip = 'text'
+    this.pre.style.backgroundClip = 'text'
+    this.pre.style.mixBlendMode = 'difference'
+  }
+
+  onMouseMove(e: MouseEvent) {
+    this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO }
+  }
+
+  render(scene: THREE.Scene, camera: THREE.Camera) {
+    this.renderer.render(scene, camera)
+
+    const w = this.canvas.width
+    const h = this.canvas.height
+    this.context!.clearRect(0, 0, w, h)
+    if (this.context && w && h) {
+      this.context.drawImage(this.renderer.domElement, 0, 0, w, h)
+    }
+
+    this.asciify(this.context!, w, h)
+    this.hue()
+  }
+
+  asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {
+    if (w && h) {
+      const imgData = ctx.getImageData(0, 0, w, h).data
+      let str = ''
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const i = x * 4 + y * 4 * w
+          const [r, g, b, a] = [
+            imgData[i],
+            imgData[i + 1],
+            imgData[i + 2],
+            imgData[i + 3]
+          ]
+
+          if (a === 0) {
+            str += ' '
+            continue
+          }
+
+          const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255
+          let idx = Math.floor((1 - gray) * (this.charset.length - 1))
+          if (this.invert) idx = this.charset.length - idx - 1
+          str += this.charset[idx]
+        }
+        str += '\n'
+      }
+      this.pre.innerHTML = str
+    }
+  }
+
+  get dx() {
+    return this.mouse.x - this.center.x
+  }
+
+  get dy() {
+    return this.mouse.y - this.center.y
+  }
+
+  hue() {
+    const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI
+    this.deg += (deg - this.deg) * 0.075
+    this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`
+  }
+
+  dispose() {
+    document.removeEventListener('mousemove', this.onMouseMove)
+  }
+}
+
+class CanvasTxt {
+  canvas: HTMLCanvasElement
+  context: CanvasRenderingContext2D | null
+  txt: string
+  fontSize: number
+  fontFamily: string
+  color: string
+  font: string
+
+  constructor(
+    txt: string,
+    { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' }: CanvasTxtOptions = {}
+  ) {
+    this.canvas = document.createElement('canvas')
+    this.context = this.canvas.getContext('2d')
+    this.txt = txt
+    this.fontSize = fontSize
+    this.fontFamily = fontFamily
+    this.color = color
+    this.font = `600 ${this.fontSize}px ${this.fontFamily}`
+  }
+
+  resize() {
+    if (this.context) {
+      this.context.font = this.font
+      const metrics = this.context.measureText(this.txt)
+
+      const textWidth = Math.ceil(metrics.width) + 20
+      const textHeight =
+        Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20
+
+      this.canvas.width = textWidth
+      this.canvas.height = textHeight
+    }
+  }
+
+  render() {
+    if (this.context) {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.context.fillStyle = this.color
+      this.context.font = this.font
+
+      const metrics = this.context.measureText(this.txt)
+      const yPos = 10 + metrics.actualBoundingBoxAscent
+
+      this.context.fillText(this.txt, 10, yPos)
+    }
+  }
+
+  get width() {
+    return this.canvas.width
+  }
+
+  get height() {
+    return this.canvas.height
+  }
+
+  get texture() {
+    return this.canvas
+  }
+}
+
+class CanvAscii {
+  textString: string
+  asciiFontSize: number
+  textFontSize: number
+  textColor!: string
+  planeBaseHeight!: number
+  container!: HTMLElement
+  width!: number
+  height!: number
+  enableWaves!: boolean
+  camera!: THREE.PerspectiveCamera
+  scene!: THREE.Scene
+  mouse: { x: number; y: number } = { x: 0, y: 0 }
+  textCanvas!: CanvasTxt
+  texture!: THREE.CanvasTexture
+  geometry!: THREE.PlaneGeometry
+  material!: THREE.ShaderMaterial
+  mesh!: THREE.Mesh
+  renderer!: THREE.WebGLRenderer
+  filter!: AsciiFilter
+  center: { x: number; y: number } = { x: 0, y: 0 }
+  animationFrameId: number = 0
+
+  constructor(
+    { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves }: {
+      text: string
+      asciiFontSize: number
+      textFontSize: number
+      textColor: string
+      planeBaseHeight: number
+      enableWaves: boolean
+    },
+    containerElem: HTMLElement,
+    width: number,
+    height: number
+  ) {
+    this.textString = text
+    this.asciiFontSize = asciiFontSize
+    this.textFontSize = textFontSize
+    this.textColor = textColor
+    this.planeBaseHeight = planeBaseHeight
+    this.container = containerElem
+    this.width = width
+    this.height = height
+    this.enableWaves = enableWaves
+
+    this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000)
+    this.camera.position.z = 30
+
+    this.scene = new THREE.Scene()
+
+    this.onMouseMove = this.onMouseMove.bind(this)
+    this.setMesh()
+    this.setRenderer()
+  }
+
+  setMesh() {
+    this.textCanvas = new CanvasTxt(this.textString, {
+      fontSize: this.textFontSize,
+      fontFamily: 'IBM Plex Mono',
+      color: this.textColor
+    })
+    this.textCanvas.resize()
+    this.textCanvas.render()
+
+    this.texture = new THREE.CanvasTexture(this.textCanvas.texture)
+    this.texture.minFilter = THREE.NearestFilter
+
+    const textAspect = this.textCanvas.width / this.textCanvas.height
+    const baseH = this.planeBaseHeight
+    const planeW = baseH * textAspect
+    const planeH = baseH
+
+    this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36)
+    this.material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      uniforms: {
+        uTime: { value: 0 },
+        mouse: { value: 1.0 },
+        uTexture: { value: this.texture },
+        uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }
+      }
+    })
+
+    this.mesh = new THREE.Mesh(this.geometry, this.material)
+    this.scene.add(this.mesh)
+  }
+
+  setRenderer() {
+    this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true })
+    this.renderer.setPixelRatio(1)
+    this.renderer.setClearColor(0x000000, 0)
+
+    this.filter = new AsciiFilter(this.renderer, {
+      fontFamily: 'IBM Plex Mono',
+      fontSize: this.asciiFontSize,
+      invert: true
+    })
+
+    this.container.appendChild(this.filter.domElement)
+    this.setSize(this.width, this.height)
+
+    this.container.addEventListener('mousemove', this.onMouseMove)
+    this.container.addEventListener('touchmove', this.onMouseMove)
+  }
+
+  setSize(w: number, h: number) {
+    this.width = w
+    this.height = h
+
+    this.camera.aspect = w / h
+    this.camera.updateProjectionMatrix()
+
+    this.filter.setSize(w, h)
+    this.center = { x: w / 2, y: h / 2 }
+  }
+
+  load() {
+    this.animate()
+  }
+
+  onMouseMove(evt: MouseEvent | TouchEvent) {
+    const e = 'touches' in evt ? evt.touches[0] : evt
+    const bounds = this.container.getBoundingClientRect()
+    const x = e.clientX - bounds.left
+    const y = e.clientY - bounds.top
+    this.mouse = { x, y }
+  }
+
+  animate() {
+    const animateFrame = () => {
+      this.animationFrameId = requestAnimationFrame(animateFrame)
+      this.render()
+    }
+    animateFrame()
+  }
+
+  render() {
+    const time = new Date().getTime() * 0.001
+
+    this.textCanvas.render()
+    this.texture.needsUpdate = true
+
+    ;(this.mesh.material as THREE.ShaderMaterial).uniforms.uTime.value = Math.sin(time)
+
+    this.updateRotation()
+    this.filter.render(this.scene, this.camera)
+  }
+
+  updateRotation() {
+    // @ts-expect-error - Using custom Math.map function
+    const x = Math.map(this.mouse.y, 0, this.height, 0.5, -0.5)
+    // @ts-expect-error - Using custom Math.map function
+    const y = Math.map(this.mouse.x, 0, this.width, -0.5, 0.5)
+
+    this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05
+    this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05
+  }
+
+  clear() {
+    this.scene.traverse((obj) => {
+      if (obj instanceof THREE.Mesh && obj.material && obj.geometry) {
+        if (Array.isArray(obj.material)) {
+          obj.material.forEach((mat) => mat.dispose())
+        } else {
+          obj.material.dispose()
+        }
+        obj.geometry.dispose()
+      }
+    })
+    this.scene.clear()
+  }
+
+  dispose() {
+    cancelAnimationFrame(this.animationFrameId)
+    this.filter.dispose()
+    this.container.removeChild(this.filter.domElement)
+    this.container.removeEventListener('mousemove', this.onMouseMove)
+    this.container.removeEventListener('touchmove', this.onMouseMove)
+    this.clear()
+    this.renderer.dispose()
+  }
+}
+
+const containerRef = ref<HTMLDivElement | null>(null)
+let asciiRef: CanvAscii | null = null
+
+const initializeAscii = () => {
+  if (!containerRef.value) return
+
+  const { width, height } = containerRef.value.getBoundingClientRect()
+
+  if (width === 0 || height === 0) {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {
+          const { width: w, height: h } = entry.boundingClientRect
+
+          asciiRef = new CanvAscii(
+            {
+              text: props.text,
+              asciiFontSize: props.asciiFontSize,
+              textFontSize: props.textFontSize,
+              textColor: props.textColor,
+              planeBaseHeight: props.planeBaseHeight,
+              enableWaves: props.enableWaves
+            },
+            containerRef.value!,
+            w,
+            h
+          )
+          asciiRef.load()
+
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    observer.observe(containerRef.value)
+    return
+  }
+
+  asciiRef = new CanvAscii(
+    {
+      text: props.text,
+      asciiFontSize: props.asciiFontSize,
+      textFontSize: props.textFontSize,
+      textColor: props.textColor,
+      planeBaseHeight: props.planeBaseHeight,
+      enableWaves: props.enableWaves
+    },
+    containerRef.value,
+    width,
+    height
+  )
+  asciiRef.load()
+
+  const ro = new ResizeObserver((entries) => {
+    if (!entries[0] || !asciiRef) return
+    const { width: w, height: h } = entries[0].contentRect
+    if (w > 0 && h > 0) {
+      asciiRef.setSize(w, h)
+    }
+  })
+  ro.observe(containerRef.value)
+}
+
+onMounted(() => {
+  initializeAscii()
+})
+
+onUnmounted(() => {
+  if (asciiRef) {
+    asciiRef.dispose()
+  }
+})
+
+watch(
+  () => [props.text, props.asciiFontSize, props.textFontSize, props.textColor, props.planeBaseHeight, props.enableWaves],
+  () => {
+    if (asciiRef) {
+      asciiRef.dispose()
+    }
+    initializeAscii()
+  }
+)
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :class="[
+      'ascii-text-container',
+      className
+    ]"
+    class="absolute inset-0 w-full h-full"
+  />
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');
+
+.ascii-text-container :deep(canvas) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  image-rendering: optimizeSpeed;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -o-crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: optimize-contrast;
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+}
+
+.ascii-text-container :deep(pre) {
+  margin: 0;
+  user-select: none;
+  padding: 0;
+  line-height: 1em;
+  text-align: left;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);
+  background-attachment: fixed;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  z-index: 9;
+  mix-blend-mode: difference;
+}
+</style>
diff --git a/src/demo/TextAnimations/AsciiTextDemo.vue b/src/demo/TextAnimations/AsciiTextDemo.vue
new file mode 100644
index 0000000..8b9155d
--- /dev/null
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="ascii-text-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container relative min-h-[400px] max-h-[400px] overflow-hidden">
+          <RefreshButton @refresh="forceRerender" />
+
+          <AsciiText
+            :key="rerenderKey"
+            :text="text"
+            :ascii-font-size="asciiFontSize"
+            :text-font-size="textFontSize"
+            :text-color="textColor"
+            :plane-base-height="planeBaseHeight"
+            :enable-waves="enableWaves"
+            class-name="w-full h-full"
+          />
+        </div>
+
+        <Customize>
+          <div class="flex flex-col gap-2">
+            <label class="text-sm font-medium text-gray-300">Text</label>
+            <input
+              v-model="text"
+              type="text"
+              placeholder="Enter text..."
+              maxlength="10"
+              class="px-3 py-2 bg-[#0b0b0b] border border-[#1e3721] rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#1e3721] focus:border-transparent"
+              @input="forceRerender"
+            />
+          </div>
+
+          <PreviewSlider
+            title="ASCII Font Size"
+            v-model="asciiFontSize"
+            :min="2"
+            :max="20"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Text Font Size"
+            v-model="textFontSize"
+            :min="100"
+            :max="400"
+            :step="25"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Base Height"
+            v-model="planeBaseHeight"
+            :min="4"
+            :max="16"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSwitch
+            title="Enable Waves"
+            v-model="enableWaves"
+            @update:model-value="forceRerender"
+          />
+
+          <div class="flex gap-4 flex-wrap">
+            <button
+              v-for="color in colorOptions"
+              :key="color.name"
+              class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
+              :class="{ 'bg-[#1e3721]': textColor === color.value }"
+              @click="changeColor(color.value)"
+            >
+              {{ color.name }}
+            </button>
+          </div>
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['three', '@types/three']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="asciiText" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="asciiText.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '@/components/common/TabbedLayout.vue'
+import RefreshButton from '@/components/common/RefreshButton.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 PreviewSlider from '@/components/common/PreviewSlider.vue'
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
+import AsciiText from '@/content/TextAnimations/AsciiText/AsciiText.vue'
+import { asciiText } from '@/constants/code/TextAnimations/asciiTextCode'
+import { useForceRerender } from '@/composables/useForceRerender'
+
+const text = ref('Hey!')
+const asciiFontSize = ref(8)
+const textFontSize = ref(200)
+const textColor = ref('#fdf9f3')
+const planeBaseHeight = ref(8)
+const enableWaves = ref(true)
+
+const { rerenderKey, forceRerender } = useForceRerender()
+
+// Color options for easy selection
+const colorOptions = [
+  { name: 'Cream', value: '#fdf9f3' },
+  { name: 'White', value: '#ffffff' },
+  { name: 'Red', value: '#ff6b6b' },
+  { name: 'Blue', value: '#4ecdc4' },
+  { name: 'Green', value: '#45b7d1' },
+  { name: 'Purple', value: '#9b59b6' },
+  { name: 'Orange', value: '#f39c12' },
+  { name: 'Pink', value: '#e91e63' }
+]
+
+const changeColor = (color: string) => {
+  textColor.value = color
+  forceRerender()
+}
+
+// Component properties documentation
+const propData = [
+  {
+    name: 'text',
+    type: 'string',
+    default: '"David!"',
+    description: 'The text content to display as ASCII art.'
+  },
+  {
+    name: 'asciiFontSize',
+    type: 'number',
+    default: '8',
+    description: 'Font size for the ASCII characters (in pixels).'
+  },
+  {
+    name: 'textFontSize',
+    type: 'number',
+    default: '200',
+    description: 'Font size for the original text before ASCII conversion.'
+  },
+  {
+    name: 'textColor',
+    type: 'string',
+    default: '"#fdf9f3"',
+    description: 'Color of the text used in the ASCII conversion.'
+  },
+  {
+    name: 'planeBaseHeight',
+    type: 'number',
+    default: '8',
+    description: 'Base height of the 3D plane geometry for the text.'
+  },
+  {
+    name: 'enableWaves',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether to enable wave animation effects on the text.'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes to apply to the component.'
+  }
+]
+</script>