84d1333284
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>
85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
/**
|
|
* AI Background Presets
|
|
*
|
|
* CSS-based gradient backgrounds that simulate AI-generated aesthetics.
|
|
* Each preset defines colors and animation parameters for dynamic backgrounds.
|
|
*/
|
|
|
|
export interface BackgroundPreset {
|
|
id: string;
|
|
name: string;
|
|
type: 'gradient' | 'mesh' | 'aurora';
|
|
colors: string[];
|
|
animation?: {
|
|
duration: number;
|
|
keyframes: string;
|
|
};
|
|
}
|
|
|
|
export const backgroundPresets: BackgroundPreset[] = [
|
|
{
|
|
id: 'cosmic-nebula',
|
|
name: 'Cosmic Nebula',
|
|
type: 'gradient',
|
|
colors: ['#6B46C1', '#4A5568', '#B83280', '#D946A6'],
|
|
animation: {
|
|
duration: 20,
|
|
keyframes: 'nebulaDrift',
|
|
},
|
|
},
|
|
{
|
|
id: 'ocean-waves',
|
|
name: 'Ocean Waves',
|
|
type: 'gradient',
|
|
colors: ['#0EA5E9', '#06B6D4', '#3B82F6', '#2DD4BF'],
|
|
animation: {
|
|
duration: 18,
|
|
keyframes: 'oceanFlow',
|
|
},
|
|
},
|
|
{
|
|
id: 'sunset-fire',
|
|
name: 'Sunset Fire',
|
|
type: 'gradient',
|
|
colors: ['#F59E0B', '#EF4444', '#EC4899', '#F97316'],
|
|
animation: {
|
|
duration: 22,
|
|
keyframes: 'sunsetGlow',
|
|
},
|
|
},
|
|
{
|
|
id: 'aurora-dreams',
|
|
name: 'Aurora Dreams',
|
|
type: 'aurora',
|
|
colors: ['#10B981', '#3B82F6', '#8B5CF6', '#06B6D4'],
|
|
animation: {
|
|
duration: 15,
|
|
keyframes: 'auroraShift',
|
|
},
|
|
},
|
|
{
|
|
id: 'midnight-mesh',
|
|
name: 'Midnight Mesh',
|
|
type: 'mesh',
|
|
colors: ['#1E293B', '#334155', '#475569', '#64748B'],
|
|
animation: {
|
|
duration: 25,
|
|
keyframes: 'meshPulse',
|
|
},
|
|
},
|
|
]
|
|
|
|
/**
|
|
* Get a random background preset
|
|
*/
|
|
export function getRandomPreset(): BackgroundPreset {
|
|
const index = Math.floor(Math.random() * backgroundPresets.length)
|
|
return backgroundPresets[index]
|
|
}
|
|
|
|
/**
|
|
* Get preset by ID (with fallback to random)
|
|
*/
|
|
export function getPresetById(id: string): BackgroundPreset {
|
|
return backgroundPresets.find(preset => preset.id === id) || getRandomPreset()
|
|
}
|