[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { TriangleGridBackground } from "@/components/triangle-grid-background" export default function Home() { return (

Interactive Triangle Grid

Move your mouse around to see the triangles respond with smooth spring-like animations. Use the controls to adjust the behavior!

) } [V0_FILE]typescriptreact:file="components/triangle-grid-background.tsx" isEdit="true" "use client" import { useEffect, useRef, useCallback, useState } from "react" interface Triangle { x: number y: number originalX: number originalY: number vx: number vy: number } interface Config { triangleSize: number spacing: number fillOpacity: number strokeOpacity: number strokeWidth: number springStrength: number damping: number maxDistance: number pushForce: number } interface InteractionSource { x: number y: number radius: number force: number } export function TriangleGridBackground() { const canvasRef = useRef(null) const animationRef = useRef() const trianglesRef = useRef([]) const mouseRef = useRef({ x: 0, y: 0 }) const interactionSourcesRef = useRef([]) const isDarkMode = useRef(false) const [config, setConfig] = useState({ triangleSize: 20, spacing: 40, fillOpacity: 0.05, strokeOpacity: 0.15, strokeWidth: 1, springStrength: 0.02, damping: 0.85, maxDistance: 120, pushForce: 0.8, }) const checkDarkMode = useCallback(() => { isDarkMode.current = document.documentElement.classList.contains("dark") }, []) const createTriangles = useCallback( (width: number, height: number) => { const triangles: Triangle[] = [] const cols = Math.ceil(width / config.spacing) + 2 const rows = Math.ceil(height / config.spacing) + 2 for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = col * config.spacing - config.spacing const y = row * config.spacing - config.spacing triangles.push({ x, y, originalX: x, originalY: y, vx: 0, vy: 0, }) } } trianglesRef.current = triangles }, [config.spacing], ) const drawTriangle = useCallback( (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, fillColor: string, strokeColor: string) => { const height = (size * Math.sqrt(3)) / 2 ctx.beginPath() ctx.moveTo(x, y - height / 2) ctx.lineTo(x - size / 2, y + height / 2) ctx.lineTo(x + size / 2, y + height / 2) ctx.closePath() ctx.fillStyle = fillColor ctx.fill() ctx.strokeStyle = strokeColor ctx.lineWidth = config.strokeWidth ctx.stroke() }, [config.strokeWidth], ) const animate = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) const interactionElements = document.querySelectorAll("[data-triangle-interaction]") const newSources: InteractionSource[] = [] interactionElements.forEach((element) => { const rect = element.getBoundingClientRect() const canvasRect = canvas.getBoundingClientRect() newSources.push({ x: rect.left + rect.width / 2 - canvasRect.left, y: rect.top + rect.height / 2 - canvasRect.top, radius: Math.max(rect.width, rect.height) * 0.8, force: 0.6, }) }) interactionSourcesRef.current = newSources trianglesRef.current.forEach((triangle) => { let totalForceX = 0 let totalForceY = 0 // Mouse interaction const mouseDx = mouseRef.current.x - triangle.x const mouseDy = mouseRef.current.y - triangle.y const mouseDistance = Math.sqrt(mouseDx * mouseDx + mouseDy * mouseDy) if (mouseDistance < config.maxDistance && mouseDistance > 0) { const force = (config.maxDistance - mouseDistance) / config.maxDistance totalForceX += -(mouseDx / mouseDistance) * force * config.pushForce totalForceY += -(mouseDy / mouseDistance) * force * config.pushForce } // UI element interactions interactionSourcesRef.current.forEach((source) => { const dx = source.x - triangle.x const dy = source.y - triangle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < source.radius && distance > 0) { const force = (source.radius - distance) / source.radius totalForceX += -(dx / distance) * force * source.force totalForceY += -(dy / distance) * force * source.force } }) triangle.vx += totalForceX triangle.vy += totalForceY const springX = (triangle.originalX - triangle.x) * config.springStrength const springY = (triangle.originalY - triangle.y) * config.springStrength triangle.vx += springX triangle.vy += springY triangle.vx *= config.damping triangle.vy *= config.damping triangle.x += triangle.vx triangle.y += triangle.vy }) checkDarkMode() const fillColor = isDarkMode.current ? `rgba(255, 255, 255, ${config.fillOpacity})` : `rgba(0, 0, 0, ${config.fillOpacity})` const strokeColor = isDarkMode.current ? `rgba(255, 255, 255, ${config.strokeOpacity})` : `rgba(0, 0, 0, ${config.strokeOpacity})` trianglesRef.current.forEach((triangle) => { drawTriangle(ctx, triangle.x, triangle.y, config.triangleSize, fillColor, strokeColor) }) animationRef.current = requestAnimationFrame(animate) }, [config, drawTriangle, checkDarkMode]) const handleMouseMove = useCallback((event: MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() mouseRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top, } }, []) const handleResize = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const { innerWidth, innerHeight } = window canvas.width = innerWidth canvas.height = innerHeight createTriangles(innerWidth, innerHeight) }, [createTriangles]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return handleResize() window.addEventListener("resize", handleResize) window.addEventListener("mousemove", handleMouseMove) canvas.addEventListener("mousemove", handleMouseMove) animate() return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("mousemove", handleMouseMove) canvas.removeEventListener("mousemove", handleMouseMove) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [handleResize, handleMouseMove, animate]) const presets = { gentle: { ...config, pushForce: 0.3, maxDistance: 80, springStrength: 0.015, damping: 0.9, }, energetic: { ...config, pushForce: 1.2, maxDistance: 150, springStrength: 0.03, damping: 0.8, }, subtle: { ...config, pushForce: 0.5, maxDistance: 60, springStrength: 0.01, damping: 0.95, fillOpacity: 0.02, strokeOpacity: 0.08, }, } const applyPreset = (presetName: keyof typeof presets) => { setConfig(presets[presetName]) } return ( <>

Interactive Triangle Grid

Triangle Controls

About

Tags

Share

About

Tags

Share

More from fryad

More Templates Like This

About

Tags

Share

About

Tags

Share

More from fryad

More Templates Like This