Showcase de marca
Pruebas de micro-interacciones y piezas 3D. Pasa el cursor sobre los logos.
Comparativa de versiones · skanndar.top
La propia web como caso de uso: tres generaciones (Odoo → Next → Next + 3D). Cada versión es navegable en su subdominio (abre en pestaña nueva).
v1 Odoo Website CMS del propio ERP. Rápido de montar, genérico. Visitar →2023 | v2 Next.js Primera reescritura headless: diseño propio y control total. Visitar →2025 | v3● en vivo Next.js + 3D Experiencia scroll inmersiva con eclipse 3D. El front actual. Visitar →2026 | |
|---|---|---|---|
| Stack | Odoo 16 WebsiteQWebTema de plantilla | Next.jsReactTypeScriptTailwind | Next.js 15React Three FiberThree.jsFramer MotionGSAPLenisTailwind |
| Performance | — por medir | — por medir | — por medir |
| SEO | Básico del tema; arrastraba relleno de plantilla con datos de ejemplo. | SSR, metadatos propios y estructura limpia frente al tema de Odoo. | i18n es/en/ca con hreflang, sitemap, robots, canonical y Schema.org. |
| Experiencia | Layout de plantilla, sin animaciones propias ni identidad visual diferenciada. | Identidad de marca propia, UI limpia y responsive; sin 3D ni scroll-escenas. | Scroll inmersivo por escenas, eclipse 3D dirigido por scroll/ratón, transiciones tipo keynote, loader 3D y micro-interacciones. |
Logo · hover typewriter (composed)
Símbolo del eclipse (path real) + wordmark en texto light que se re-teclea letra a letra con caret subrayado intermitente. Estado de reposo = palabra completa.
light · 48px
ultralight · 48px
Logo · hover typewriter (crossfade)
En reposo muestra el LOGO SVG real (letras de marca exactas). Al hacer hover funde al símbolo + texto tecleado; el creciente queda clavado porque es el mismo path.
Loader · eclipse 3D
Indeterminado = creciente girando. Determinado = la luna transita hasta la totalidad y florece la corona al 100%. Salida con zoom agresivo hacia ti.