"use client" import React, { useRef, useMemo, useCallback, useState } from 'react' import { Canvas, useFrame, useThree } from '@react-three/fiber' import * as THREE from 'three' interface MousePosition { x: number; y: number; } interface TextPixelDistortionProps { text: string; font?: string; size?: number | null; color?: string; bgColor?: string; fontWeight?: number; distortionStrength?: number; pixelSize?: number; easeSpeed?: number; } // Shader component that handles the distortion effect const DistortionPlane = ({ texture, distortionStrength = 0.15, pixelSize = 40.0, easeSpeed = 0.02 }: { texture: THREE.CanvasTexture; distortionStrength?: number; pixelSize?: number; easeSpeed?: number; }) => { const meshRef = useRef(null); const { viewport, size } = useThree(); // Mouse position tracking with smooth interpolation const mousePosition = useRef({ x: 0.5, y: 0.5 }); const targetMousePosition = useRef({ x: 0.5, y: 0.5 }); const prevMousePosition = useRef({ x: 0.5, y: 0.5 }); const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` varying vec2 vUv; uniform sampler2D u_texture; uniform vec2 u_mouse; uniform vec2 u_prevMouse; uniform float u_strength; uniform float u_pixelSize; void main() { vec2 gridUV = floor(vUv * vec2(u_pixelSize, u_pixelSize)) / vec2(u_pixelSize, u_pixelSize); vec2 centerOfPixel = gridUV + vec2(1.0/u_pixelSize, 1.0/u_pixelSize); vec2 mouseDirection = u_mouse - u_prevMouse; vec2 pixelToMouseDirection = centerOfPixel - u_mouse; float pixelDistanceToMouse = length(pixelToMouseDirection); float strength = smoothstep(0.3, 0.0, pixelDistanceToMouse); vec2 uvOffset = strength * -mouseDirection * u_strength; vec2 uv = vUv - uvOffset; vec4 color = texture2D(u_texture, uv); gl_FragColor = color; } `; const uniforms = useMemo(() => ({ u_texture: { value: texture }, u_mouse: { value: new THREE.Vector2(0.5, 0.5) }, u_prevMouse: { value: new THREE.Vector2(0.5, 0.5) }, u_strength: { value: distortionStrength }, u_pixelSize: { value: pixelSize } }), [texture, distortionStrength, pixelSize]); // Handle mouse movement with bounds checking const handlePointerMove = useCallback((event: any) => { const x = (event.point.x / viewport.width + 1) / 2; const y = (-event.point.y / viewport.height + 1) / 2; prevMousePosition.current = { ...targetMousePosition.current }; targetMousePosition.current = { x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) }; }, [viewport]); const handlePointerEnter = useCallback((event: any) => { const x = (event.point.x / viewport.width + 1) / 2; const y = (-event.point.y / viewport.height + 1) / 2; const clampedX = Math.max(0, Math.min(1, x)); const clampedY = Math.max(0, Math.min(1, y)); mousePosition.current = { x: clampedX, y: clampedY }; targetMousePosition.current = { x: clampedX, y: clampedY }; prevMousePosition.current = { x: clampedX, y: clampedY }; }, [viewport]); const handlePointerLeave = useCallback(() => { targetMousePosition.current = { ...prevMousePosition.current }; }, []); // Smooth mouse interpolation and uniform updates useFrame(() => { if (!meshRef.current) return; // Interpolate mouse position mousePosition.current.x += (targetMousePosition.current.x - mousePosition.current.x) * easeSpeed; mousePosition.current.y += (targetMousePosition.current.y - mousePosition.current.y) * easeSpeed; // Update shader uniforms const material = meshRef.current.material as THREE.ShaderMaterial; material.uniforms.u_mouse.value.set(mousePosition.current.x, 1.0 - mousePosition.current.y); material.uniforms.u_prevMouse.value.set(prevMousePosition.current.x, 1.0 - prevMousePosition.current.y); }); return ( ); }; // Hook to create and manage text texture const useTextTexture = ( text: string, font: string, size: number | null, color: string, bgColor: string, fontWeight: number ) => { const { size: canvasSize } = useThree(); return useMemo(() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); if (!ctx) { throw new Error("Could not get 2d context"); } // Use higher resolution for better quality const dpr = Math.min(window.devicePixelRatio || 1, 2); const canvasWidth = canvasSize.width * dpr; const canvasHeight = canvasSize.height * dpr; canvas.width = canvasWidth; canvas.height = canvasHeight; // Fill background ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvasWidth, canvasHeight); // Calculate responsive font size const fontSize = size || Math.floor(canvasWidth / 8); // Set up text rendering ctx.fillStyle = color; ctx.font = `${fontWeight} ${fontSize}px ${font}`; ctx.textAlign = "left"; ctx.textBaseline = "middle"; ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = "high"; // Measure text for scaling const textMetrics = ctx.measureText(text); const textWidth = textMetrics.width; const scaleFactor = Math.min(1, (canvasWidth * 0.8) / textWidth); // Position text with left margin const leftMargin = canvasWidth * 0.1; ctx.setTransform(scaleFactor, 0, 0, scaleFactor, leftMargin, canvasHeight / 2); // Add subtle stroke for better definition ctx.strokeStyle = color; ctx.lineWidth = fontSize * 0.002; ctx.strokeText(text, 0, 0); ctx.fillText(text, 0, 0); const texture = new THREE.CanvasTexture(canvas); texture.generateMipmaps = false; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; return texture; }, [text, font, size, color, bgColor, fontWeight, canvasSize.width, canvasSize.height]); }; // Main scene component const TextDistortionScene = ({ text, font, size, color, bgColor, fontWeight, distortionStrength, pixelSize, easeSpeed }: Omit & { text: string }) => { const texture = useTextTexture(text, font || "Geist", size!, color || "#000000", bgColor || "#ffffff", fontWeight || 500); return ( ); }; // Main exported component export const TextPixelDistortion = ({ text, font = "Geist", size = null, color = "var(--foreground)", bgColor = "var(--background)", fontWeight = 500, distortionStrength = 0.15, pixelSize = 40.0, easeSpeed = 0.02, }: TextPixelDistortionProps) => { const [error, setError] = useState(null); if (error) { return (

Error loading text distortion: {error}

); } return (

); };

Name	Type	Default	Required	Description
text	string	-	Yes	The text to display
font	string	-	No	The font to use
size	number	-	No	The size of the text
color	string	-	No	The color of the text
fontWeight	number	-	No	The weight of the font

Command Palette

Text Pixel Distortion

Installation

Install Dependencies

Copy and Paste the component

Unlock with PRO

Usage

Props