refactor(ui): extract shared kinetic copy

frontend/src/features/account-panel/account-panel.css

@@ -173,41 +173,6 @@
   animation: auth-copy-enter 360ms 130ms var(--auth-ease-enter) both;
 }
 
-.auth-copy-cycle {
-  display: grid;
-  place-items: center;
-}
-
-.auth-copy-line {
-  display: block;
-  overflow: hidden;
-  min-height: 1.55em;
-}
-
-.auth-copy-line-inner {
-  display: block;
-  opacity: 0;
-  letter-spacing: 0.075em;
-  transform: translate3d(0, 120%, 0);
-  animation: auth-copy-line-enter 620ms var(--auth-ease-enter) forwards;
-  animation-delay: calc(210ms + var(--auth-line-index) * 90ms);
-}
-
-.auth-copy-cycle-resting .auth-copy-line-inner {
-  opacity: 1;
-  letter-spacing: -0.01em;
-  transform: translate3d(0, 0, 0);
-  animation: none;
-}
-
-.auth-copy-cycle-exiting .auth-copy-line-inner {
-  opacity: 1;
-  letter-spacing: -0.01em;
-  transform: translate3d(0, 0, 0);
-  animation: auth-copy-line-exit 400ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
-  animation-delay: calc((1 - var(--auth-line-index)) * 55ms);
-}
-
 .auth-register-fields {
   position: relative;
   z-index: 5;
@@ -725,35 +690,6 @@
   }
 }
 
