Component lab

Real components pulled from production projects. Interactive, with copyable source.

SegmentedControl

Segmented control with a shared-layout animated indicator. The indicator travels between options instead of popping in.

Origin: UNAI
Indicador

AlertBanner

Alert banner with three levels. Type is conveyed by icon, border and text label together, never by color alone.

Origin: Ministerio de Salud
Aviso:Mantenimiento programado para el domingoVer detalle

AnimatedDrawer

Side panel mounted through a portal. Closes on Escape or backdrop click, and restores scroll to its previous value rather than to empty.

Origin: UNAI
Scroll de fondo

MorphTitle

Title that cycles through phrases with a blurred crossfade. It reserves the width of the longest text so content below never shifts.

Origin: UNAI
Construyo productosque mueven numeros
Intervalo

MegaMenu

Dropdown menu built on Radix Popover with a real exit animation. It mounts and unmounts with state so Escape keeps working across sibling menus.

Origin: Ministerio de Salud
Columnas

PageTransition

Route enter transition with scroll to top. It neither animates nor scrolls on first load, so deep links to an anchor keep working.

Origin: UNAI

Primera vista de la aplicacion.

ThinkingLoader

Loading spinner that inherits the theme accent. Under reduced motion it shows a static ring instead of spinning.

Origin: Dashboard de analitica conversacional en produccion

Procesando la solicitud

Tamano

ThinkingSteps

Agent reasoning step timeline. Each step animates in, previous ones are marked complete and joined by a connector line. Includes an error state.

Origin: Dashboard de analitica conversacional en produccion
Final

JourneyCarousel

Carousel with a progress rail. Dots track their cards, distinguish four states, and connect through dotted segments that inherit a gradient via mask-image.

Origin: Reimplementacion propia de un patron que disene para un LMS
●

Fundamentos

Conceptos base y vocabulario.

Duración:
30 min
◐

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

Three.js particle orb that reacts to the pointer. It scales density by viewport and releases the WebGL context on unmount.

Origin: UNAI
Superficie