center-split-reveal

1"use client";
2 
3/**
4 * A center-split mask reveal — the image is clipped to a closed seam at the middle, then the clip-path opens outward (left/right for "horizontal", top/bottom for "vertical") to split it apart and uncover the whole frame.
5 */
6 
7import { useEffect, useRef } from "react";
8import gsap from "gsap";
9 
10const SRC = "/bend-image-reveal.gif";
11 
12export type SplitAxis = "horizontal" | "vertical";
13 
14const HIDDEN: Record<SplitAxis, string> = {
15  horizontal: "inset(0% 50% 0% 50% round 12px)",
16  vertical: "inset(50% 0% 50% 0% round 12px)",
17};
18const SHOWN = "inset(0% 0% 0% 0% round 12px)";
19 
20const CenterSplitReveal = ({
21  axis = "horizontal",
22}: {
23  axis?: SplitAxis;
24}) => {
25  const imgRef = useRef<HTMLImageElement>(null);
26 
27  const reveal = () => {
28    if (!imgRef.current) return;
29    gsap.fromTo(
30      imgRef.current,
31      {
32        clipPath: HIDDEN[axis],
33        scale: 1.4,
34        filter: "blur(16px)",
35      },
36      {
37        clipPath: SHOWN,
38        scale: 1,
39        filter: "blur(0px)",
40        duration: 1.2,
41        ease: "power4.inOut",
42      },
43    );
44  };
45 
46  useEffect(() => {
47    reveal();
48    // eslint-disable-next-line react-hooks/exhaustive-deps
49  }, [axis]);
50 
51  return (
52    <button
53      onClick={reveal}
54      className="relative aspect-video w-[40rem] max-w-[92%] cursor-pointer overflow-hidden rounded-xl"
55      aria-label="Replay reveal"
56    >
57      <img
58        ref={imgRef}
59        src={SRC}
60        alt="reveal"
61        className="size-full object-cover"
62        style={{
63          clipPath: HIDDEN[axis],
64          transform: "scale(1.4)",
65          filter: "blur(16px)",
66        }}
67      />
68    </button>
69  );
70};
71 
72export default CenterSplitReveal;