-@keyframes auth-copy-line-enter {
-  0% {
-    opacity: 0;
-    letter-spacing: 0.075em;
-    transform: translate3d(0, 120%, 0);
-  }
-  100% {
-    opacity: 1;
-    letter-spacing: -0.01em;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes auth-copy-line-exit {
-  0% {
-    opacity: 1;
-    letter-spacing: -0.01em;
-    transform: translate3d(0, 0, 0);
-  }
-  46% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    letter-spacing: 0.045em;
-    transform: translate3d(0, -118%, 0);
-  }
-}
-
 @keyframes auth-form-exit {
   0% {
     opacity: 1;

frontend/src/features/account-panel/index.tsx

@@ -27,14 +27,14 @@ import { useNavigate, useSearchParams } from 'react-router'
 
 import { useAuthSession } from '@/features/auth-session'
 import { sanitizeInternalPath } from '@/shared/navigation'
+import { KineticCopy, type KineticCopyPhase } from '@/shared/ui'
 import messengerPigeon from '@/assets/auth/illustrations/messenger-pigeon.webp'
 
 import './account-panel.css'
 
 type AccountEntry = 'login' | 'register'
 type LoginMode = 'code' | 'password'
 type MotionDirection = 'forward' | 'backward'
-type CopyPhase = 'entering' | 'resting' | 'exiting'
 
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const CODE_PATTERN = /^\d{6}$/
@@ -129,36 +129,6 @@ function KineticTitle({ id, text, emphasis }: { id: string; text: string; emphas
   )
 }
 
-function KineticCopy({
-  lines,
-  copyKey,
-  phase,
-}: {
-  lines: readonly [string, string]
-  copyKey: string
-  phase: CopyPhase
-}) {
-  return (
-    <div
-      key={copyKey}
-      data-copy-phase={phase}
-      className={`auth-copy-cycle auth-copy-cycle-${phase}`}
-      aria-hidden="true"
-    >
-      {lines.map((line, index) => (
-        <span key={line} className="auth-copy-line">
-          <span
-            className="auth-copy-line-inner"
-            style={{ '--auth-line-index': index } as CSSProperties}
-          >
-            {line}
-          </span>
-        </span>
-      ))}
-    </div>
-  )
-}
-
 type AuthFieldProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
   label: string
   icon: Icon
@@ -247,7 +217,7 @@ function AccountPanelDialog({ entry }: { entry: AccountEntry }) {
   const [registerStep, setRegisterStep] = useState(0)
   const [motionDirection, setMotionDirection] = useState<MotionDirection>('forward')
   const [copyIndex, setCopyIndex] = useState(0)
-  const [copyPhase, setCopyPhase] = useState<CopyPhase>('entering')
+  const [copyPhase, setCopyPhase] = useState<KineticCopyPhase>('entering')
   const [isExiting, setIsExiting] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<string | null>(null)

frontend/src/shared/ui/index.ts

@@ -1,3 +1,5 @@
+export { KineticCopy } from './kinetic-copy'
+export type { KineticCopyPhase, KineticCopyProps } from './kinetic-copy'
 export { PageContainer } from './page-container'
 export type { PageContainerProps } from './page-container'
 export { Pagination } from './pagination'

frontend/src/shared/ui/kinetic-copy.css

@@ -0,0 +1,72 @@
+.auth-copy-cycle {
+  display: grid;
+  place-items: center;
+}
+
+.auth-copy-line {
+  display: block;
+  overflow: hidden;
+  min-height: 1.55em;
+}
+
+.auth-copy-line-inner {
+  display: block;
+  opacity: 0;
+  letter-spacing: 0.075em;
+  transform: translate3d(0, 120%, 0);
+  animation: auth-copy-line-enter 620ms var(--auth-ease-enter, cubic-bezier(0.16, 1, 0.3, 1))
+    forwards;
+  animation-delay: calc(210ms + var(--auth-line-index) * 90ms);
+}
+
+.auth-copy-cycle-resting .auth-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+}
+
+.auth-copy-cycle-exiting .auth-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: auth-copy-line-exit 400ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
+  animation-delay: calc((1 - var(--auth-line-index)) * 55ms);
+}
+
+@keyframes auth-copy-line-enter {
+  0% {
+    opacity: 0;
+    letter-spacing: 0.075em;
+    transform: translate3d(0, 120%, 0);
+  }
+  100% {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes auth-copy-line-exit {
+  0% {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: translate3d(0, 0, 0);
+  }
+  46% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    letter-spacing: 0.045em;
+    transform: translate3d(0, -118%, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .auth-copy-line-inner {
+    animation: none;
+    filter: none;
+    transform: none;
+  }
+}

frontend/src/shared/ui/kinetic-copy.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { KineticCopy } from './kinetic-copy'
+
+const kineticCopyStyles = readFileSync(resolve('src/shared/ui/kinetic-copy.css'), 'utf8')
+
+afterEach(() => {
+  cleanup()
+  document.head.querySelector('[data-kinetic-copy-styles]')?.remove()
+})
+
+describe('KineticCopy', () => {
+  it.each(['entering', 'resting', 'exiting'] as const)(
+    'renders both copy lines in the %s phase',
+    (phase) => {
+      const { container } = render(
+        <KineticCopy
+          lines={['继续搭建，', '属于你的角色世界。']}
+          copyKey="login-0"
+          phase={phase}
+        />,
+      )
+
+      const cycle = container.querySelector<HTMLElement>('[data-copy-phase]')
+      const lineInners = container.querySelectorAll<HTMLElement>('.auth-copy-line-inner')
+
+      expect(cycle?.dataset.copyPhase).toBe(phase)
+      expect(cycle?.className).toContain(`auth-copy-cycle-${phase}`)
+      expect(cycle?.getAttribute('aria-hidden')).toBe('true')
+      expect(screen.getByText('继续搭建，')).toBeTruthy()
+      expect(screen.getByText('属于你的角色世界。')).toBeTruthy()
+      expect(lineInners).toHaveLength(2)
+      expect(lineInners[0]?.style.getPropertyValue('--auth-line-index')).toBe('0')
+      expect(lineInners[1]?.style.getPropertyValue('--auth-line-index')).toBe('1')
+    },
+  )
+
+  it('provides entering motion timing outside the account panel', () => {
+    const style = document.createElement('style')
+    style.dataset.kineticCopyStyles = 'true'
+    style.textContent = kineticCopyStyles
+    document.head.append(style)
+
+    render(
+      <KineticCopy
+        lines={['继续搭建，', '属于你的角色世界。']}
+        copyKey="shared-0"
+        phase="entering"
+      />,
+    )
+
+    const lineRule = Array.from(style.sheet?.cssRules ?? []).find(
+      (rule) => 'selectorText' in rule && rule.selectorText === '.auth-copy-line-inner',
+    ) as CSSStyleRule | undefined
+
+    expect(lineRule?.style.animation).toMatch(
+      /var\(--auth-ease-enter,\s*cubic-bezier\(0\.16,\s*1,\s*0\.3,\s*1\)\)/,
+    )
+  })
+})

frontend/src/shared/ui/kinetic-copy.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'react'
+
+import './kinetic-copy.css'
+
+export type KineticCopyPhase = 'entering' | 'resting' | 'exiting'
+
+export type KineticCopyProps = {
+  lines: readonly [string, string]
+  copyKey: string
+  phase: KineticCopyPhase
+}
+
+export function KineticCopy({ lines, copyKey, phase }: KineticCopyProps) {
+  return (
+    <div
+      key={copyKey}
+      data-copy-phase={phase}
+      className={`auth-copy-cycle auth-copy-cycle-${phase}`}
+      aria-hidden="true"
+    >
+      {lines.map((line, index) => (
+        <span key={line} className="auth-copy-line">
+          <span
+            className="auth-copy-line-inner"
+            style={{ '--auth-line-index': index } as CSSProperties}
+          >
+            {line}
+          </span>
+        </span>
+      ))}
+    </div>
+  )
+}