brand-notion-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandNotionIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      // Page flip: shell tilts like turning a page
11      animate(
12        ".notion-shell",
13        { rotateY: [0, -15, 0], skewY: [0, 2, 0] },
14        { duration: 0.5, ease: "easeInOut" },
15      );
16      // Letter slightly pops forward
17      animate(
18        ".notion-letter",
19        { scale: [1, 1.03, 1], x: [0, 1, 0] },
20        { duration: 0.5, ease: "easeInOut" },
21      );
22    }, [animate]);
23 
24    const stop = useCallback(() => {
25      animate(".notion-shell", { rotateY: 0, skewY: 0 }, { duration: 0.2 });
26      animate(".notion-letter", { scale: 1, x: 0 }, { duration: 0.2 });
27    }, [animate]);
28 
29    useImperativeHandle(
30      ref,
31      () => ({
32        startAnimation: start,
33        stopAnimation: stop,
34      }),
35      [start, stop],
36    );
37 
38    return (
39      <motion.svg
40        ref={scope}
41        onHoverStart={start}
42        onHoverEnd={stop}
43        fill={color}
44        fillRule="evenodd"
45        height={size}
46        width={size}
47        style={{ flex: "none", lineHeight: 1 }}
48        viewBox="0 0 24 24"
49        xmlns="http://www.w3.org/2000/svg"
50        className={`notion-icon cursor-pointer ${className}`}
51      >
52        <title>Notion</title>
53 
54        {/* Outer paper shell */}
55        <motion.path
56          className="notion-shell"
57          d="M15.257.055l-13.31.98C.874 1.128.5 1.83.5 2.667v14.559c0 .654.233 1.213.794 1.96l3.129 4.06c.513.653.98.794 1.962.745l15.457-.932c1.307-.093 1.681-.7 1.681-1.727V4.954c0-.53-.21-.684-.829-1.135l-.106-.078L18.34.755c-1.027-.746-1.45-.84-3.083-.7zM6.736 4.685c-1.263.086-1.549.105-2.266-.477L2.647 2.76c-.186-.187-.092-.42.375-.466l12.796-.933c1.074-.094 1.634.28 2.054.606l2.195 1.587c.093.047.326.326.047.326l-13.216.794-.162.01zM5.263 21.193V7.287c0-.606.187-.886.748-.933l15.176-.886c.515-.047.748.28.748.886v13.81c0 .609-.093 1.122-.934 1.168l-14.523.84c-.842.047-1.215-.232-1.215-.98z"
58        />
59 
60        {/* Inner “N” */}
61        <motion.path
62          className="notion-letter"
63// … truncated