"use client"; import React, { useEffect, useRef, useState, memo } from "react"; import { motion } from "motion/react"; import { twMerge } from "tailwind-merge"; import { cn } from "@/lib/utils"; export const TextRevealCard = ({ text, revealText, children, className, }: { text: string; revealText: string; children?: React.ReactNode; className?: string; }) => { const [widthPercentage, setWidthPercentage] = useState(0); const cardRef = useRef(null); const [left, setLeft] = useState(0); const [localWidth, setLocalWidth] = useState(0); const [isMouseOver, setIsMouseOver] = useState(false); useEffect(() => { if (cardRef.current) { const { left, width: localWidth } = cardRef.current.getBoundingClientRect(); setLeft(left); setLocalWidth(localWidth); } }, []); function mouseMoveHandler(event: any) { event.preventDefault(); const { clientX } = event; if (cardRef.current) { const relativeX = clientX - left; setWidthPercentage((relativeX / localWidth) * 100); } } function mouseLeaveHandler() { setIsMouseOver(false); setWidthPercentage(0); } function mouseEnterHandler() { setIsMouseOver(true); } function touchMoveHandler(event: React.TouchEvent) { event.preventDefault(); const clientX = event.touches[0]!.clientX; if (cardRef.current) { const relativeX = clientX - left; setWidthPercentage((relativeX / localWidth) * 100); } } const rotateDeg = (widthPercentage - 50) * 0.1; return (

{children}

0 ? 1 : 0, clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`, } : { clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`, } } transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }} className="absolute bg-[#1d1c20] z-20 will-change-transform" >

{revealText}

0 ? 1 : 0, }} transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }} className="h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent absolute z-50 will-change-transform" >

{text}

); }; export const TextRevealCardTitle = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

{children}

); }; export const TextRevealCardDescription = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

{children}

); }; const Stars = () => { const randomMove = () => Math.random() * 4 - 2; const randomOpacity = () => Math.random(); const random = () => Math.random(); return (

{[...Array(80)].map((_, i) => ( ))}

); }; export const MemoizedStars = memo(Stars);

Text Reveal Card

Instalação

Dependências