2 files changed, 49 insertions, 14 deletions
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 914b0b6..c332432 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,11 @@ import '../styles/globals.scss';
 import type { AppPropsWithLayout } from '../types';
 import { settings } from '../utils/config';
 import { STORAGE_KEY } from '../utils/constants';
-import { AckeeProvider, PrismThemeProvider } from '../utils/providers';
+import {
+  AckeeProvider,
+  MotionProvider,
+  PrismThemeProvider,
+} from '../utils/providers';
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const { locale, defaultLocale } = useRouter();
@@ -20,21 +24,26 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       storageKey={STORAGE_KEY.ACKEE}
       tracking="full"
     >
-      <IntlProvider
-        locale={appLocale}
-        defaultLocale={defaultLocale}
-        messages={translation}
+      <MotionProvider
+        attribute={STORAGE_KEY.MOTION}
+        storageKey={STORAGE_KEY.MOTION}
       >
-        <ThemeProvider
-          defaultTheme="system"
-          enableColorScheme={true}
-          enableSystem={true}
+        <IntlProvider
+          locale={appLocale}
+          defaultLocale={defaultLocale}
+          messages={translation}
         >
-          <PrismThemeProvider>
-            {getLayout(<Component {...componentProps} />, {})}
-          </PrismThemeProvider>
-        </ThemeProvider>
-      </IntlProvider>
+          <ThemeProvider
+            defaultTheme="system"
+            enableColorScheme={true}
+            enableSystem={true}
+          >
+            <PrismThemeProvider>
+              {getLayout(<Component {...componentProps} />, {})}
+            </PrismThemeProvider>
+          </ThemeProvider>
+        </IntlProvider>
+      </MotionProvider>
     </AckeeProvider>
   );
 };
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
new file mode 100644
index 0000000..317d3af
--- /dev/null
+++ b/src/pages/_document.tsx
@@ -0,0 +1,26 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
+import { STORAGE_KEY } from '../utils/constants';
+
+// eslint-disable-next-line @typescript-eslint/no-shadow -- Required by NextJs
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <Script
+          dangerouslySetInnerHTML={{
+            __html: `!function(){const t=localStorage.getItem("${STORAGE_KEY.MOTION}"),e="string"==typeof t&&"true"===t;document.documentElement.setAttribute("data-${STORAGE_KEY.MOTION}",e)}();`,
+          }}
+          // eslint-disable-next-line react/jsx-no-literals
+          id="motion-hydration"
+          // eslint-disable-next-line react/jsx-no-literals
+          strategy="beforeInteractive"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}