##Descripción General del Proyecto
The Gridcn es una biblioteca de componentes y sistema de temas construido sobre shadcn/ui, diseñado para crear interfaces de usuario futuristas inspiradas en Tron. Combina la fiabilidad de shadcn/ui con un estilo visual distintivo y elementos 3D interactivos.
Su lema — "A Tron-inspired theme and component library for shadcn/ui with Greek god color schemes, 3D effects, and HUD-style UI elements" — resume la esencia del proyecto: llevar la estética cyberpunk y neón a componentes reutilizables y listos para producción.
##Contexto y Motivación del Proyecto
La motivación detrás de The Gridcn surge de la necesidad de ofrecer temas visuales más atrevidos y llamativos dentro del ecosistema de shadcn/ui. Mientras que la mayoría de bibliotecas de componentes optan por diseños minimalistas y neutros, The Gridcn apuesta por una estética futurista con efectos de neón, líneas de escaneo y elementos HUD que transforman cualquier interfaz en una experiencia visual inmersiva.
##Características Principales
-
+50 Componentes Pre-estilizados: Una amplia colección de componentes UI completamente tipados con TypeScript que se integran de forma transparente con proyectos existentes de shadcn/ui.
-
Sistema de Temas con Dioses Griegos: Seis esquemas de color únicos inspirados en dioses griegos — Ares, Tron, Clu, Athena, Aphrodite y Poseidon — utilizando el espacio de color oklch() para un control preciso del color.
-
Efectos Visuales: Utilidades de brillo neón, animaciones de líneas de escaneo y componentes 3D potenciados por Three.js (Grid3D, Tunnel, GodAvatar), importados dinámicamente para no impactar el rendimiento ni el tamaño del bundle inicial.
-
Niveles de Intensidad Personalizables: Control sobre la intensidad de los efectos visuales, permitiendo ajustar la experiencia desde sutil hasta completamente inmersiva.
##Tecnologías Utilizadas
- React y TypeScript para la base de componentes
- Tailwind CSS para el sistema de estilos
- shadcn/ui como fundación de componentes
- Three.js para los elementos 3D interactivos
##Compatibilidad
El proyecto es completamente gratuito y open-source, compatible con múltiples frameworks de React incluyendo Next.js, Vite, Remix y Astro. Se instala directamente en los proyectos como código fuente en lugar de como dependencia, dando a los desarrolladores control total de personalización.
Enlace al proyecto: thegridcn.com