raining letters
This commit is contained in:
highperfocused
parent
2b00ae3d87
commit
877d9cd9f6
@ -1,3 +1,9 @@
|
||||
## Sources
|
||||
|
||||
https://v0.dev/chat/raining-characters-Danw4lYPxcZ
|
||||
|
||||
---
|
||||
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
99
app/page.tsx
99
app/page.tsx
@ -1,101 +1,10 @@
|
||||
import RainingLetters from "@/components/RainingLetters";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
||||
app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<main className="min-h-screen">
|
||||
<RainingLetters />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
239
components/RainingLetters.tsx
Normal file
239
components/RainingLetters.tsx
Normal file
@ -0,0 +1,239 @@
|
||||
"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>) => 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<void>((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 += `<span class="dud">${char}</span>`
|
||||
} 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<HTMLHeadingElement>(null)
|
||||
const scramblerRef = useRef<TextScramble | null>(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 = [
|
||||
'MATRIX,',
|
||||
'Landing',
|
||||
'Page',
|
||||
]
|
||||
|
||||
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 (
|
||||
<h1
|
||||
ref={elementRef}
|
||||
className="text-white text-6xl font-bold tracking-wider justify-center"
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
>
|
||||
STUDY BITCOIN
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
|
||||
const RainingLetters: React.FC = () => {
|
||||
const [characters, setCharacters] = useState<Character[]>([])
|
||||
const [activeIndices, setActiveIndices] = useState<Set<number>>(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<number>()
|
||||
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 (
|
||||
<div className="relative w-full h-screen bg-black overflow-hidden">
|
||||
{/* Title */}
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20">
|
||||
<ScrambledTitle />
|
||||
</div>
|
||||
|
||||
{/* Raining Characters */}
|
||||
{characters.map((char, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`absolute text-xs transition-colors duration-100 ${
|
||||
activeIndices.has(index)
|
||||
? "text-[#00ff00] text-base scale-125 z-10 font-bold animate-pulse"
|
||||
: "text-slate-600 font-light"
|
||||
}`}
|
||||
style={{
|
||||
left: `${char.x}%`,
|
||||
top: `${char.y}%`,
|
||||
transform: `translate(-50%, -50%) ${activeIndices.has(index) ? 'scale(1.25)' : 'scale(1)'}`,
|
||||
textShadow: activeIndices.has(index)
|
||||
? '0 0 8px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.4)'
|
||||
: 'none',
|
||||
opacity: activeIndices.has(index) ? 1 : 0.4,
|
||||
transition: 'color 0.1s, transform 0.1s, text-shadow 0.1s',
|
||||
willChange: 'transform, top',
|
||||
fontSize: '1.8rem'
|
||||
}}
|
||||
>
|
||||
{char.char}
|
||||
</span>
|
||||
))}
|
||||
|
||||
<style jsx global>{`
|
||||
.dud {
|
||||
color: #0f0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RainingLetters
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user