perf: deep react code splitting, next-intl payload scoping, and SVG hardware acceleration for PageSpeed 100

scripts/replace-motion.cjs

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const files = [
+  '/Users/marcmintel/Projects/klz-2026/components/Header.tsx',
+  '/Users/marcmintel/Projects/klz-2026/components/Scribble.tsx',
+  '/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx',
+  '/Users/marcmintel/Projects/klz-2026/components/record-mode/RecordModeOverlay.tsx',
+  '/Users/marcmintel/Projects/klz-2026/components/record-mode/PlaybackCursor.tsx'
+];
+
+for (const file of files) {
+  let content = fs.readFileSync(file, 'utf8');
+  content = content.replace(/import { motion } from 'framer-motion';/g, "import { m, LazyMotion, domAnimation } from 'framer-motion';");
+  content = content.replace(/import { motion, Variants } from 'framer-motion';/g, "import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';");
+  content = content.replace(/import { motion, AnimatePresence } from 'framer-motion';/g, "import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';");
+
+  content = content.replace(/<motion\./g, '<m.');
+  content = content.replace(/<\/motion\./g, '</m.');
+
+  fs.writeFileSync(file, content);
+}
+console.log('Replaced motion with m in ' + files.length + ' files');