web/app/components/grove-logo.tsxblame
View source
6dd74de1"use client";
6dd74de2
6dd74de3import { useCallback, useId, useRef } from "react";
6dd74de4
818dc905interface Props {
818dc906 size?: number;
818dc907}
818dc908
818dc909export function GroveLogo({ size = 24 }: Props) {
6dd74de10 const svgRef = useRef<SVGSVGElement>(null);
6dd74de11 const id = useId();
6dd74de12 const styleId = id.replace(/:/g, "");
6dd74de13
6dd74de14 const onMouseMove = useCallback((e: React.MouseEvent<SVGSVGElement>) => {
6dd74de15 const rect = e.currentTarget.getBoundingClientRect();
6dd74de16 const relX = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
6dd74de17 e.currentTarget.style.setProperty("--sway", `${relX * 6}deg`);
6dd74de18 }, []);
6dd74de19
6dd74de20 const onMouseLeave = useCallback((e: React.MouseEvent<SVGSVGElement>) => {
6dd74de21 e.currentTarget.style.setProperty("--sway", "0deg");
6dd74de22 }, []);
6dd74de23
818dc9024 return (
818dc9025 <svg
6dd74de26 ref={svgRef}
6dd74de27 className={`grove-logo-${styleId}`}
818dc9028 width={size}
818dc9029 height={size}
818dc9030 viewBox="0 0 64 64"
818dc9031 fill="none"
6dd74de32 onMouseMove={onMouseMove}
6dd74de33 onMouseLeave={onMouseLeave}
818dc9034 >
6dd74de35 <style>{`
6dd74de36 .grove-logo-${styleId} {
6dd74de37 cursor: pointer;
6dd74de38 transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
6dd74de39 }
10621c540 .grove-logo-${styleId}:hover,
10621c541 .hover-row:hover .grove-logo-${styleId} {
6dd74de42 }
6dd74de43 .grove-logo-${styleId} .gl-bg {
6dd74de44 transition: fill 0.6s ease;
6dd74de45 }
10621c546 .grove-logo-${styleId}:hover .gl-bg,
10621c547 .hover-row:hover .grove-logo-${styleId} .gl-bg {
6dd74de48 filter: brightness(0.9);
6dd74de49 }
6dd74de50 .grove-logo-${styleId} .gl-tree {
6dd74de51 transform-origin: 30px 52px;
6dd74de52 transform: rotate(var(--sway, 0deg));
6dd74de53 transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
6dd74de54 }
10621c555 .grove-logo-${styleId}:hover .gl-tree,
10621c556 .hover-row:hover .grove-logo-${styleId} .gl-tree {
10621c557 transition: transform 0.15s ease-out;
10621c558 }
6dd74de59 .grove-logo-${styleId} .gl-branch {
6dd74de60 transition: stroke-width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
6dd74de61 }
10621c562 .grove-logo-${styleId}:hover .gl-b0, .hover-row:hover .grove-logo-${styleId} .gl-b0 { stroke-width: 4.5; transition-delay: 0s; }
10621c563 .grove-logo-${styleId}:hover .gl-b1, .hover-row:hover .grove-logo-${styleId} .gl-b1 { stroke-width: 3.5; transition-delay: 0.05s; }
10621c564 .grove-logo-${styleId}:hover .gl-b2, .hover-row:hover .grove-logo-${styleId} .gl-b2 { stroke-width: 3; transition-delay: 0.1s; }
10621c565 .grove-logo-${styleId}:hover .gl-b3, .hover-row:hover .grove-logo-${styleId} .gl-b3 { stroke-width: 2.5; transition-delay: 0.15s; }
6dd74de66 .grove-logo-${styleId} .gl-node {
6dd74de67 transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
6dd74de68 }
6dd74de69 .grove-logo-${styleId} .gl-n0 { transform-origin: 30px 52px; }
6dd74de70 .grove-logo-${styleId} .gl-n1 { transform-origin: 34px 8px; }
6dd74de71 .grove-logo-${styleId} .gl-n2 { transform-origin: 48px 23px; }
6dd74de72 .grove-logo-${styleId} .gl-n3 { transform-origin: 14px 33px; }
6dd74de73 .grove-logo-${styleId} .gl-n4 { transform-origin: 19px 11px; }
10621c574 .grove-logo-${styleId}:hover .gl-node, .hover-row:hover .grove-logo-${styleId} .gl-node { transform: scale(1.25); }
10621c575 .grove-logo-${styleId}:hover .gl-n0, .hover-row:hover .grove-logo-${styleId} .gl-n0 { transition-delay: 0s; }
10621c576 .grove-logo-${styleId}:hover .gl-n3, .hover-row:hover .grove-logo-${styleId} .gl-n3 { transition-delay: 0.05s; }
10621c577 .grove-logo-${styleId}:hover .gl-n2, .hover-row:hover .grove-logo-${styleId} .gl-n2 { transition-delay: 0.1s; }
10621c578 .grove-logo-${styleId}:hover .gl-n4, .hover-row:hover .grove-logo-${styleId} .gl-n4 { transition-delay: 0.15s; }
10621c579 .grove-logo-${styleId}:hover .gl-n1, .hover-row:hover .grove-logo-${styleId} .gl-n1 { transition-delay: 0.2s; }
6dd74de80 `}</style>
6dd74de81
6dd74de82 <circle cx="32" cy="32" r="32" fill="var(--accent)" className="gl-bg" />
6dd74de83
6dd74de84 <g className="gl-tree">
6dd74de85 <path className="gl-branch gl-b0" d="M30,52 C29,44 33,37 31,30 C29,23 32,16 34,8" stroke="white" strokeWidth="4" fill="none" strokeLinecap="round"/>
6dd74de86 <path className="gl-branch gl-b1" d="M32,31 C37,28 42,26 48,23" stroke="white" strokeWidth="3" fill="none" strokeLinecap="round"/>
6dd74de87 <path className="gl-branch gl-b2" d="M30,40 C25,37 20,35 14,33" stroke="white" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
6dd74de88 <path className="gl-branch gl-b3" d="M33,18 C29,15 24,13 19,11" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round"/>
6dd74de89
6dd74de90 <circle className="gl-node gl-n0" cx="30" cy="52" r="4" fill="white"/>
6dd74de91 <circle className="gl-node gl-n1" cx="34" cy="8" r="3.5" fill="white"/>
6dd74de92 <circle className="gl-node gl-n2" cx="48" cy="23" r="3.5" fill="white"/>
6dd74de93 <circle className="gl-node gl-n3" cx="14" cy="33" r="3" fill="white"/>
6dd74de94 <circle className="gl-node gl-n4" cx="19" cy="11" r="2.5" fill="white"/>
6dd74de95 </g>
818dc9096 </svg>
818dc9097 );
818dc9098}