feat: view transition

Signed-off-by: Innei <[email protected]>

Author: Innei

global.d.ts

@@ -13,7 +13,18 @@ declare global {
     } & P &
       PropsWithChildren
   >
+
+  // TODO should remove in next TypeScript version
+  interface Document {
+    startViewTransition(callback?: () => void | Promise<void>): ViewTransition
+  }
+
+  interface ViewTransition {
+    finished: Promise<void>
+    ready: Promise<void>
+    updateCallbackDone: () => void
+    skipTransition(): void
+  }
 }
 
- 
 export {}

next.config.mts

@@ -17,7 +17,9 @@ const isProd = process.env.NODE_ENV === 'production'
 let nextConfig: NextConfig = {
   experimental: {
     appDir: true,
+    serverComponentsExternalPackages: ['socket.io-client', 'ws'],
   },
+
   webpack: (config, options) => {
     if (
       process.env.SENTRY === 'true' &&
@@ -26,10 +28,6 @@ let nextConfig: NextConfig = {
     ) {
       config.plugins.push(
         sentryWebpackPlugin({
-          include: '.next',
-          ignore: ['node_modules', 'cypress', 'test'],
-          urlPrefix: '~/_next',
-
           org: 'inneis-site',
           headers: {
             Authorization: `DSN ${process.env.NEXT_PUBLIC_SENTRY_DSN}`,

package.json

@@ -52,6 +52,7 @@
     "@tanstack/react-query": "4.29.12",
     "@tanstack/react-query-devtools": "4.29.12",
     "@tanstack/react-query-persist-client": "4.29.12",
+    "@uidotdev/usehooks": "2.0.1",
     "axios": "1.4.0",
     "clsx": "1.2.1",
     "daisyui": "3.1.0",

pnpm-lock.yaml

@@ -1,9 +1,13 @@
 'use client'
 
+import { useCallback } from 'react'
+import { atom } from 'jotai'
 import { useTheme } from 'next-themes'
 import { tv } from 'tailwind-variants'
 
 import { useIsClient } from '~/hooks/common/use-is-client'
+import { isUndefined } from '~/lib/_'
+import { jotaiStore } from '~/lib/store'
 
 const styles = tv({
   base: 'rounded-inherit inline-flex h-[32px] w-[32px] items-center justify-center border-0 text-current',
@@ -82,9 +86,17 @@ const DarkIcon = () => {
     </svg>
   )
 }
+
+const mousePositionAtom = atom({ x: 0, y: 0 })
 export const ThemeSwitcher = () => {
+  const handleClient: React.MouseEventHandler = useCallback((e) => {
+    jotaiStore.set(mousePositionAtom, {
+      x: e.clientX,
+      y: e.clientY,
+    })
+  }, [])
   return (
-    <div className="relative inline-block">
+    <div className="relative inline-block" onClick={handleClient}>
       <ButtonGroup />
       <ThemeIndicator />
     </div>
@@ -95,6 +107,7 @@ const ThemeIndicator = () => {
   const { theme } = useTheme()
 
   const isClient = useIsClient()
+
   if (!isClient) return null
   if (!theme) return null
   return (
@@ -109,6 +122,53 @@ const ThemeIndicator = () => {
 
 const ButtonGroup = () => {
   const { setTheme } = useTheme()
+
+  const buildThemeTransition = (theme: 'light' | 'dark') => {
+    if (
+      !('startViewTransition' in document) ||
+      window.matchMedia(`(prefers-reduced-motion: reduce)`).matches
+    ) {
+      setTheme(theme)
+      return
+    }
+
+    const $document = document.documentElement
+
+    const mousePosition = jotaiStore.get(mousePositionAtom)
+    const { x, y } = mousePosition
+
+    if (isUndefined(x) && isUndefined(y)) return
+
+    const endRadius = Math.hypot(
+      Math.max(x, window.innerWidth - x),
+      Math.max(y, window.innerHeight - y),
+    )
+
+    document
+      .startViewTransition(() => {
+        setTheme(theme)
+        return Promise.resolve()
+      })
+      ?.ready.then(() => {
+        if (mousePosition.x === 0) return
+        const clipPath = [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ]
+
+        $document.animate(
+          {
+            clipPath,
+          },
+          {
+            duration: 300,
+            easing: 'ease-in',
+            pseudoElement: '::view-transition-new(root)',
+          },
+        )
+      })
+  }
+
   return (
     <div
       role="radiogroup"
@@ -123,7 +183,7 @@ const ButtonGroup = () => {
         type="button"
         className={styles({})}
         onClick={() => {
-          setTheme('light')
+          buildThemeTransition('light')
         }}
       >
         <SunIcon />
@@ -151,7 +211,7 @@ const ButtonGroup = () => {
         role="radio"
         type="button"
         onClick={() => {
-          setTheme('dark')
+          buildThemeTransition('dark')
         }}
       >
         <DarkIcon />

src/components/ui/theme-switcher/ThemeSwitcher.tsx

@@ -55,3 +55,6 @@ export const throttle = <F extends (...args: any[]) => any>(
     }
   }
 }
+
+export const isUndefined = (val: any): val is undefined =>
+  typeof val === 'undefined'

src/lib/_.ts

@@ -16,35 +16,27 @@ html {
 
 ::selection {
   background-color: var(--theme-color);
-  color: theme(colors.neutral-content);
-}
-
-html.dark {
-  --border-color: #333;
-}
-
-@media (prefers-color-scheme: dark) {
-  html.not(.light) {
-    --border-color: #333;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  html.not(.dark) {
-    --border-color: #eee;
-  }
+  color: theme(colors.always.white);
 }
 
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;
   mix-blend-mode: normal;
 }
-
-.dark::view-transition-old(root) {
+::view-transition-old(root) {
   z-index: 9999;
 }
-
-.dark::view-transition-new(root) {
+::view-transition-new(root) {
+  z-index: 1;
+}
+[data-theme='dark']::view-transition-old(root) {
   z-index: 1;
 }
+[data-theme='dark']::view-transition-new(root) {
+  z-index: 9999;
+}
+
+[data-theme='light']::view-transition-new(root) {
+  z-index: 9999;
+}