update component

example/src/components/SliceHero/SliceHero.tsx

@@ -1,28 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { GenThreeShader } from "../GenThreeShader";
 import { wavesShader } from "../GenThreeShader/shaders/wavesShader";
-import { logotype } from "../SvgHeader/logotype";
+import { SvgHeader } from "../SvgHeader";
 
 export function SliceHero() {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [scale, setScale] = useState(1);
-
-  useEffect(() => {
-    const updateScale = () => {
-      if (!containerRef.current) return;
-      const { width } = containerRef.current.getBoundingClientRect();
-      // Adjust these values to control how the logo scales
-      const baseWidth = 208; // Original SVG width
-      const newScale = width / baseWidth;
-      setScale(newScale);
-    };
-
-    updateScale();
-    window.addEventListener("resize", updateScale);
-    return () => window.removeEventListener("resize", updateScale);
-  }, []);
 
   return (
     <section
@@ -47,29 +31,7 @@ export function SliceHero() {
           }}
         />
       </div>
-      <svg
-        className="absolute bottom-0 w-full aspect-[23.6/9]"
-        viewBox="0 0 208 79"
-        preserveAspectRatio="xMidYMid meet"
-        vectorEffect={"non-scaling-stroke"}
-      >
-        <defs>
-          <mask id="logotypeMask">
-            <g transform={`translate(0, ${20 * scale}) scale(${scale})`}>
-              <path d={logotype} fill="white" transform="translate(0, -10)" />
-            </g>
-          </mask>
-        </defs>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d={logotype}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={0.2}
-          strokeDasharray={0.75}
-        />
-      </svg>
+      <SvgHeader containerRef={containerRef} />
     </section>
   );
 }

example/src/components/SvgHeader/SvgHeader.tsx

@@ -1,28 +1,55 @@
 "use client";
 
-import { motion } from "framer-motion";
+import clsx from "clsx";
+import { RefObject, useEffect, useState } from "react";
 import { logotype } from "./logotype";
 
 type SvgHeaderProps = {
   className?: string;
+  containerRef: RefObject<HTMLDivElement>;
 };
 
-const SvgHeader = ({ className }: SvgHeaderProps) => (
-  <motion.svg
-    viewBox="0 0 208 79"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d={logotype}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={0.5}
-      strokeDasharray={1}
-    />
-  </motion.svg>
-);
+const SvgHeader = ({ className, containerRef }: SvgHeaderProps) => {
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    const updateScale = () => {
+      if (!containerRef.current) return;
+      const { width } = containerRef.current.getBoundingClientRect();
+      // Adjust these values to control how the logo scales
+      const baseWidth = 208; // Original SVG width
+      const newScale = width / baseWidth;
+      setScale(newScale);
+    };
+
+    updateScale();
+    window.addEventListener("resize", updateScale);
+    return () => window.removeEventListener("resize", updateScale);
+  }, []);
+  return (
+    <svg
+      className={clsx("absolute bottom-0 w-full aspect-[23.6/9]", className)}
+      viewBox="0 0 208 79"
+      preserveAspectRatio="xMidYMid meet"
+      vectorEffect={"non-scaling-stroke"}
+    >
+      <defs>
+        <mask id="logotypeMask">
+          <g transform={`translate(0, ${20 * scale}) scale(${scale})`}>
+            <path d={logotype} fill="white" transform="translate(0, -10)" />
+          </g>
+        </mask>
+      </defs>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d={logotype}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={0.2}
+        strokeDasharray={0.75}
+      />
+    </svg>
+  );
+};
 export default SvgHeader;