1
npm i framer-motion

1
import { motion } from 'framer-motion';
2
import React, { useRef } from 'react';
3

4
const SkewedText = ({ children, className }: { children: React.ReactNode; className?: string }) => {
5
  const pRef = useRef<HTMLParagraphElement | null>(null);
6

7
  const onMouseMove = (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
8
    if (!pRef.current) return;
9

10
    const rect = pRef.current.getBoundingClientRect();
11

12
    const mx = e.clientX - rect.left;
13
    const my = e.clientY - rect.top;
14

15
    const width = rect.right - rect.left;
16
    const height = rect.bottom - rect.top;
17

18
    const xd = (mx - width / 2) / 8;
19
    const yd = (height / 2 - my) / 8;
20

21
    pRef.current.style.transform = `perspective(1000px) rotateY(${xd + 15}deg) rotateX(${yd}deg)`;
22
  };
23

24
  return (
25
    <div
26
      onMouseMove={onMouseMove}
27
      style={{
28
        transform: `perspective(300px) rotateX(20deg) rotateY(3deg)`
29
      }}
30
      className="w-full flex items-center justify-center p-10"
31
    >
32
      <motion.p
33
        ref={pRef}
34
        style={{
35
          transform: 'perspective(300px) rotateX(10deg) rotateY(3deg)',
36
          textShadow: '0 0 10px #00ffa39a, 0 0 30px #00ffa39a'
37
        }}
38
        initial={{
39
          y: 300,
40
          rotateX: 0,
41
          opacity: 0
42
        }}
43
        animate={{
44
          y: 0,
45
          rotateX: 20,
46
          opacity: 1,
47
          transition: { ease: 'backOut', duration: 1.2 }
48
        }}
49
        className={`font-bold transition-all duration-75 opacity-0 text-center w-[75%] italic ${className}`}
50
      >
51
        {children}
52
      </motion.p>
53
    </div>
54
  );
55
};
56

57
export default SkewedText;