Shake animation

import { useId, useState, type FormEvent } from 'react';
import { useAnimate, useReducedMotion } from 'motion/react';

// Each swing is smaller than the last, like a head shaking "no".
const SHAKE_X = [0, -10, 10, -8, 8, -4, 4, 0];
const SHAKE = { duration: 0.45, ease: 'easeInOut' } as const;

type PasswordFormProps = {
  verify: (password: string) => Promise<boolean>;
};

export function PasswordForm({ verify }: PasswordFormProps) {
  const id = useId();
  const [scope, animate] = useAnimate<HTMLInputElement>();
  const [password, setPassword] = useState('');
  const [error, setError] = useState(false);
  const reduceMotion = useReducedMotion();

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (await verify(password)) return;
    setError(true);
    // With reduced motion, the red border and message carry the error alone.
    if (!reduceMotion) animate(scope.current, { x: SHAKE_X }, SHAKE);
  }

  return (
    <form onSubmit={onSubmit} className='flex w-72 flex-col gap-2'>
      <label htmlFor={id} className='text-sm font-medium'>
        Password
      </label>
      <input
        ref={scope}
        id={id}
        type='password'
        value={password}
        onChange={(event) => {
          setPassword(event.target.value);
          setError(false);
        }}
        aria-invalid={error}
        aria-describedby={error ? `${id}-error` : undefined}
        className='rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-red-500 aria-invalid:ring-red-500/30'
      />
      {error && (
        <p id={`${id}-error`} role='alert' className='text-sm text-red-600'>
          Incorrect password. Try again.
        </p>
      )}
      <button
        type='submit'
        className='mt-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
      >
        Sign in
      </button>
    </form>
  );
}