Fundamentos
Conceptos base y vocabulario.
- Duración:
- 30 min
Laboratorio de componentes
Componentes reales extraídos de proyectos en producción. Interactuables, con código copiable.
SegmentedControl
Control segmentado con indicador animado mediante shared layout. El indicador viaja entre opciones en vez de reaparecer.
Indicador
AlertBanner
Franja de alerta con tres niveles. El tipo se distingue por icono, borde y etiqueta textual a la vez, nunca solo por color.
AnimatedDrawer
Panel lateral montado por portal. Cierra con Escape o click en el fondo, y restaura el scroll al valor que tenia antes, no a vacio.
Scroll de fondo
MorphTitle
Titulo que cicla entre frases con un crossfade desenfocado. Reserva el ancho del texto mas largo para no desplazar el contenido de abajo.
Construyo productosque mueven numeros
Intervalo
MegaMenu
Menu desplegable sobre Radix Popover, con animacion de salida real. Monta y desmonta segun el estado para no romper Escape entre menus hermanos.
Columnas
PageTransition
Transicion de entrada entre rutas, con scroll al tope. No anima ni hace scroll en la carga inicial, para no romper la navegacion directa a un ancla.
Primera vista de la aplicacion.
ThinkingLoader
Spinner de carga que hereda el acento del tema. Con movimiento reducido muestra el anillo estatico en vez de girar.
Procesando la solicitud
Tamano
ThinkingSteps
Timeline de pasos de razonamiento de un agente. Cada paso entra, los previos se marcan completados y quedan unidos por una linea. Incluye estado de error.
Final
JourneyCarousel
Carrusel con riel de progreso. Los puntos siguen a sus tarjetas, distinguen cuatro estados y se unen por segmentos punteados que heredan un gradiente via mask-image.
Práctica guiada
Ejercicios con acompañamiento.
- Duración:
- 45 min
Proyecto corto
Aplicación en un caso acotado.
- Duración:
- 2 h
Revisión entre pares
Lectura cruzada de entregas.
- Duración:
- 1 h
Cierre
Síntesis y siguientes pasos.
- Duración:
- 30 min
Ningún paso seleccionado
Visibles
ParticlesOrb
Orbe de particulas en Three.js que reacciona al puntero. Ajusta la densidad segun el viewport y libera el contexto WebGL al desmontar.
Superficie