{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "FaultyTerminal-JS-TW",
	"title": "FaultyTerminal",
	"description": "Terminal CRT scanline squares effect with flicker + noise.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "FaultyTerminal/FaultyTerminal.jsx",
			"content": "import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';\nimport { useEffect, useRef, useMemo, useCallback } from 'react';\n\nconst vertexShader = `\nattribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst fragmentShader = `\nprecision mediump float;\n\nvarying vec2 vUv;\n\nuniform float iTime;\nuniform vec3  iResolution;\nuniform float uScale;\n\nuniform vec2  uGridMul;\nuniform float uDigitSize;\nuniform float uScanlineIntensity;\nuniform float uGlitchAmount;\nuniform float uFlickerAmount;\nuniform float uNoiseAmp;\nuniform float uChromaticAberration;\nuniform float uDither;\nuniform float uCurvature;\nuniform vec3  uTint;\nuniform vec2  uMouse;\nuniform float uMouseStrength;\nuniform float uUseMouse;\nuniform float uPageLoadProgress;\nuniform float uUsePageLoadAnimation;\nuniform float uBrightness;\nuniform float uLightMode;\n\nfloat time;\n\nfloat hash21(vec2 p){\n  p = fract(p * 234.56);\n  p += dot(p, p + 34.56);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p)\n{\n  return sin(p.x * 10.0) * sin(p.y * (3.0 + sin(time * 0.090909))) + 0.2; \n}\n\nmat2 rotate(float angle)\n{\n  float c = cos(angle);\n  float s = sin(angle);\n  return mat2(c, -s, s, c);\n}\n\nfloat fbm(vec2 p)\n{\n  p *= 1.1;\n  float f = 0.0;\n  float amp = 0.5 * uNoiseAmp;\n  \n  mat2 modify0 = rotate(time * 0.02);\n  f += amp * noise(p);\n  p = modify0 * p * 2.0;\n  amp *= 0.454545;\n  \n  mat2 modify1 = rotate(time * 0.02);\n  f += amp * noise(p);\n  p = modify1 * p * 2.0;\n  amp *= 0.454545;\n  \n  mat2 modify2 = rotate(time * 0.08);\n  f += amp * noise(p);\n  \n  return f;\n}\n\nfloat pattern(vec2 p, out vec2 q, out vec2 r) {\n  vec2 offset1 = vec2(1.0);\n  vec2 offset0 = vec2(0.0);\n  mat2 rot01 = rotate(0.1 * time);\n  mat2 rot1 = rotate(0.1);\n  \n  q = vec2(fbm(p + offset1), fbm(rot01 * p + offset1));\n  r = vec2(fbm(rot1 * q + offset0), fbm(q + offset0));\n  return fbm(p + r);\n}\n\nfloat digit(vec2 p){\n    vec2 grid = uGridMul * 15.0;\n    vec2 s = floor(p * grid) / grid;\n    p = p * grid;\n    vec2 q, r;\n    float intensity = pattern(s * 0.1, q, r) * 1.3 - 0.03;\n    \n    if(uUseMouse > 0.5){\n        vec2 mouseWorld = uMouse * uScale;\n        float distToMouse = distance(s, mouseWorld);\n        float mouseInfluence = exp(-distToMouse * 8.0) * uMouseStrength * 10.0;\n        intensity += mouseInfluence;\n        \n        float ripple = sin(distToMouse * 20.0 - iTime * 5.0) * 0.1 * mouseInfluence;\n        intensity += ripple;\n    }\n    \n    if(uUsePageLoadAnimation > 0.5){\n        float cellRandom = fract(sin(dot(s, vec2(12.9898, 78.233))) * 43758.5453);\n        float cellDelay = cellRandom * 0.8;\n        float cellProgress = clamp((uPageLoadProgress - cellDelay) / 0.2, 0.0, 1.0);\n        \n        float fadeAlpha = smoothstep(0.0, 1.0, cellProgress);\n        intensity *= fadeAlpha;\n    }\n    \n    p = fract(p);\n    p *= uDigitSize;\n    \n    float px5 = p.x * 5.0;\n    float py5 = (1.0 - p.y) * 5.0;\n    float x = fract(px5);\n    float y = fract(py5);\n    \n    float i = floor(py5) - 2.0;\n    float j = floor(px5) - 2.0;\n    float n = i * i + j * j;\n    float f = n * 0.0625;\n    \n    float isOn = step(0.1, intensity - f);\n    float brightness = isOn * (0.2 + y * 0.8) * (0.75 + x * 0.25);\n    \n    return step(0.0, p.x) * step(p.x, 1.0) * step(0.0, p.y) * step(p.y, 1.0) * brightness;\n}\n\nfloat onOff(float a, float b, float c)\n{\n  return step(c, sin(iTime + a * cos(iTime * b))) * uFlickerAmount;\n}\n\nfloat displace(vec2 look)\n{\n    float y = look.y - mod(iTime * 0.25, 1.0);\n    float window = 1.0 / (1.0 + 50.0 * y * y);\n    return sin(look.y * 20.0 + iTime) * 0.0125 * onOff(4.0, 2.0, 0.8) * (1.0 + cos(iTime * 60.0)) * window;\n}\n\nvec3 getColor(vec2 p){\n    \n    float bar = step(mod(p.y + time * 20.0, 1.0), 0.2) * 0.4 + 1.0;\n    bar *= uScanlineIntensity;\n    \n    float displacement = displace(p);\n    p.x += displacement;\n\n    if (uGlitchAmount != 1.0) {\n      float extra = displacement * (uGlitchAmount - 1.0);\n      p.x += extra;\n    }\n\n    float middle = digit(p);\n    \n    const float off = 0.002;\n    float sum = digit(p + vec2(-off, -off)) + digit(p + vec2(0.0, -off)) + digit(p + vec2(off, -off)) +\n                digit(p + vec2(-off, 0.0)) + digit(p + vec2(0.0, 0.0)) + digit(p + vec2(off, 0.0)) +\n                digit(p + vec2(-off, off)) + digit(p + vec2(0.0, off)) + digit(p + vec2(off, off));\n    \n    vec3 baseColor = vec3(0.9) * middle + sum * 0.1 * vec3(1.0) * bar;\n    return baseColor;\n}\n\nvec2 barrel(vec2 uv){\n  vec2 c = uv * 2.0 - 1.0;\n  float r2 = dot(c, c);\n  c *= 1.0 + uCurvature * r2;\n  return c * 0.5 + 0.5;\n}\n\nvoid main() {\n    time = iTime * 0.333333;\n    vec2 uv = vUv;\n\n    if(uCurvature != 0.0){\n      uv = barrel(uv);\n    }\n    \n    vec2 p = uv * uScale;\n    vec3 col = getColor(p);\n\n    if(uChromaticAberration != 0.0){\n      vec2 ca = vec2(uChromaticAberration) / iResolution.xy;\n      col.r = getColor(p + ca).r;\n      col.b = getColor(p - ca).b;\n    }\n\n    col *= uTint;\n    col *= uBrightness;\n\n    if(uDither > 0.0){\n      float rnd = hash21(gl_FragCoord.xy);\n      col += (rnd - 0.5) * (uDither * 0.003922);\n    }\n\n    if (uLightMode > 0.5) {\n      float energy = max(max(col.r, col.g), col.b);\n      float coverage = clamp(smoothstep(0.0, 0.72, energy) * 0.9, 0.0, 0.9);\n      vec3 ink = clamp(col * 0.42, 0.0, 0.76);\n      col = mix(vec3(1.0), ink, coverage);\n    }\n\n    gl_FragColor = vec4(col, 1.0);\n}\n`;\n\nfunction hexToRgb(hex) {\n  let h = hex.replace('#', '').trim();\n  if (h.length === 3)\n    h = h\n      .split('')\n      .map(c => c + c)\n      .join('');\n  const num = parseInt(h.slice(0, 6), 16);\n  return [((num >> 16) & 255) / 255, ((num >> 8) & 255) / 255, (num & 255) / 255];\n}\n\nexport default function FaultyTerminal({\n  scale = 1,\n  gridMul = [2, 1],\n  digitSize = 1.5,\n  timeScale = 0.3,\n  pause = false,\n  scanlineIntensity = 0.3,\n  glitchAmount = 1,\n  flickerAmount = 1,\n  noiseAmp = 1,\n  chromaticAberration = 0,\n  dither = 0,\n  curvature = 0.2,\n  tint = '#ffffff',\n  mouseReact = true,\n  mouseStrength = 0.2,\n  dpr = Math.min(window.devicePixelRatio || 1, 2),\n  pageLoadAnimation = true,\n  brightness = 1,\n  lightMode = false,\n  className,\n  style,\n  ...rest\n}) {\n  const containerRef = useRef(null);\n  const programRef = useRef(null);\n  const rendererRef = useRef(null);\n  const mouseRef = useRef({ x: 0.5, y: 0.5 });\n  const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });\n  const frozenTimeRef = useRef(0);\n  const rafRef = useRef(0);\n  const loadAnimationStartRef = useRef(0);\n  const timeOffsetRef = useRef(Math.random() * 100);\n\n  const tintVec = useMemo(() => hexToRgb(tint), [tint]);\n\n  const ditherValue = useMemo(() => (typeof dither === 'boolean' ? (dither ? 1 : 0) : dither), [dither]);\n\n  const handleMouseMove = useCallback(e => {\n    const ctn = containerRef.current;\n    if (!ctn) return;\n    const rect = ctn.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = 1 - (e.clientY - rect.top) / rect.height;\n    mouseRef.current = { x, y };\n  }, []);\n\n  useEffect(() => {\n    const ctn = containerRef.current;\n    if (!ctn) return;\n\n    const renderer = new Renderer({ dpr });\n    rendererRef.current = renderer;\n    const gl = renderer.gl;\n    gl.clearColor(lightMode ? 1 : 0, lightMode ? 1 : 0, lightMode ? 1 : 0, 1);\n\n    const geometry = new Triangle(gl);\n\n    const program = new Program(gl, {\n      vertex: vertexShader,\n      fragment: fragmentShader,\n      uniforms: {\n        iTime: { value: 0 },\n        iResolution: {\n          value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)\n        },\n        uScale: { value: scale },\n\n        uGridMul: { value: new Float32Array(gridMul) },\n        uDigitSize: { value: digitSize },\n        uScanlineIntensity: { value: scanlineIntensity },\n        uGlitchAmount: { value: glitchAmount },\n        uFlickerAmount: { value: flickerAmount },\n        uNoiseAmp: { value: noiseAmp },\n        uChromaticAberration: { value: chromaticAberration },\n        uDither: { value: ditherValue },\n        uCurvature: { value: curvature },\n        uTint: { value: new Color(tintVec[0], tintVec[1], tintVec[2]) },\n        uMouse: {\n          value: new Float32Array([smoothMouseRef.current.x, smoothMouseRef.current.y])\n        },\n        uMouseStrength: { value: mouseStrength },\n        uUseMouse: { value: mouseReact ? 1 : 0 },\n        uPageLoadProgress: { value: pageLoadAnimation ? 0 : 1 },\n        uUsePageLoadAnimation: { value: pageLoadAnimation ? 1 : 0 },\n        uBrightness: { value: brightness },\n        uLightMode: { value: lightMode ? 1 : 0 }\n      }\n    });\n    programRef.current = program;\n\n    const mesh = new Mesh(gl, { geometry, program });\n\n    function resize() {\n      if (!ctn || !renderer) return;\n      renderer.setSize(ctn.offsetWidth, ctn.offsetHeight);\n      program.uniforms.iResolution.value = new Color(\n        gl.canvas.width,\n        gl.canvas.height,\n        gl.canvas.width / gl.canvas.height\n      );\n    }\n\n    const resizeObserver = new ResizeObserver(() => resize());\n    resizeObserver.observe(ctn);\n    resize();\n\n    const update = t => {\n      rafRef.current = requestAnimationFrame(update);\n\n      if (pageLoadAnimation && loadAnimationStartRef.current === 0) {\n        loadAnimationStartRef.current = t;\n      }\n\n      if (!pause) {\n        const elapsed = (t * 0.001 + timeOffsetRef.current) * timeScale;\n        program.uniforms.iTime.value = elapsed;\n        frozenTimeRef.current = elapsed;\n      } else {\n        program.uniforms.iTime.value = frozenTimeRef.current;\n      }\n\n      if (pageLoadAnimation && loadAnimationStartRef.current > 0) {\n        const animationDuration = 2000;\n        const animationElapsed = t - loadAnimationStartRef.current;\n        const progress = Math.min(animationElapsed / animationDuration, 1);\n        program.uniforms.uPageLoadProgress.value = progress;\n      }\n\n      if (mouseReact) {\n        const dampingFactor = 0.08;\n        const smoothMouse = smoothMouseRef.current;\n        const mouse = mouseRef.current;\n        smoothMouse.x += (mouse.x - smoothMouse.x) * dampingFactor;\n        smoothMouse.y += (mouse.y - smoothMouse.y) * dampingFactor;\n\n        const mouseUniform = program.uniforms.uMouse.value;\n        mouseUniform[0] = smoothMouse.x;\n        mouseUniform[1] = smoothMouse.y;\n      }\n\n      renderer.render({ scene: mesh });\n    };\n    rafRef.current = requestAnimationFrame(update);\n    ctn.appendChild(gl.canvas);\n\n    if (mouseReact) ctn.addEventListener('mousemove', handleMouseMove);\n\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n      resizeObserver.disconnect();\n      if (mouseReact) ctn.removeEventListener('mousemove', handleMouseMove);\n      if (gl.canvas.parentElement === ctn) ctn.removeChild(gl.canvas);\n      gl.getExtension('WEBGL_lose_context')?.loseContext();\n      loadAnimationStartRef.current = 0;\n      timeOffsetRef.current = Math.random() * 100;\n    };\n  }, [\n    dpr,\n    pause,\n    timeScale,\n    scale,\n    gridMul,\n    digitSize,\n    scanlineIntensity,\n    glitchAmount,\n    flickerAmount,\n    noiseAmp,\n    chromaticAberration,\n    ditherValue,\n    curvature,\n    tintVec,\n    mouseReact,\n    mouseStrength,\n    pageLoadAnimation,\n    brightness,\n    lightMode,\n    handleMouseMove\n  ]);\n\n  return (\n    <div ref={containerRef} className={`w-full h-full relative overflow-hidden ${className}`} style={style} {...rest} />\n  );\n}\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"ogl@^1.0.11"
	]
}