feat: add decrypt text
523be33d
2 file(s) · +46 −1
| 1 | + | import React, { useState, useEffect } from "react"; |
|
| 2 | + | ||
| 3 | + | interface DecryptingTextProps { |
|
| 4 | + | text: string; |
|
| 5 | + | className?: string; |
|
| 6 | + | } |
|
| 7 | + | ||
| 8 | + | const characters = |
|
| 9 | + | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?"; |
|
| 10 | + | ||
| 11 | + | export function DecryptingText({ text, className = "" }: DecryptingTextProps) { |
|
| 12 | + | const [decryptedText, setDecryptedText] = useState(""); |
|
| 13 | + | ||
| 14 | + | useEffect(() => { |
|
| 15 | + | const totalDuration = 1500; // 1.5 seconds |
|
| 16 | + | const intervalDuration = 30; // Update every 30ms |
|
| 17 | + | const steps = totalDuration / intervalDuration; |
|
| 18 | + | ||
| 19 | + | let step = 0; |
|
| 20 | + | const intervalId = setInterval(() => { |
|
| 21 | + | if (step < steps) { |
|
| 22 | + | setDecryptedText( |
|
| 23 | + | text |
|
| 24 | + | .split("") |
|
| 25 | + | .map((char, index) => { |
|
| 26 | + | if (index < (step / steps) * text.length) { |
|
| 27 | + | return char; |
|
| 28 | + | } |
|
| 29 | + | return characters[Math.floor(Math.random() * characters.length)]; |
|
| 30 | + | }) |
|
| 31 | + | .join(""), |
|
| 32 | + | ); |
|
| 33 | + | step++; |
|
| 34 | + | } else { |
|
| 35 | + | clearInterval(intervalId); |
|
| 36 | + | setDecryptedText(text); |
|
| 37 | + | } |
|
| 38 | + | }, intervalDuration); |
|
| 39 | + | ||
| 40 | + | return () => clearInterval(intervalId); |
|
| 41 | + | }, [text]); |
|
| 42 | + | ||
| 43 | + | return <span className={`font-mono ${className}`}>{decryptedText}</span>; |
|
| 44 | + | } |
| 5 | 5 | import SocialList from "@/components/SocialList"; |
|
| 6 | 6 | import { sortMDByDate } from "@/utils"; |
|
| 7 | 7 | import { Image } from "astro:assets"; |
|
| 8 | + | import { DecryptingText } from "src/components/DecryptingText"; |
|
| 8 | 9 | ||
| 9 | 10 | const MAX_POSTS = 10; |
|
| 10 | 11 | const allPosts = await getCollection("post"); |
|
| 14 | 15 | ||
| 15 | 16 | <PageLayout meta={{ title: "Home" }}> |
|
| 16 | 17 | <section> |
|
| 17 | - | <h1 class="title mb-6">Hey there!</h1> |
|
| 18 | + | <DecryptingText text="Hey There!" className="title mb-6" client:only="react" /> |
|
| 18 | 19 | <p class="mb-4"> |
|
| 19 | 20 | My name is Steve. I'm a DX Engineer and creator with a desire to |
|
| 20 | 21 | help build the future of the web. My latest project is <a |
|