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

) } [V0_FILE]typescriptreact:file="components/FlickeringLetters.tsx" isEdit="true" isDeleted="true" isUserEdit="true" ... deleted ... [V0_FILE]typescriptreact:file="components/RainingLetters.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback, useRef } from "react" interface Character { char: string x: number y: number speed: number } class TextScramble { el: HTMLElement chars: string queue: Array<{ from: string to: string start: number end: number char?: string }> frame: number frameRequest: number resolve: (value: void | PromiseLike) => void constructor(el: HTMLElement) { this.el = el this.chars = '!<>-_\\/[]{}—=+*^?#' this.queue = [] this.frame = 0 this.frameRequest = 0 this.resolve = () => {} this.update = this.update.bind(this) } setText(newText: string) { const oldText = this.el.innerText const length = Math.max(oldText.length, newText.length) const promise = new Promise((resolve) => this.resolve = resolve) this.queue = [] for (let i = 0; i < length; i++) { const from = oldText[i] || '' const to = newText[i] || '' const start = Math.floor(Math.random() * 40) const end = start + Math.floor(Math.random() * 40) this.queue.push({ from, to, start, end }) } cancelAnimationFrame(this.frameRequest) this.frame = 0 this.update() return promise } update() { let output = '' let complete = 0 for (let i = 0, n = this.queue.length; i < n; i++) { let { from, to, start, end, char } = this.queue[i] if (this.frame >= end) { complete++ output += to } else if (this.frame >= start) { if (!char || Math.random() < 0.28) { char = this.chars[Math.floor(Math.random() * this.chars.length)] this.queue[i].char = char } output += `${char}` } else { output += from } } this.el.innerHTML = output if (complete === this.queue.length) { this.resolve() } else { this.frameRequest = requestAnimationFrame(this.update) this.frame++ } } } const ScrambledTitle: React.FC = () => { const elementRef = useRef(null) const scramblerRef = useRef(null) const [mounted, setMounted] = useState(false) useEffect(() => { if (elementRef.current && !scramblerRef.current) { scramblerRef.current = new TextScramble(elementRef.current) setMounted(true) } }, []) useEffect(() => { if (mounted && scramblerRef.current) { const phrases = [ 'Zuhair,', 'It\'s RAINING', 'with\' letters', 'and alphabets', 'dont FORGET to bring', 'your umbrella today' ] let counter = 0 const next = () => { if (scramblerRef.current) { scramblerRef.current.setText(phrases[counter]).then(() => { setTimeout(next, 2000) }) counter = (counter + 1) % phrases.length } } next() } }, [mounted]) return (

RAINING LETTERS

) } const RainingLetters: React.FC = () => { const [characters, setCharacters] = useState([]) const [activeIndices, setActiveIndices] = useState>(new Set()) const createCharacters = useCallback(() => { const allChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?" const charCount = 300 const newCharacters: Character[] = [] for (let i = 0; i < charCount; i++) { newCharacters.push({ char: allChars[Math.floor(Math.random() * allChars.length)], x: Math.random() * 100, y: Math.random() * 100, speed: 0.1 + Math.random() * 0.3, }) } return newCharacters }, []) useEffect(() => { setCharacters(createCharacters()) }, [createCharacters]) useEffect(() => { const updateActiveIndices = () => { const newActiveIndices = new Set() const numActive = Math.floor(Math.random() * 3) + 3 for (let i = 0; i < numActive; i++) { newActiveIndices.add(Math.floor(Math.random() * characters.length)) } setActiveIndices(newActiveIndices) } const flickerInterval = setInterval(updateActiveIndices, 50) return () => clearInterval(flickerInterval) }, [characters.length]) useEffect(() => { let animationFrameId: number const updatePositions = () => { setCharacters(prevChars => prevChars.map(char => ({ ...char, y: char.y + char.speed, ...(char.y >= 100 && { y: -5, x: Math.random() * 100, char: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?"[ Math.floor(Math.random() * "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?".length) ], }), })) ) animationFrameId = requestAnimationFrame(updatePositions) } animationFrameId = requestAnimationFrame(updatePositions) return () => cancelAnimationFrame(animationFrameId) }, []) return (

{/* Title */}

{/* Raining Characters */} {characters.map((char, index) => ( {char.char} ))}

) } export default RainingLetters

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This