Loki Text Effect

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5import { motion } from "motion/react";
6 
7import {
8  fontFive,
9  fontFour,
10  fontOne,
11  fontSeven,
12  fontSix,
13  fontThree,
14  fontTwo,
15} from "@/fonts/font";
16import { cn } from "@/lib/utils";
17 
18const fonts = [
19  fontOne.className,
20  fontTwo.className,
21  fontThree.className,
22  fontFour.className,
23  fontFive.className,
24  fontSix.className,
25  fontSeven.className,
26];
27 
28interface LokiEffectProps {
29  text: string;
30  velocityFont?: number; // In ms
31  velocityMove?: number; // In ms
32  className?: string;
33}
34 
35const getRandomFont = (current: string) => {
36  let next = current;
37  while (next === current) {
38    next = fonts[Math.floor(Math.random() * fonts.length)];
39  }
40  return next;
41};
42 
43const getRandomOffset = () => ({
44  x: (Math.random() - 0.5) * 2,
45  y: (Math.random() - 0.5) * 2,
46});
47 
48const AnimatedLetter = ({
49  char,
50  baseFont,
51  velocityFont,
52  velocityMove,
53}: {
54  char: string;
55  baseFont: string;
56  velocityFont: number;
57  velocityMove: number;
58}) => {
59  const [fontClass, setFontClass] = useState(baseFont);
60  const [pos, setPos] = useState({ x: 0, y: 0 });
61 
62  useEffect(() => {
63    const fontTimer = setInterval(
64      () => {
65        setFontClass((prev) => getRandomFont(prev));
66      },
67      Math.max(100, velocityFont)
68    );
69 
70    const moveTimer = setInterval(
71      () => {
72        setPos(getRandomOffset());
73      },
74      Math.max(100, velocityMove)
75    );
76 
77    return () => {
78      clearInterval(fontTimer);
79      clearInterval(moveTimer);
80    };
81  }, [velocityFont, velocityMove]);
82 
83  return (
84    <motion.span
85      className={`${fontClass} inline-block drop-shadow-[0_0_8px_black] dark:drop-shadow-[0_0_8px_white]`}
86      style={{
87        fontWeight: 700,
88        letterSpacing: "0.15em",
89        textShadow: "0 0 2px #ffffff66, 0 0 5px #ffffff66",
90      }}
91      animate={{ x: pos.x, y: pos.y }}
92      transition={{
93        x: { duration: 0.5, ease: "easeInOut" },
94        y: { duration: 0.5, ease: "easeInOut" },
95      }}
96    >
97      {char}
98    </motion.span>
99  );
100};
101 
102export const LokiTextEffect = ({
103  text,
104  velocityFont = 800,
105  velocityMove = 1800,
106  className = "",
107}: LokiEffectProps) => {
108  return (
109    <div
110      className={cn(
111        "flex flex-wrap justify-center gap-px text-6xl md:text-9xl",
112        className
113      )}
114    >
115      {text.split("").map((char, i) => (
116        <AnimatedLetter
117          key={i}
118          char={char}
119          baseFont={fonts[i % fonts.length]}
120// … truncated