[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import ParticleText from "../components/ParticleText" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/ParticleText.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef } from "react" class Particle { x: number y: number size: number baseX: number baseY: number density: number isTextParticle: boolean speed: number angle: number constructor(x: number, y: number, isTextParticle: boolean) { this.x = x this.y = y this.size = isTextParticle ? 1.5 : Math.random() * 1 + 0.5 this.baseX = x this.baseY = y this.density = isTextParticle ? Math.random() * 10 + 5 : 0 this.isTextParticle = isTextParticle this.speed = Math.random() * 0.5 + 0.1 this.angle = Math.random() * Math.PI * 2 } draw(ctx: CanvasRenderingContext2D) { ctx.fillStyle = this.isTextParticle ? "white" : "rgba(255, 255, 255, 0.5)" ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.closePath() ctx.fill() } update(mouse: { x: number; y: number }, canvasWidth: number, canvasHeight: number) { if (this.isTextParticle) { const dx = mouse.x - this.x const dy = mouse.y - this.y const distance = Math.sqrt(dx * dx + dy * dy) const forceDirectionX = dx / distance const forceDirectionY = dy / distance const maxDistance = 100 const force = (maxDistance - distance) / maxDistance const directionX = forceDirectionX * force * this.density const directionY = forceDirectionY * force * this.density if (distance < maxDistance) { this.x -= directionX this.y -= directionY } else { if (this.x !== this.baseX) { const dx = this.x - this.baseX this.x -= dx / 10 } if (this.y !== this.baseY) { const dy = this.y - this.baseY this.y -= dy / 10 } } } else { this.x += Math.cos(this.angle) * this.speed this.y += Math.sin(this.angle) * this.speed if (this.x < 0 || this.x > canvasWidth) { this.x = (this.x + canvasWidth) % canvasWidth } if (this.y < 0 || this.y > canvasHeight) { this.y = (this.y + canvasHeight) % canvasHeight } } } } const ParticleText: React.FC = () => { const canvasRef = useRef(null) const particlesRef = useRef([]) const mouseRef = useRef({ x: 0, y: 0 }) useEffect(() => { const canvas = canvasRef.current const ctx = canvas?.getContext("2d") if (!canvas || !ctx) return const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight initializeParticles() } const initializeParticles = () => { particlesRef.current = [] const offscreenCanvas = document.createElement("canvas") const offscreenCtx = offscreenCanvas.getContext("2d") if (!offscreenCtx) return offscreenCanvas.width = canvas.width offscreenCanvas.height = canvas.height offscreenCtx.fillStyle = "white" offscreenCtx.font = "bold 60px Arial" offscreenCtx.textAlign = "center" offscreenCtx.textBaseline = "middle" const text = "ALIEN OF" const text2 = "EXTRAORDINARY ABILITIES" offscreenCtx.fillText(text, canvas.width / 2, canvas.height / 2 - 40) offscreenCtx.fillText(text2, canvas.width / 2, canvas.height / 2 + 40) const imageData = offscreenCtx.getImageData(0, 0, canvas.width, canvas.height) for (let y = 0; y < imageData.height; y += 3) { for (let x = 0; x < imageData.width; x += 3) { if (imageData.data[y * 4 * imageData.width + x * 4 + 3] > 128) { particlesRef.current.push(new Particle(x, y, true)) } } } // Add floating background particles const numBackgroundParticles = Math.floor((canvas.width * canvas.height) / 5000) for (let i = 0; i < numBackgroundParticles; i++) { particlesRef.current.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height, false)) } } const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) for (const particle of particlesRef.current) { particle.update(mouseRef.current, canvas.width, canvas.height) particle.draw(ctx) } requestAnimationFrame(animate) } resizeCanvas() animate() window.addEventListener("resize", resizeCanvas) canvas.addEventListener("mousemove", (e) => { mouseRef.current = { x: e.x, y: e.y } }) return () => { window.removeEventListener("resize", resizeCanvas) canvas.removeEventListener("mousemove", (e) => { mouseRef.current = { x: e.x, y: e.y } }) } }, []) return

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This