Plant Cerebro
← temas
temaabiertoelevar-concienciaGabriel Busso29/10

Diseño y Animaciones del Dashboard de Plant Hub (stock-vivet)

<!-- ESTADO-VIVO:INICIO -->

⚡ ÚLTIMO ESTADO VIVO (Actualizado: 2026-10-29 16:57 · Orden Cronológico Inverso: Más Nuevo Arriba)

<!-- ESTADO-VIVO:FIN -->

Creado el 2026-10-28 a partir de la directiva de Gabriel sobre el Reel https://www.instagram.com/reel/DfCWtPgPcfP/ («Así y mejor tiene que tener efectos animación Dashboard del futuro plant hub»).

1. Deconstrucción Técnica y Visual del Referente (Moorly · @_code_and_chill_)

El Reel (DfCWtPgPcfP, 6,20 segundos a 30 fps) muestra el portal Moorly y expone al pie el código fuente real (src/voyage.tsx). Sus 6 pilares visuales y de animación son:

  1. Paleta Bitemática Orgánica (Dark Emerald Forest ↔ Light Ice Mint):
  1. 4 KPI Cards con Tinte Semántico Propio + Sparklines Vivos:
  1. Gráfico Principal con Crosshair Magnético + Segmented Morphing (Premium | Commission | Policies):
  1. Bandeja Derecha «Waiting on you» (Acción Inmediata por Urgencia):
  1. El Efecto Estrella (src/voyage.tsx) · Ruta Curva SVG con Física Tangencial (getPointAtLength + Math.atan2):

```tsx

const L = prog.current.L;

const p = base.current.getPointAtLength(L);

const q = base.current.getPointAtLength(L + 2);

const ang = Math.atan2(q.y - p.y, q.x - p.x) * 180 / Math.PI;

gsap.set(boat.current, { x: p.x, y: p.y, rotation: ang * 0.6 });

done.current.setAttribute('stroke-dasharray', ${L} ${total});

```

  1. Simulador en Vivo con Sliders (Quote builder · re-rates as you move):

2. Cómo lo Superamos en el Dashboard del Futuro Plant Hub (stock-vivet)

Llevamos cada uno de los 6 efectos de Moorly al dominio real de Plant / Vívet SRL y los superamos con 7 mejoras de ingeniería visual:

