mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"name":"FaultyTerminal","title":"FaultyTerminal","description":"Terminal CRT scanline squares effect with flicker + noise.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { Color, Mesh, Program, Renderer, Triangle } from 'ogl';\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';\n\ntype Vec2 = [number, number];\n\ninterface FaultyTerminalProps {\n scale?: number;\n gridMul?: Vec2;\n digitSize?: number;\n timeScale?: number;\n pause?: boolean;\n scanlineIntensity?: number;\n glitchAmount?: number;\n flickerAmount?: number;\n noiseAmp?: number;\n chromaticAberration?: number;\n dither?: number | boolean;\n curvature?: number;\n tint?: string;\n mouseReact?: boolean;\n mouseStrength?: number;\n dpr?: number;\n pageLoadAnimation?: boolean;\n brightness?: number;\n className?: string;\n style?: Record<string, string | number>;\n}\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;\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; // 1/2.2\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; // more efficient than ternary\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 gl_FragColor = vec4(col, 1.0);\n}\n`;\n\nfunction hexToRgb(hex: string): [number, number, number] {\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, 16);\n return [((num >> 16) & 255) / 255, ((num >> 8) & 255) / 255, (num & 255) / 255];\n}\n\nconst props = withDefaults(defineProps<FaultyTerminalProps>(), {\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 className: '',\n style: () => ({})\n});\n\nconst containerRef = useTemplateRef('containerRef');\nconst programRef = ref<Program | null>(null);\nconst rendererRef = ref<Renderer | null>(null);\nconst mouseRef = ref({ x: 0.5, y: 0.5 });\nconst smoothMouseRef = ref({ x: 0.5, y: 0.5 });\nconst frozenTimeRef = ref(0);\nconst rafRef = ref<number>(0);\nconst loadAnimationStartRef = ref<number>(0);\nconst timeOffsetRef = ref<number>(Math.random() * 100);\n\nconst tintVec = computed(() => hexToRgb(props.tint));\n\nconst ditherValue = computed(() => (typeof props.dither === 'boolean' ? (props.dither ? 1 : 0) : props.dither));\n\nconst handleMouseMove = (e: MouseEvent) => {\n const ctn = containerRef.value;\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.value = { x, y };\n};\n\nlet cleanup: (() => void) | null = null;\nconst setup = () => {\n const ctn = containerRef.value;\n if (!ctn) return;\n\n const renderer = new Renderer({ dpr: props.dpr });\n rendererRef.value = renderer;\n const gl = renderer.gl;\n gl.clearColor(0, 0, 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: props.scale },\n\n uGridMul: { value: new Float32Array(props.gridMul) },\n uDigitSize: { value: props.digitSize },\n uScanlineIntensity: { value: props.scanlineIntensity },\n uGlitchAmount: { value: props.glitchAmount },\n uFlickerAmount: { value: props.flickerAmount },\n uNoiseAmp: { value: props.noiseAmp },\n uChromaticAberration: { value: props.chromaticAberration },\n uDither: { value: ditherValue },\n uCurvature: { value: props.curvature },\n uTint: { value: new Color(tintVec.value[0], tintVec.value[1], tintVec.value[2]) },\n uMouse: {\n value: new Float32Array([smoothMouseRef.value.x, smoothMouseRef.value.y])\n },\n uMouseStrength: { value: props.mouseStrength },\n uUseMouse: { value: props.mouseReact ? 1 : 0 },\n uPageLoadProgress: { value: props.pageLoadAnimation ? 0 : 1 },\n uUsePageLoadAnimation: { value: props.pageLoadAnimation ? 1 : 0 },\n uBrightness: { value: props.brightness }\n }\n });\n programRef.value = 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: number) => {\n rafRef.value = requestAnimationFrame(update);\n\n if (props.pageLoadAnimation && loadAnimationStartRef.value === 0) {\n loadAnimationStartRef.value = t;\n }\n\n if (!props.pause) {\n const elapsed = (t * 0.001 + timeOffsetRef.value) * props.timeScale;\n program.uniforms.iTime.value = elapsed;\n frozenTimeRef.value = elapsed;\n } else {\n program.uniforms.iTime.value = frozenTimeRef.value;\n }\n\n if (props.pageLoadAnimation && loadAnimationStartRef.value > 0) {\n const animationDuration = 2000;\n const animationElapsed = t - loadAnimationStartRef.value;\n const progress = Math.min(animationElapsed / animationDuration, 1);\n program.uniforms.uPageLoadProgress.value = progress;\n }\n\n if (props.mouseReact) {\n const dampingFactor = 0.08;\n const smoothMouse = smoothMouseRef.value;\n const mouse = mouseRef.value;\n smoothMouse.x += (mouse.x - smoothMouse.x) * dampingFactor;\n smoothMouse.y += (mouse.y - smoothMouse.y) * dampingFactor;\n\n const mouseUniform = program.uniforms.uMouse.value as Float32Array;\n mouseUniform[0] = smoothMouse.x;\n mouseUniform[1] = smoothMouse.y;\n }\n\n renderer.render({ scene: mesh });\n };\n rafRef.value = requestAnimationFrame(update);\n ctn.appendChild(gl.canvas);\n\n if (props.mouseReact) ctn.addEventListener('mousemove', handleMouseMove);\n\n cleanup = () => {\n cancelAnimationFrame(rafRef.value);\n resizeObserver.disconnect();\n if (props.mouseReact) ctn.removeEventListener('mousemove', handleMouseMove);\n if (gl.canvas.parentElement === ctn) ctn.removeChild(gl.canvas);\n gl.getExtension('WEBGL_lose_context')?.loseContext();\n loadAnimationStartRef.value = 0;\n timeOffsetRef.value = Math.random() * 100;\n };\n};\n\nonMounted(() => {\n const ctn = containerRef.value;\n if (ctn) {\n setup();\n }\n});\n\nonBeforeUnmount(() => {\n if (cleanup) {\n cleanup();\n cleanup = null;\n }\n});\n\nwatch(\n () => props,\n () => {\n if (cleanup) {\n cleanup();\n cleanup = null;\n }\n setup();\n },\n { deep: true }\n);\n</script>\n\n<template>\n <div\n ref=\"containerRef\"\n :class=\"['w-full h-full relative overflow-hidden', className]\"\n :style=\"style\"\n v-bind=\"$attrs\"\n />\n</template>\n","path":"FaultyTerminal/FaultyTerminal.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"ogl","version":"^1.0.11"}],"devDependencies":[],"categories":["Backgrounds"]} |