LLM Landing Page Test

Comparativa de páginas generadas por distintos modelos de lenguaje

Tipo de test

Generación de Landing Page Interactiva Compleja

Evaluación de la capacidad del modelo para generar una página web completa y funcional en un único archivo HTML, incluyendo:

  • Complejidad técnica: Canvas API, Intersection Observer, CSS avanzado (glassmorphism, transforms 3D, animaciones)
  • Estructura: 11 secciones distintas con requisitos específicos cada una
  • Interactividad: Sistema de partículas, efectos 3D tilt, carruseles, formularios con validación
  • Buenas prácticas: Responsive design, accesibilidad (prefers-reduced-motion), optimización de rendimiento
  • Volumen de código: ~2000-4000 líneas de código esperadas
  • Modalidad: One-shot (generación en un único intento, sin correcciones)

Modelos probados

GLM 4.7 Flash 30B

Q4_1 GGUF

18,97 GB
Nemotron 3 Nano 30B

MLX 4bit

17,79 GB
Qwen 3 Coder 30B

MLX 4bit

17,19 GB

Prompt utilizado

Advanced Interactive Tech Startup Landing Page

Create a stunning, highly interactive single-page website for a futuristic AI/Tech startup using HTML, CSS, and JavaScript in a single file.

Core Design Philosophy:

- Futuristic, premium aesthetic combining glassmorphism, subtle gradients, and depth - Cinematic feel with smooth, orchestrated animations - Every interaction should feel intentional and polished - Use placeholder content (Lorem ipsum, https://picsum.photos for images)

Required Sections & Features:

1. Navigation Bar: - Transparent initially, becomes frosted glass (backdrop-filter: blur) on scroll - Smooth logo reveal animation on page load - Hamburger menu for mobile with full-screen animated overlay - Active section indicator that slides smoothly between nav items - Light/Dark mode toggle with animated sun-to-moon morphing icon - Theme preference saved to localStorage 2. Hero Section: - Interactive particle system background using Canvas API that responds to mouse movement - Large animated headline with staggered letter-by-letter reveal animation - Typing effect for rotating taglines (minimum 3 different phrases) - Floating 3D-looking geometric shapes using CSS transforms and animations - Primary CTA button with magnetic hover effect (button slightly follows cursor when nearby) - Animated scroll-down indicator 3. Stats/Metrics Section: - Animated number counters that trigger when scrolled into view (count up effect) - Each stat card with subtle floating animation (different timing for each) - Circular progress bars with animated fill on scroll 4. Services/Features Section: - Bento grid layout (asymmetric grid with different sized cards) - Cards with 3D tilt effect on hover (perspective transforms based on mouse position) - Icon animations on card hover - Staggered reveal animation when scrolling into view 5. Interactive Showcase/Portfolio: - Horizontal scroll section activated by vertical scrolling (scroll hijacking for this section only) - Project cards with image reveal effect on hover (clip-path animation) - Category filter tabs with animated underline indicator - Smooth filtering animation when switching categories (items fade and scale) 6. Testimonials Section: - 3D carousel that rotates in perspective - Auto-advancement with pause on hover - Drag/swipe support for manual navigation - Animated quotation marks using CSS 7. Team Section: - Circular image frames with animated gradient borders - On hover: image zoom + social links reveal with staggered animation - Subtle parallax effect on scroll 8. Pricing Section: - Three pricing cards with hover lift effect and shadow animation - Middle "Popular" card elevated with subtle glow effect - Toggle switch for Monthly/Yearly with animated price transition - Feature list with checkmark icons 9. FAQ Section: - Accordion with smooth max-height animation - Plus-to-X icon rotation animation on open/close - Minimum 5 questions with expandable answers 10. Contact Section: - Split layout: decorative animated graphic on left, form on right - Form inputs with animated floating labels (label moves up when focused/filled) - Real-time validation with visual feedback (red shake on error, green checkmark on valid) - Submit button with loading spinner state and success checkmark state - Fields: Name, Email, Subject (dropdown), Message (textarea) 11. Footer: - Wave SVG separator at top (simple path, not complex) - Newsletter subscription mini-form - Social icons with scale and color hover effects - Back-to-top button with circular progress indicator showing scroll position - Copyright text

Technical Requirements:

Animations & Interactions: - Use Intersection Observer API for all scroll-triggered animations - Use requestAnimationFrame for Canvas animations - CSS custom properties (variables) for theming - Use cubic-bezier easing for smooth, premium-feel animations - Implement prefers-reduced-motion: disable heavy animations when user prefers reduced motion Canvas Particle System Specifications: - 80-100 particles with varying sizes (1-3px) and opacity (0.3-0.8) - Draw connecting lines between particles within 100-150px proximity - Mouse interaction: particles gently move away from cursor within 100px radius - Particles move slowly in random directions, bouncing off canvas edges - Resize canvas on window resize 3D Tilt Effect Specifications: - Maximum rotation: 10-15 degrees on X and Y axes - Calculate rotation based on mouse position relative to card center - Add subtle glare/shine overlay that follows mouse position - Smooth transition (0.3s) on mouse enter and reset on mouse leave Performance Optimization: - Debounce scroll events (100ms) - Throttle mousemove events (16ms for 60fps) - Use Intersection Observer to pause off-screen animations - Use transform and opacity for animations (GPU accelerated) Responsive Design: - Mobile breakpoint: 768px - Use clamp() for fluid typography - Disable particle system on screens < 768px (static gradient instead) - Disable 3D tilt effects on touch devices - Hamburger menu for mobile navigation

External Resources:

<!-- Font Awesome 6 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet"> Important: - Use ONLY vanilla JavaScript (no libraries) - Use Font Awesome classes for ALL icons (e.g., <i class="fas fa-rocket"></i>) - Use picsum.photos for placeholder images (e.g., https://picsum.photos/400/300)

Color Palette:

Light Mode: --bg-primary: #f8fafc; --bg-secondary: #ffffff; --text-primary: #0f172a; --text-secondary: #334155; --accent-primary: #6366f1; --accent-secondary: #06b6d4; Dark Mode: --bg-primary: #0a0a0f; --bg-secondary: #12121a; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --accent-primary: #818cf8; --accent-secondary: #22d3ee;

Code Organization:

Structure the single file in this order: 1. <head> with meta tags, external CSS links, and <style> block 2. CSS organized by: variables, reset, utilities, components, sections, animations, responsive 3. <body> with semantic HTML (header, main, sections, footer) 4. <script> at end of body with organized functions The final result should feel like a premium, award-winning website with buttery smooth 60fps animations and thoughtful micro-interactions throughout.