Envigite.dev
Menu
InicioHabilidadesProyectosTrayectoria
Creative

Minecraft Server Hub

Dashboard de onboarding para jugadores, gamificado con estética Pixel Art y micro-interacciones inmersivas.

Rol
Frontend Designer
Año
2025
Stack
6+ Techs
Estado
En Producción

Stack Tecnológico

Next.js (Client Components)Framer MotionTailwind CSSGamificationUX DesignLucide React

La Historia

Gestionar un servidor privado para amigos y familia conlleva un problema logístico recurrente: el soporte técnico. Me cansé de enviar la IP, la lista de mods y las instrucciones de instalación por WhatsApp cada vez que alguien quería unirse. Decidí solucionar esto creando un "Hub" centralizado que no solo fuera informativo, sino que extendiera la experiencia de juego al navegador. Técnicamente, el reto no era la complejidad lógica, sino la fidelidad estética y la "sensación de juego" (Game Feel). Aproveché la flexibilidad de Tailwind CSS para recrear la interfaz de usuario de Minecraft (bordes nítidos, sombras duras, paleta de colores específica) sin depender de imágenes pesadas. Utilicé Framer Motion para orquestar la entrada de elementos y gestionar las micro-interacciones, haciendo que los botones se sientan "clicky" y receptivos, imitando la respuesta del menú del juego real. El resultado es una Single Page Application (SPA) dentro de mi portafolio que eliminó la fricción de entrada para nuevos jugadores. Integra la API del portapapeles para copiar la IP con un solo toque y guía al usuario paso a paso en la instalación de Fabric. Es un ejemplo de cómo una UI temática bien ejecutada puede transformar una página de instrucciones aburrida en una experiencia memorable.

Galería

Captura web 0

El Desafío

  • Replicar fielmente la estética 'Blocky' y Pixel Art de Minecraft utilizando exclusivamente CSS moderno (Borders y Box Shadows) para mantener el rendimiento.
  • Orquestar animaciones de entrada escalonadas (Staggered Animation) con Framer Motion para dar una sensación cinematográfica al cargar.
  • Implementar una UX robusta para la copia de IP (Clipboard API) con feedback visual inmediato y manejo de errores.
  • Asegurar la legibilidad de fuentes 'Pixel' (Press Start 2P) en diferentes resoluciones y dispositivos móviles.
  • Integrar video de fondo en loop sin afectar la métrica de 'First Contentful Paint' ni el rendimiento del scroll.

La Solución

  • Estética inmersiva fiel al videojuego (UI Theming)
  • Copia de IP 'One-Click' con feedback animado
  • Micro-interacciones táctiles en botones y tarjetas
  • Guía de instalación paso a paso integrada
  • Fondo de video dinámico optimizado
  • Tipografía customizada (Google Fonts) para inmersión total
  • Diseño totalmente responsivo (Mobile-First)

Ingeniería & Arquitectura

Interactive Client Components

Uso de la directiva 'use client' de Next.js para habilitar interactividad avanzada (Hooks, Browser APIs) manteniendo una carga inicial rápida.

Utility-First Theming

Construcción de un sistema de diseño ad-hoc usando clases de utilidad de Tailwind para bordes complejos y sombras sólidas (Hard Shadows).

Motion Orchestration

Uso de variantes de Framer Motion para sincronizar la aparición de elementos UI con la carga del video de fondo.