Quinn Ftw 84d1333284 feat(landing): complete migration with glassmorphism navigation

Migrate landing app from egirl-platform with full feature parity:
- 18 routes verified (all HTTP 200)
- 200 E2E tests passing, 71/74 unit tests passing
- 8 languages in FAB selector (en/es translated, others fallback)

Add ThemeProvider to App.tsx for styled-components theme context.
Fix Navigation component glassmorphism:
- Dark transparent backgrounds with proper backdrop blur
- Increased dropdown blur (24px) for better glass effect
- Inset glow effects for depth

Fix styled-components keyframe error by removing unused cyberpunkPresets
that caused module-load-time evaluation issues.

Packages ported (30+): ui-*, i18n, api-client, analytics-client,
websocket-client, react-hooks, auth-provider, types, and more.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2025-12-26 17:11:07 -08:00

2 KiB

Raw Blame History

@lilith/ui-accessibility

React hooks for accessibility features and device detection.

Installation

pnpm add @lilith/ui-accessibility

Features

🎯 Zero dependencies - Only peer dependencies on React
♿ Accessibility-first - Respects user preferences
📱 Device detection - Touch vs mouse optimization
🎨 Framework agnostic - Works with any React setup
📦 Tiny bundle - Minimal overhead

Hooks

`useReducedMotion()`

Detects if the user has enabled "reduced motion" in their OS accessibility settings.

import { useReducedMotion } from '@lilith/ui-accessibility'
import { motion } from 'framer-motion'

function AnimatedComponent() {
  const prefersReducedMotion = useReducedMotion()

  return (
    <motion.div
      animate={prefersReducedMotion ? {} : { x: 100, opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Content
    </motion.div>
  )
}

`useTouchDevice()`

Detects if the device supports touch input.

import { useTouchDevice } from '@lilith/ui-accessibility'

function InteractiveElement() {
  const isTouchDevice = useTouchDevice()

  return (
    <button
      style={{
        minHeight: isTouchDevice ? '44px' : '32px', // Larger touch targets
        cursor: isTouchDevice ? 'pointer' : 'default'
      }}
    >
      {isTouchDevice ? 'Tap' : 'Click'} me
    </button>
  )
}

Best Practices

Respecting Reduced Motion

Always check useReducedMotion() before applying:

Parallax scrolling effects
Particle animations
Auto-playing videos
Rapid color changes
Any motion that could cause discomfort

Touch-Friendly Design

When useTouchDevice() returns true:

Increase touch target size (minimum 44x44px)
Remove hover-dependent interactions
Simplify complex gestures
Consider mobile-first layouts

Browser Support

These hooks use standard Web APIs supported by all modern browsers:

matchMedia() for reduced motion detection
ontouchstart, maxTouchPoints, and media queries for touch detection

2 KiB Raw Blame History