@playfast/reform-better-hub-ui-primitives 0.2.2 → 0.3.0

package/src/components/halftone-background.tsx

@@ -1,6 +1,15 @@
-import type * as React from "react";
-import { useEffect, useRef } from "react";
-import { CLICK_DECAY, FULLSCREEN_VERTEX_COUNT, MOUSE_LERP, MOUSE_LERP_IDLE, MS_PER_SECOND, RENDER_SCALE, type ShaderSpec, VERTEX_SHADER } from "./halftone-config";
+import type * as React from 'react'
+import { useEffect, useRef } from 'react'
+import {
+  CLICK_DECAY,
+  FULLSCREEN_VERTEX_COUNT,
+  MOUSE_LERP,
+  MOUSE_LERP_IDLE,
+  MS_PER_SECOND,
+  RENDER_SCALE,
+  type ShaderSpec,
+  VERTEX_SHADER,
+} from './halftone-config'
 
 const FRAGMENT_SHADER = `
 precision highp float;
@@ -129,158 +138,158 @@ void main() {
 
   float col = noise * vignette + grid;
   gl_FragColor = vec4(vec3(col), 1.0);
-}`;
+}`
 
 export function HalftoneBackground(): React.JSX.Element {
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const wrapperRef = useRef<HTMLDivElement>(null);
-	const frameRef = useRef<number>(0);
-	const mouseRef = useRef({ x: -1, y: -1 });
-	const smoothMouseRef = useRef({ x: -1, y: -1 });
-	const clickRef = useRef({ strength: 0, x: 0, y: 0 });
-
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		const wrapper = wrapperRef.current;
-		if (!canvas || !wrapper) {
-			return;
-		}
-
-		const glContext = canvas.getContext("webgl", {
-			alpha: false,
-			antialias: false,
-			preserveDrawingBuffer: false,
-		});
-		if (!glContext) {
-			return;
-		}
-
-		const createShader = ({ type, source }: ShaderSpec) => {
-			const shader = glContext!.createShader(type)!;
-			glContext!.shaderSource(shader, source);
-			glContext!.compileShader(shader);
-			return shader;
-		};
-
-		const vertexShader = createShader({
-			type: glContext.VERTEX_SHADER,
-			source: VERTEX_SHADER,
-		});
-		const fragmentShader = createShader({
-			type: glContext.FRAGMENT_SHADER,
-			source: FRAGMENT_SHADER,
-		});
-
-		const program = glContext.createProgram()!;
-		glContext.attachShader(program, vertexShader);
-		glContext.attachShader(program, fragmentShader);
-		glContext.linkProgram(program);
-		glContext.useProgram(program);
-
-		const buffer = glContext.createBuffer();
-		glContext.bindBuffer(glContext.ARRAY_BUFFER, buffer);
-		glContext.bufferData(
-			glContext.ARRAY_BUFFER,
-			new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
-			glContext.STATIC_DRAW,
-		);
-
-		const aPosition = glContext.getAttribLocation(program, "a_position");
-		glContext.enableVertexAttribArray(aPosition);
-		glContext.vertexAttribPointer(aPosition, 2, glContext.FLOAT, false, 0, 0);
-
-		const uTime = glContext.getUniformLocation(program, "u_time");
-		const uResolution = glContext.getUniformLocation(program, "u_resolution");
-		const uMouse = glContext.getUniformLocation(program, "u_mouse");
-		const uClick = glContext.getUniformLocation(program, "u_click");
-		const uClickPos = glContext.getUniformLocation(program, "u_clickPos");
-
-		const startTime = performance.now();
-
-		const resize = () => {
-			const dpr = Math.min(window.devicePixelRatio || 1, 2);
-			const scale = RENDER_SCALE * dpr;
-			canvas.width = canvas.offsetWidth * scale;
-			canvas.height = canvas.offsetHeight * scale;
-			glContext.viewport(0, 0, canvas.width, canvas.height);
-		};
-
-		resize();
-		window.addEventListener("resize", resize);
-
-		const onMouseMove = (event: MouseEvent) => {
-			const rect = wrapper.getBoundingClientRect();
-			mouseRef.current.x = (event.clientX - rect.left) / rect.width;
-			mouseRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height;
-		};
-
-		const onMouseLeave = () => {
-			mouseRef.current.x = -1;
-			mouseRef.current.y = -1;
-		};
-
-		const onClick = (event: MouseEvent) => {
-			const rect = wrapper.getBoundingClientRect();
-			clickRef.current.x = (event.clientX - rect.left) / rect.width;
-			clickRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height;
-			clickRef.current.strength = 1.0;
-		};
-
-		window.addEventListener("mousemove", onMouseMove, { passive: true });
-		wrapper.addEventListener("mouseleave", onMouseLeave);
-		wrapper.addEventListener("click", onClick);
-
-		const draw = () => {
-			const elapsed = (performance.now() - startTime) / MS_PER_SECOND;
-
-			const target = mouseRef.current;
-			const smooth = smoothMouseRef.current;
-			if (target.x < 0) {
-				smooth.x += (target.x - smooth.x) * MOUSE_LERP_IDLE;
-				smooth.y += (target.y - smooth.y) * MOUSE_LERP_IDLE;
-			} else {
-				smooth.x += (target.x - smooth.x) * MOUSE_LERP;
-				smooth.y += (target.y - smooth.y) * MOUSE_LERP;
-			}
-
-			clickRef.current.strength *= CLICK_DECAY;
-
-			glContext.uniform1f(uTime, elapsed);
-			glContext.uniform2f(uResolution, canvas.width, canvas.height);
-			glContext.uniform2f(uMouse, smooth.x, smooth.y);
-			glContext.uniform1f(uClick, clickRef.current.strength);
-			glContext.uniform2f(uClickPos, clickRef.current.x, clickRef.current.y);
-			glContext.drawArrays(glContext.TRIANGLES, 0, FULLSCREEN_VERTEX_COUNT);
-			frameRef.current = requestAnimationFrame(draw);
-		};
-
-		frameRef.current = requestAnimationFrame(draw);
-
-		return () => {
-			cancelAnimationFrame(frameRef.current);
-			window.removeEventListener("resize", resize);
-			window.removeEventListener("mousemove", onMouseMove);
-			wrapper.removeEventListener("mouseleave", onMouseLeave);
-			wrapper.removeEventListener("click", onClick);
-			glContext.deleteProgram(program);
-			glContext.deleteShader(vertexShader);
-			glContext.deleteShader(fragmentShader);
-			glContext.deleteBuffer(buffer);
-		};
-	}, []);
-
-	return (
-		<div
-			ref={wrapperRef}
-			className="absolute inset-0 overflow-hidden"
-			style={{ background: "var(--shader-bg)" }}
-			aria-hidden="true"
-		>
-			<canvas
-				ref={canvasRef}
-				className="w-full h-full"
-				style={{ filter: "var(--shader-filter)" }}
-			/>
-		</div>
-	);
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const frameRef = useRef<number>(0)
+  const mouseRef = useRef({ x: -1, y: -1 })
+  const smoothMouseRef = useRef({ x: -1, y: -1 })
+  const clickRef = useRef({ strength: 0, x: 0, y: 0 })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const wrapper = wrapperRef.current
+    if (!canvas || !wrapper) {
+      return
+    }
+
+    const glContext = canvas.getContext('webgl', {
+      alpha: false,
+      antialias: false,
+      preserveDrawingBuffer: false,
+    })
+    if (!glContext) {
+      return
+    }
+
+    const createShader = ({ type, source }: ShaderSpec) => {
+      const shader = glContext!.createShader(type)!
+      glContext!.shaderSource(shader, source)
+      glContext!.compileShader(shader)
+      return shader
+    }
+
+    const vertexShader = createShader({
+      type: glContext.VERTEX_SHADER,
+      source: VERTEX_SHADER,
+    })
+    const fragmentShader = createShader({
+      type: glContext.FRAGMENT_SHADER,
+      source: FRAGMENT_SHADER,
+    })
+
+    const program = glContext.createProgram()!
+    glContext.attachShader(program, vertexShader)
+    glContext.attachShader(program, fragmentShader)
+    glContext.linkProgram(program)
+    glContext.useProgram(program)
+
+    const buffer = glContext.createBuffer()
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, buffer)
+    glContext.bufferData(
+      glContext.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+      glContext.STATIC_DRAW,
+    )
+
+    const aPosition = glContext.getAttribLocation(program, 'a_position')
+    glContext.enableVertexAttribArray(aPosition)
+    glContext.vertexAttribPointer(aPosition, 2, glContext.FLOAT, false, 0, 0)
+
+    const uTime = glContext.getUniformLocation(program, 'u_time')
+    const uResolution = glContext.getUniformLocation(program, 'u_resolution')
+    const uMouse = glContext.getUniformLocation(program, 'u_mouse')
+    const uClick = glContext.getUniformLocation(program, 'u_click')
+    const uClickPos = glContext.getUniformLocation(program, 'u_clickPos')
+
+    const startTime = performance.now()
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const scale = RENDER_SCALE * dpr
+      canvas.width = canvas.offsetWidth * scale
+      canvas.height = canvas.offsetHeight * scale
+      glContext.viewport(0, 0, canvas.width, canvas.height)
+    }
+
+    resize()
+    window.addEventListener('resize', resize)
+
+    const onMouseMove = (event: MouseEvent) => {
+      const rect = wrapper.getBoundingClientRect()
+      mouseRef.current.x = (event.clientX - rect.left) / rect.width
+      mouseRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height
+    }
+
+    const onMouseLeave = () => {
+      mouseRef.current.x = -1
+      mouseRef.current.y = -1
+    }
+
+    const onClick = (event: MouseEvent) => {
+      const rect = wrapper.getBoundingClientRect()
+      clickRef.current.x = (event.clientX - rect.left) / rect.width
+      clickRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height
+      clickRef.current.strength = 1.0
+    }
+
+    window.addEventListener('mousemove', onMouseMove, { passive: true })
+    wrapper.addEventListener('mouseleave', onMouseLeave)
+    wrapper.addEventListener('click', onClick)
+
+    const draw = () => {
+      const elapsed = (performance.now() - startTime) / MS_PER_SECOND
+
+      const target = mouseRef.current
+      const smooth = smoothMouseRef.current
+      if (target.x < 0) {
+        smooth.x += (target.x - smooth.x) * MOUSE_LERP_IDLE
+        smooth.y += (target.y - smooth.y) * MOUSE_LERP_IDLE
+      } else {
+        smooth.x += (target.x - smooth.x) * MOUSE_LERP
+        smooth.y += (target.y - smooth.y) * MOUSE_LERP
+      }
+
+      clickRef.current.strength *= CLICK_DECAY
+
+      glContext.uniform1f(uTime, elapsed)
+      glContext.uniform2f(uResolution, canvas.width, canvas.height)
+      glContext.uniform2f(uMouse, smooth.x, smooth.y)
+      glContext.uniform1f(uClick, clickRef.current.strength)
+      glContext.uniform2f(uClickPos, clickRef.current.x, clickRef.current.y)
+      glContext.drawArrays(glContext.TRIANGLES, 0, FULLSCREEN_VERTEX_COUNT)
+      frameRef.current = requestAnimationFrame(draw)
+    }
+
+    frameRef.current = requestAnimationFrame(draw)
+
+    return () => {
+      cancelAnimationFrame(frameRef.current)
+      window.removeEventListener('resize', resize)
+      window.removeEventListener('mousemove', onMouseMove)
+      wrapper.removeEventListener('mouseleave', onMouseLeave)
+      wrapper.removeEventListener('click', onClick)
+      glContext.deleteProgram(program)
+      glContext.deleteShader(vertexShader)
+      glContext.deleteShader(fragmentShader)
+      glContext.deleteBuffer(buffer)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="absolute inset-0 overflow-hidden"
+      style={{ background: 'var(--shader-bg)' }}
+      aria-hidden="true"
+    >
+      <canvas
+        ref={canvasRef}
+        className="w-full h-full"
+        style={{ filter: 'var(--shader-filter)' }}
+      />
+    </div>
+  )
 }

package/src/components/halftone-config.ts

@@ -2,13 +2,13 @@ export const VERTEX_SHADER = `
 attribute vec2 a_position;
 void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
-}`;
+}`
 
-export const RENDER_SCALE = 0.5;
-export const MS_PER_SECOND = 1000;
-export const MOUSE_LERP = 0.08;
-export const MOUSE_LERP_IDLE = 0.02;
-export const CLICK_DECAY = 0.96;
-export const FULLSCREEN_VERTEX_COUNT = 6;
+export const RENDER_SCALE = 0.5
+export const MS_PER_SECOND = 1000
+export const MOUSE_LERP = 0.08
+export const MOUSE_LERP_IDLE = 0.02
+export const CLICK_DECAY = 0.96
+export const FULLSCREEN_VERTEX_COUNT = 6
 
-export type ShaderSpec = { readonly type: number; readonly source: string };
+export type ShaderSpec = { readonly type: number; readonly source: string }