Initialisieren

components/deferred-scroll-flourishes.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+
+const ScrollFlourishes = dynamic(() => import("@/components/scroll-flourishes"), {
+  ssr: false,
+});
+
+/** Die dekorativen, aufwändigen Ranken sind nur auf größeren Displays sinnvoll. */
+export default function DeferredScrollFlourishes() {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const query = window.matchMedia(
+      "(min-width: 768px) and (prefers-reduced-motion: no-preference)",
+    );
+    const update = () => setEnabled(query.matches);
+
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  return enabled ? <ScrollFlourishes /> : null;
+}