Direction Reveal

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7type Direction = "top" | "right" | "bottom" | "left";
8 
9type DirectionRevealProps = React.ComponentProps<"div"> & {
10  reveal: React.ReactNode;
11  revealClassName?: string;
12};
13 
14const transforms: Record<Direction, string> = {
15  top: "translate3d(0,-101%,0)",
16  right: "translate3d(101%,0,0)",
17  bottom: "translate3d(0,101%,0)",
18  left: "translate3d(-101%,0,0)",
19};
20 
21function getDirection(event: React.MouseEvent<HTMLDivElement>): Direction {
22  const bounds = event.currentTarget.getBoundingClientRect();
23  const x = event.clientX - bounds.left - bounds.width / 2;
24  const y = event.clientY - bounds.top - bounds.height / 2;
25  const angle = Math.atan2(y, x) * (180 / Math.PI);
26  if (angle >= -45 && angle < 45) return "right";
27  if (angle >= 45 && angle < 135) return "bottom";
28  if (angle >= -135 && angle < -45) return "top";
29  return "left";
30}
31 
32function DirectionReveal({
33  children,
34  className,
35  onMouseEnter,
36  onMouseLeave,
37  onPointerMove,
38  reveal,
39  revealClassName,
40  ...props
41}: DirectionRevealProps) {
42  const [direction, setDirection] = React.useState<Direction>("bottom");
43  const [visible, setVisible] = React.useState(false);
44 
45  return (
46    <div
47      className={cn(
48        "group relative isolate overflow-hidden rounded-[2rem] border border-foreground/10 bg-card [contain:paint]",
49        className,
50      )}
51      data-direction={direction}
52      data-slot="direction-reveal"
53      onMouseEnter={(event) => {
54        setDirection(getDirection(event));
55        setVisible(true);
56        onMouseEnter?.(event);
57      }}
58      onMouseLeave={(event) => {
59        setDirection(getDirection(event));
60        setVisible(false);
61        onMouseLeave?.(event);
62      }}
63      onPointerMove={(event) => {
64        if (!visible) {
65          setDirection(getDirection(event));
66          setVisible(true);
67        }
68        onPointerMove?.(event);
69      }}
70      {...props}
71    >
72      <div className="h-full transition-transform duration-500 ease-[cubic-bezier(.22,1,.36,1)] group-hover:scale-[1.025]">
73        {children}
74      </div>
75      <div
76        aria-hidden={!visible}
77        className={cn(
78          "absolute inset-0 z-10 transition-transform duration-500 ease-[cubic-bezier(.22,1,.36,1)] will-change-transform [backface-visibility:hidden] motion-reduce:transition-none",
79          revealClassName,
80        )}
81        style={{
82// … truncated