Sticker Peel

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface StickerPeelProps extends React.ComponentProps<"div"> {
8  /** How far the corner lifts, as a CSS length. */
9  size?: string
10  /** Which corner peels. */
11  corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
12  /** Length of the peel in milliseconds. */
13  duration?: number
14  /** Hold the corner up. Leave it out to peel on hover and focus. */
15  peeled?: boolean
16}
17 
18/**
19 * Each corner is one cut and one flap. The flap is the cut triangle mirrored
20 * back over the crease, which is why its tip lands inside the sticker rather
21 * than on top of the corner it came from.
22 */
23const CORNERS = {
24  "top-left": {
25    face: (size: string) =>
26      `polygon(${size} 0, 100% 0, 100% 100%, 0 100%, 0 ${size})`,
27    flap: "polygon(0 100%, 100% 0, 100% 100%)",
28    anchor: "top-0 left-0 origin-top-left",
29    sheen: "bg-linear-to-br",
30  },
31  "top-right": {
32    face: (size: string) =>
33      `polygon(0 0, calc(100% - ${size}) 0, 100% ${size}, 100% 100%, 0 100%)`,
34    flap: "polygon(0 0, 100% 100%, 0 100%)",
35    anchor: "top-0 right-0 origin-top-right",
36    sheen: "bg-linear-to-bl",
37  },
38  "bottom-left": {
39    face: (size: string) =>
40      `polygon(0 0, 100% 0, 100% 100%, ${size} 100%, 0 calc(100% - ${size}))`,
41    flap: "polygon(0 0, 100% 100%, 100% 0)",
42    anchor: "bottom-0 left-0 origin-bottom-left",
43    sheen: "bg-linear-to-tr",
44  },
45  "bottom-right": {
46    face: (size: string) =>
47      `polygon(0 0, 100% 0, 100% calc(100% - ${size}), calc(100% - ${size}) 100%, 0 100%)`,
48    flap: "polygon(100% 0, 0 100%, 0 0)",
49    anchor: "bottom-0 right-0 origin-bottom-right",
50    sheen: "bg-linear-to-tl",
51  },
52} as const
53 
54export function StickerPeel({
55  children,
56  size = "2.75rem",
57  corner = "bottom-right",
58  duration = 380,
59  peeled,
60  className,
61  onPointerEnter,
62  onPointerLeave,
63  onFocus,
64  onBlur,
65  ...props
66}: StickerPeelProps) {
67  const [hovered, setHovered] = React.useState(false)
68  const isControlled = peeled !== undefined
69  const lifted = isControlled ? peeled : hovered
70  const spec = CORNERS[corner]
71 
72  return (
73    <div
74      data-slot="sticker-peel"
75      data-peeled={lifted ? "" : undefined}
76      className={cn("relative isolate", className)}
77      onPointerEnter={(event) => {
78        onPointerEnter?.(event)
79        setHovered(true)
80      }}
81      onPointerLeave={(event) => {
82        onPointerLeave?.(event)
83        setHovered(false)
84      }}
85// … truncated