This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing
What I Built
Nightmare Realm 2025 - A production-ready Halloween landing page featuring AI-generated visuals, multi-language support, and advanced animations. Built with vanilla HTML/CSS/JS (no frameworks) to demonstrate enterprise-grade frontend architecture.
Key Features:
- AI-Powered Visuals: Integration points for Imagen 4.0 (images) and Veo 3 Fast (video) with secure server-side architecture
- Multi-Language System: Full i18n with 5 languages (EN, ZH, JA, ES, FR) including RTL considerations
- Dynamic Hero Animation: Elements animate from multiple directions with staggered timing
- Typography: Creepster + Cinzel + Inter font system creating horror-elegance
- Performance: Sub-40KB initial load, Intersection Observer for animations, throttled parallax
- Security: Demonstrates proper API key handling (never client-side)
- Color Palette: Orange (#ff4500), black, gold (#ffd700), green (#7fff00), red (#dc143c) - no pink/violet/blue
Demo
Journey
Architecture First: Created a secure wrapper pattern for AI services. The AIGenerationService class demonstrates how to call server-side endpoints that safely store API keys in environment variables.
Multi-Language: Built a lightweight i18n manager that caches translations and persists user preference. Handles complex scripts (Chinese/Japanese) with proper font fallbacks.
Animation System: Combined CSS keyframes for hero entrance with Intersection Observer for scroll-triggered reveals. Each element has unique timing and direction.
Typography: Charged Creepster for horror impact, Cinzel for medieval elegance, Inter for readability. Maintained 4.5:1 contrast ratios even with complex gradients.
Thanks for reading
Top comments (0)