1. Identidad Visual «Biophilic Haute Glass» (Bosque Vívet #061510 ↔ Cristal Botánico #F2FAF6)

2. «Ruta Viva de Orden / Logística / OC» con Física Tangencial (src/components/ui/VoyageRoute.tsx)

  1. Compras y Abastecimiento (OCs a Proveedores): La ruta curva muestra Emitida → Aprobada → En Camino → Recibida en Ezeiza → Factura Conciliada → E-Cheq Emitido, con el camión/envase animado inclinándose sobre la curva según los días reales de Lead Time (ocs:camino) y pulsando en rojo si hay una NC sin imputar o diferencia contra Contabilium/ARCA.
  2. Rutas de Choferes en Vivo (Ezeiza → CABA/GBA): El recorrido de cada camioneta sobre la curva de paradas con el avance porcentual de entregas en tiempo real.
  3. Importaciones / Planta Brasil (Brigatta → Paso de los Libres → Ezeiza): El tránsito de cada lote de envases Tetra 1L por aduana y transporte.

3.Las 4 Super-Tarjetas KPI con Micro-Clima Cromático, Odómetro Spring y Sparkline Interactivo

4. Gráfico Central «Pulso Multicanal» con Morphing de Curvas (Ventas | Caja & E-Cheqs | Stock & Quiebres | margen ML)

5. Bandeja Derecha «Esperando tu Decisión (Waiting on you)» Conectada en Vivo

6. Simulador Táctil en Vivo («Re-rates as you move»)

7. Transiciones Cinematográficas de Vista (View Transitions API + Staggered Kanban + Text Mask Reveal)

Novedades Recientes

━━━━━━━━━━━━━━

Ya extrajimos los cuadros del Reel (*portal Moorly de @_code_and_chill_*) y dejamos documentada la ingeniería exacta en plant-cerebro para llevarlo (y superarlo) en el Dashboard de *Plant Hub*:

*1. Los 5 efectos clave del Reel que tomamos como base*

• *Bitemático «Dark Emerald Forest (#071412) ↔ Light Ice Mint (#F0FAF8)»*: Fondo verde bosque profundo con *halo ambiental cálido (ámbar/dorado difuminado)* detrás del saludo y ondas topográficas SVG sutiles en el fondo, con transición suave a modo claro.

• *Las 4 KPI Cards con Micro-Clima de Color + Sparklines SVG*: Cada tarjeta superior tiene su propio gradiente interno diagonal (*Esmeralda, Ámbar, Cian Petróleo y Terracota*), odómetro animado y mini-curva spline sombreada abajo a la derecha.

• *Curva Principal con Crosshair Magnético + Columna «Esperando tu decisión»*: Gráfico spline que hace *morphing* suave al cambiar de pestaña, acompañado a la derecha por la bandeja accionable con badges de tiempo real (en 2 días, atrasado).

• *El Efecto Estrella (voyage.tsx con GSAP + getPointAtLength + Math.atan2)*: Una ruta curva SVG donde el progreso se dibuja en 1.25s y el pin se desliza físicamente *inclinando su ángulo según la pendiente real de la curva*.

• *Simulador en Vivo («Re-rates as you move»)*: Sliders que al arrastrarlos recalculan y animan las cifras grandes en tiempo real sin recargar nada.

*2. Cómo lo llevamos a un nivel superior en Plant Hub*

• *Trayectoria Curva Viva (VoyageRoute) en los 3 flujos reales de Plant*:

  1. *Ciclo de Orden de Compra (Emitida → En Camino → Recibida Ezeiza → Factura Conciliada → E-Cheq)*, donde el nodo se frena y pulsa en ámbar si detecta una NC sin descontar (como los $9,7M de Sri Sri).
  2. *Rutas de Choferes en vivo* (Ezeiza → CABA/GBA).
  3. *Tránsito Comex Brasil* (Brigatta → Paso de los Libres → Ezeiza).

• *Sliders Táctiles de Caja y Stock*: Arrastrar en vivo *Días de Cobertura (14d → 7d)* o *Precio/Comisión ML* y ver cómo el odómetro de *Caja Liberada (+$118,6M)* y el gráfico principal se re-dibujan en el acto a 60 fps.

¿Querés que ya armemos el *prototipo interactivo navegable (y lo inyectemos en la home de Plant Hub)* con esta estética y estos 5 efectos en vivo? · 🔗 vivet-brasil, radar-marketing, salud-dental-alineadores, leche-vivet-brigatta, importacion-vivet-brasil, monitores-planter, sellers-marcas-portal, plant-cyber-2026, embargo-agip-bna-comex, flujo-multicanal-super-cerebro, camaras-frio-ezeiza-reemplazo-compresor, motor-cognitivo-12-procesos, motor-compras-2-0-plan-maestro-noviembre, mercado-libre-flex-congelados-simulador-mcp, cotizacion-castanas-engelmann-vivet, arquitectura-agentes-anthropic-plant, activacion-patrimonio-camaras-tixo-vivet, auto-calculo-compras-reposicion-stock, importacion-castanas-usibras-brasil, comex-importacion-castanas-engelmann, plant-hub, monitores-plantinterno #marca:brigatta #marca:sri-sri · 2026-10-28

8. Master Dashboard Publicado en Producción (Opus 5.5 · XHigh Engine)

  1. Motor Bitemático (Dark Emerald Forest #081815 ↔ Light Ice Mint #F0FAF8): Toggle instantáneo con ondas topográficas SVG y resplandor ámbar/esmeralda detrás del saludo.
  2. Selector Vivo de 6 Roles / Puestos:
  1. Integración de Monitores plant-interno Dentro de Plant Hub: Visor embebido en un clic (Pulso & Objetivos, Monitor Planter Full 2.0, Simulador Compras 14d→7d, Vigía Pagos & E-Cheqs).
  2. Motor VoyageRoute™ (Física exacta de Reel DfCWtPgPcfP): Curva SVG orgánica animada en 1.25s (easeInOutCubic) con getPointAtLength(L) y rotación tangencial Math.atan2(q.y - p.y, q.x - p.x) * 180 / Math.PI * 0.6.
  3. Gráfico Spline Multicanal + Crosshair Magnético + Simulador Vivo («Re-rates as you move»): Sliders interactivos que recalculan Caja Liberada, Neto Viernes y EBITDA Mes a 60 fps deformando la curva en tiempo real.

9. Rehecho con la identidad Plant · «Cabina Maestra» (28-oct-2026, 23:45)

La sección 8 quedó superada: la versión «Dark Emerald Forest» usaba paleta verde ajena a la marca, Fraunces/Plus Jakarta y emojis en los roles. Se rehízo entera sobre el manual (manual.plantinterno.com) y masters/master_marcas.html.

Novedades Recientes

━━━━━━━━━━━━━━

🔗 *Mismo link actualizado en vivo*:

https://muestras.plantinterno.com/d/plant-hub-master-dashboard

*1. Recibo de ejecución real del CLI de Claude Code (Regla 8)*

• *Binario ejecutado*: claude -p --model opus --effort max

• *Modelo canónico devuelto en el JSON*: claude-opus-5-5 (session_id: 40ee484a-28ea-461d-a468-3875b42b6b30, 138 turns, 206.935 thinkingTokens, 311.750 outputTokens).

*2. Qué cambió al leer manual.plantinterno.com + masters/master_marcas.html + los 6 cuadros del Reel*

• *Logos oficiales Plant® con flor de 8 pétalos*: Embebidos en blanco para modo oscuro (#07070B) y en negro para modo claro (#F4F4F7).

• *Cero emojis Unicode (emojiCount: 0)*: 100% íconos vectoriales <svg> de trazo fino (stroke-width: 1.5).

• *Paleta, tipografía y números 100% Plant*: --lila #AFAFFA, --lila-deep #7A7AF0, --aqua-deep #88E0DA, --lima #EEFF41, --naranja #FF5014, firma editorial con 1 palabra en itálica (Buenas noches, Gaby. / Alimentos Villares S.A.), grano feTurbulence al 4% y formato argentino $ 410,9M con tabular-nums.

• *Las 5 vistas y animaciones GSAP del Reel*: *Resumen*, *Pipeline* (Kanban 5 etapas), *Trayectoria* (curva Bezier GSAP con getPointAtLength + inclinación tangencial Math.atan2), *Simulador* (sliders en vivo a 60fps) y *Monitores* (conectado a los 15 monitores reales de plantinterno.com). · 🔗 vivet-brasil, acuerdos-comerciales, radar-marketing, lunes-05-octubre-plan-ejecucion-gaby, mercado-libre-flex-congelados-simulador-mcp, auto-calculo-compras-reposicion-stock, monitores-plantinterno · 2026-10-28

Novedades Recientes

━━━━━━━━━━━━━━

Tenías toda la razón Gaby: cuando hoy a la mañana adaptamos las 86 rutas de admin-staging, habíamos pisado la versión futurista del Reel con la estructura plana actual y por eso entre el botón 1 y el 2 casi no cambiaba nada.

Acabamos de unificar el motor completo de Claude Opus 5.5 (session_id: 40ee484a-28ea-461d-a468-3875b42b6b30 + 5c623a84-f56b-48f8-b4c5-08d29f67162c) y ya está publicado en vivo abriendo *por defecto en el Nuevo Diseño Futurista Beta*:

🔗 https://muestras.plantinterno.com/d/plant-hub-master-dashboard

*1. Qué cambió de forma abismal (mirá la comparativa 1 vs. 2 en la imagen)*

• *Barra Lateral -> Floating Liquid Glass Icon Dock (#futuristic-dock)*: desapareció la lista plana gris y ahora tenés a la izquierda un Dock flotante de vidrio líquido con indicador luminoso morfable (cubic-bezier(0.22, 1, 0.36, 1)) para saltar en 1 clic entre *Cabina CEO*, *Portales & 86 Rutas*, *Pipeline*, *Trayectoria Bezier* y *Simulador 60fps*.

• *Buscador Protagonista Gigante en el Centro Superior (#hero-omnibar)*: bien arriba y al centro, con haz de luz perimetral en movimiento (*Border Beam* en lila, aqua y lima), que filtra en vivo mientras escribís con animación escalonada entre los *21 portales de plantinterno.com* y las *86 pantallas reales de admin-staging.plant.com.ar*, más píldoras rápidas (*Todo 107*, *En Vivo & Pulso*, *Cómo Vamos*, *La Plata*, *Compras 2.0 & Planter*, *La Planta, Frío & Rutas*).

• *Todas las animaciones precisas del Reel de Instagram (GSAP)*:

◦ *Contadores cinéticos y curvas vivas*: los KPIs suben con odómetro suave (expo.out), los sparklines se dibujan con stroke-dashoffset y las tarjetas tienen *Spotlight radial* que sigue tu cursor.

◦ *Trayectoria Bezier (Voyage)*: el nodo recorre la curva orgánica e inclina su ángulo sobre la pendiente en tiempo real (getPointAtLength + Math.atan2).

◦ *Simulador 60fps (Plant Hub Rater)*: recalcula caja, ahorro y descuento de Notas de Crédito cuadro por cuadro mientras movés los sliders.

• *Switch 1 vs. 2 arriba del todo*: si tocás *«1. Diseño Actual (Staging Hoy · Plano)»* ves cómo está hoy admin-staging, y en *«2. Nuevo Diseño Futurista»* volvés al portal nuevo.

Miralo tranquilo en versión Beta y decime qué te parece antes de mostrárselo a Juanchi. · 🔗 monitores-planter, monitores-plantinterno, salud-dental-alineadores, plant-cyber-2026, estado-vivo-marcas-proveedores, plant-hub-master-dashboard-ceo-y-ux-juanchi, motor-compras-2-0-plan-maestro-noviembre, mercado-libre-flex-congelados-simulador-mcp, arqueologia-comunidad-gabriel-busso-instagram, fabrica-multimedia-autor-omnicanal, auto-calculo-compras-reposicion-stock, plant-hub · 2026-10-29

Novedades Recientes

━━━━━━━━━━━━━━

• *Acción en curso*: Ya mismo le estoy pasando a *Juanchi* (5491154829979@s.whatsapp.net) el link interactivo (https://muestras.plantinterno.com/d/plant-hub-master-dashboard) con la lámina en Modo Claro y Oscuro, explicándole la visión completa: llevar Plant Hub a lo último en diseño y animaciones dinámicas de *Claude Opus 5.5*, minimalista, práctico y personalizado por rol (con botones de acceso directo al día a día de cada usuario, sus propios KPIs, tareas y procedimientos en vez de pantallas planas llenas de texto) para que lo pruebe como muestra base y nos diga qué le parece. En un minuto te confirmo el envío. · 🔗 flujo-multicanal-super-cerebro, plant-cyber-2026, plant-hub-master-dashboard-ceo-y-ux-juanchi, auto-calculo-compras-reposicion-stock, plant-hub · 2026-10-29

Novedades Recientes

La idea es que sea súper dinámico, visual, futurista y minimalista, con diseño a la vanguardia, para que todo el equipo vea que tenemos un sistema mega moderno, práctico y fácil de usar, y no tan estático y plano como era.

Buscamos que sea súper funcional y adaptado para cada usuario: en vez de ver muchos textos, que tenga algunos botones con accesos directos a todo lo que usa en el día a día, viendo arriba sus KPIs más importantes, sus tareas y procedimientos con información de valor y todo moviéndose con animaciones futuristas.

Miralo a ver qué te parece, todavía se puede mejorar muchísimo más, es simplemente una muestra para ver si hacemos los cambios en Plant Hub. · 🔗 plant-cyber-2026, auto-calculo-compras-reposicion-stock, plant-hub · 2026-10-29

Novedades Recientes

━━━━━━━━━━━━━━

• *Adjunto + Link*: le mandamos la lámina comparativa (Modo Oscuro y Modo Claro, Web y Mobile) junto al link interactivo https://muestras.plantinterno.com/d/plant-hub-master-dashboard.

• *Mensaje enviado*: le explicamos que estuvimos probando lo último en diseño y animaciones de *Claude Opus 5.5* para llevar *Plant Hub* a la vanguardia (súper dinámico, visual, futurista, minimalista y fácil de usar), adaptado a cada usuario con botones de acceso directo a su operación diaria, sus KPIs principales, tareas y procedimientos en movimiento, y que lo mire como primera muestra para ver qué le parece encarar estos cambios.

• *Escucha activa*: dejamos el chat de Juanchi vigilado para avisarte acá apenas responda. · 🔗 radar-marketing, plant-cyber-2026, plant-hub-master-dashboard-ceo-y-ux-juanchi, auto-calculo-compras-reposicion-stock, plant-hub · 2026-10-29

Temas/plant-hub-dashboard-animaciones