raining letters

README.md

@@ -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

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="min-h-screen">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+      <RainingLetters />
-        <Image
+    </main>
-          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>
   );
 }

components/RainingLetters.tsx

@@ -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
+