El catálogo
679 componentes con su prompt de reproducción, agrupados por tipo.
aiChats
- Input de prompt con typewriterCaja de prompt estilo asistente con placeholder que se teclea y borra cíclicamente a velocidad humana con jitter, caret parpadeante con steps(), y toolbar de pills bajo el texto.
- Burbuja chat jellyEtiqueta de usuario tipo chat con cola triangular y pop de entrada squash-and-stretch (scaleX y scaleY contrapuestos en 7 keyframes).
- Passkey con huella trazadaDiálogo de acceso con una huella dactilar formada por arcos SVG concéntricos que se trazan uno a uno de dentro afuera mientras se verifica; al completarse se funden en un anillo que gira y se cierra con un check, y si falla se desordenan y borran en rojo antes de volver al reposo.
alerts
- El aviso de error que provocó el propio usuarioRecorre todas las secuencias de desenlaces de una sesión de peticiones, con tres formas de fallar y dos de cancelarse, y compara tres maneras de tratar el error, contando por separado las que asustan por una cancelación y las que se tragan un fallo real.
- Cuándo se sabe que no hay conexiónRecorre las 6561 líneas de tiempo que salen de dar a cada segundo uno de tres estados de conexión, con la red del aparato caída y el servidor sin contestar como casos distintos, y compara cuatro detectores midiendo en segundos lo que callan con la conexión rota, lo que avisan sin motivo y cuánto parpadea el cartel.
announcements
asciiArt
backgrounds
- Fondo de lluvia de meteorosFondo decorativo para secciones oscuras con trazos diagonales de cabeza brillante y cola en gradiente que cruzan la pantalla a velocidades y retardos pseudoaleatorios generados por una función seno determinista, en CSS puro y con densidad baja para no robar protagonismo al contenido.
- Habitación en perspectiva realHabitación construida con cinco planos reales (fondo, dos paredes laterales, techo y suelo) unidos con rotateY y rotateX hasta cerrar una caja; el puntero mueve la cámara rotando el contenedor en sentido contrario, así que las paredes se abren y cierran en escorzo verdadero, no con un parallax simulado.
- Sombra que se deforma con la luzUn objeto sobre una superficie proyecta una sombra calculada de verdad a partir de la posición de una fuente de luz que orbita la escena (o sigue el cursor): se traza el rayo del foco hacia el punto elevado del objeto y se extiende hasta el plano del suelo, así la sombra se alarga cuanto más rasante es el ángulo de la luz y se acorta cuando la luz está justo encima. Su desenfoque y su opacidad crecen con la distancia entre la luz y el objeto, y un pequeño foco visible marca dónde está la fuente.
- Cinta que se retuerce en el espacioUna cinta plana construida con decenas de segmentos rectangulares consecutivos, cada uno rotado un poco más que el anterior alrededor del eje de avance, que al proyectarse en 2D revela su cara trasera cada vez que un tramo gira más de noventa grados: pintando cada cara de un color distinto la torsión se vuelve legible sin usar ninguna librería 3D. La fase de giro avanza con el tiempo, así el patrón de colores recorre la cinta como una onda continua.
- Fondo de arco radial con retículaFondo de card hero: un arco de horizonte construido con radial-gradient de centro fuera del encuadre que pasa de magenta profundo a blanco puro, y una retícula de 40px enmascarada para existir solo donde el arco brilla.
- Horizonte de anillos apiladosEl arco luminoso no está pintado: es el BORDE de un círculo enorme del que solo asoma la cresta. Cinco círculos idénticos, cada uno unos píxeles más abajo y más claro, y como todos llevan relleno opaco cada uno recorta al anterior en una franja fina; esas franjas apiladas son el degradado del limbo, sin un solo desenfoque.
- Pozo gravitatorio de puntosRetícula regular de puntos donde cada uno guarda su posición de reposo y se desplaza hacia (o huye de) el cursor según un campo de fuerza que decae con la distancia, devolviéndose a su celda con un muelle amortiguado que hunde y hace rebotar la malla. El tamaño y la opacidad de cada punto caen con su desplazamiento, dibujando la profundidad del pozo.
- El degradado que no se ensuciaComparador que dibuja el mismo degradado tres veces, interpolando en sRGB directo, en sRGB linealizado y en Oklab con las matrices, la raíz cúbica y la vuelta escritas a mano, señalando los pasos que se salen de la gama. Debajo de cada franja va su curva de luminosidad real, donde se ve el hundimiento de cuatro puntos que apaga el sRGB frente a la recta de Oklab, y un cursor lee el color exacto de las tres en la misma posición.
- Campo de tiles con blob de hoverFondo de rejilla de tiles pintado en canvas: revelado escalonado al montar, parpadeo ambiental continuo y un blob orgánico alrededor del cursor cuyo radio ondula con senos superpuestos.
- Fondo de blobs difusosCapa fija de tres blobs radiales grises con blur de 40-60px que dan profundidad al fondo off-white sin robar atención.
- Cortina de lluvia inclinadaNinguna gota está inclinada. Las doscientas caen en vertical y lo que gira es el CAMPO entero, 15 grados de una vez. Así el viento es un número en lugar de doscientas transformaciones, y cada gota puede animar sólo translateY. Y el degradado va de transparente arriba a color abajo, para que la raya se lea como el rastro de algo que cae y no como un palo.
- Fondo de reacción y difusiónFondo decorativo que hace crecer un patrón orgánico tipo coral con una simulación de Gray-Scott en canvas, calculada a baja resolución sobre un ImageData y escalada al pintar para que sea viable en una rejilla con muchas piezas a la vez.
- Curvas de nivel topográficasFondo decorativo que dibuja un mapa de curvas de nivel sobre un campo de altura generado con ruido de valor determinista, extraídas celda a celda con marching squares y desplazándose despacio en el tiempo como un terreno vivo.
- Mosaico de Voronoi que respiraFondo de teselas que se reparten el lienzo entre un puñado de semillas en deriva continua: cada fotograma recalcula a baja resolución qué semilla domina cada celda y pinta solo los bordes donde dos territorios chocan, así que el mosaico se reorganiza sin cortes y, cuando dos semillas se cruzan, sus celdas intercambian forma como tejido vivo.
- Cáusticas de piscina calculadas como reparto de luzLa red de luz del fondo de una piscina calculada como lo que es, un reparto: cada rayo se desvía según la pendiente de la ola y aterriza desplazado, así que las líneas brillantes nacen donde el mapa comprime, y se enfrenta a la fórmula del jacobiano, que se rompe en los pliegues y da un brillo que cambia según dónde caiga la rejilla.
- Cielo estrellado en canvasCampo de estrellas con parpadeo continuo dibujado en canvas, con distribución de tamaños en tres franjas, glow radial en las grandes y anillo de constelación opcional con dispersión gaussiana.
- Campo de líneas con marcadoresCapa SVG de diagonales finísimas que se dibujan con pathLength al entrar en viewport, salpicadas de marcadores de estrella con etiquetas monospace apiladas en vertical, con sets de coordenadas por sección.
- Campo de baldosas en rampaUna sola rampa gobierna el giro Y la escala, y corre sobre el índice PLANO, no sobre la fila. Eso es lo que impide que el campo se lea como bandas: la rampa cruza cada salto de fila a media zancada, así que ninguna fila coincide con su vecina en los extremos. Sin transformación 3D, sin perspectiva y sin una sola imagen.
- Arco de números canvasContador 0-100 dibujado en canvas sobre un arco: el número focal escala con glow azul, los vecinos se desvanecen con curva de potencia y el avance se suaviza con lerp.
- Campo de partículasCapa de puntos blancos de 1.5px que parpadean con duraciones y delays aleatorios, generados una sola vez con useMemo.
- Panal de hexágonos recortadosUn clip-path se lleva por delante la caja del borde junto con las esquinas, así que un hexágono con contorno no se puede hacer con border. Se hace con DOS copias del mismo recorte: la de fuera es el contorno y la de dentro va metida el ancho del hueco y tapa todo menos una banda. Como son dos capas, contorno y cara se pueden pintar por separado.
- Rejilla de celdas desfasadasEl retardo NEGATIVO es todo el truco: cada celda arranca en un punto distinto del mismo bucle de 2s, calculado a partir de fila menos columna, así que la onda diagonal existe ya en el primer fotograma sin una línea de JavaScript. Y la rejilla va a hueco CERO: al tocarse las celdas, el espacio entre cuatro esquinas redondeadas es una estrella de cuatro puntas.
- Panel de mesh gradient vivoFondo de card oscuro compuesto por siete radial-gradients solapados que respiran con hue-rotate y deriva de posiciones, más un barrido de brillo diagonal en repeating-linear-gradient con blend screen.
- Trama de semitono perforadaLos puntos no se dibujan: se PERFORAN. Es una lámina opaca con agujeros repetidos cada pocos píxeles, y como el mismo elemento lleva backdrop-filter, lo que asoma por cada agujero ya viene desenfocado. Ese desenfoque previo es lo que convierte una rejilla dura en un semitono en vez de un mosaico de píxeles. La máscara va al revés que un viñeteo: transparente en el centro, así que quita la LÁMINA donde la imagen debe verse limpia.
- Retícula de líneas que se dibujanFondo de sección oscuro cuya estructura son seis filos de un píxel que se dibujan solos: las horizontales crecen desde el centro con scaleX y las verticales bajan desde arriba con scaleY, escalonadas cada 80 ms, mientras el titular sube y el antetítulo cierra su interletraje.
- Campo de trazos que asciendenLluvia invertida en canvas: rectángulos de 0,7 por 2,2 píxeles que suben a velocidad propia y, al salir por arriba, renacen bajo el borde inferior con velocidad y opacidad nuevas. La cantidad se calcula por área, no por número fijo, así que la densidad no cambia al redimensionar.
- Órbitas de integracionesLogo central rodeado por dos anillos de iconos de integraciones que orbitan en sentidos opuestos con rotación CSS pura; cada icono contrarrota para mantenerse siempre derecho.
- Archipiélago desplazadoCada isla son SEIS elipses concéntricas en el mismo centro, y cada una tiene borde DURO: sólida hasta el 70% y cortada al 71%. Encima, un feDisplacementMap con escala 900 alimentado por ruido fractal. El borde duro es lo que hace que el desplazamiento rompa la costa en un litoral dentado; con una caída suave sólo saldría niebla.
- Cúpula de luz apiladaToda la imagen son TRES degradados radiales con el mismo centro y extensiones muy distintas, uno encima de otro. El que manda es ancho y bajo, 100% de ancho por 50% de alto, así que la luz se lee como una cúpula apoyada en un horizonte y no como una bola flotando. Y la parada marrón al 79% es lo que le da borde quemado en vez de desenfoque.
- Haces recortados por máscaraNadie dibuja aquí un haz. Cada capa es la MISMA lámina cian a sangre, con el mismo sesgo, y lo que hace el trabajo es la máscara: un degradado horizontal de paradas que borra todo salvo unas bandas verticales. Los supervivientes son los haces. Cinco láminas iguales con cinco listas de paradas distintas dan un campo entero de luz.
- Rejilla 3D ondulantePlano 3D (three.js) con shader de rejilla cuadrada cuyos vértices ondulan con senos superpuestos, inclinado hacia el fondo y enmascarado con un radial para fundirse en la tarjeta.
- Arcos de onda sonoraRadiación de onda tras un badge: cada anillo son dos arcos abiertos y espejados que no se cierran arriba ni abajo, con opacidad decreciente hacia fuera, ancladas a un punto de tamaño cero para posicionarlas desde el consumidor.
- Pantalla de tramado sobre lluviaUna lámina casi negra con un agujero cada 8px, y debajo un backdrop-filter que desenfoca y multiplica por cinco lo que haya detrás. El desenfoque convierte las rayas finas en luz difusa, el brillo la saca de la sombra y los agujeros la muestrean. Lo que pongas detrás vuelve convertido en una matriz de puntos de sí mismo.
- Doble hélice dibujadaHélice de ADN en SVG: las dos hebras se dibujan con pathLength tras una máscara de rect ascendente, los peldaños hacen scroll infinito recortados por la cinta y puntos dorados viajan pegados a cada hebra.
- Arcos laterales que latenOrnamento de hero: veinte líneas curvas por lado hechas con bordes de un solo lado y radio 80 por ciento, anchos crecientes de 10px en 10px y delays de 0.25s, latiendo en un ciclo de 5s de aparición y desvanecimiento; en móvil rotan a horizontales superiores.
- Retícula de limaduras magnéticasFondo compuesto por una retícula de segmentos cortos que rotan con atan2 para apuntar siempre hacia el cursor, como limaduras de hierro orientándose hacia un imán invisible. Cada segmento gira con una transición suave e independiente, así que el campo entero parece fluir en tiempo real detrás del puntero en vez de saltar de golpe.
badges
- CTA pill con indicadorBotón pastilla negro con doble círculo indicador a la izquierda (anillo translúcido + punto solido). Hover suave de 200ms.
- Marcadores de sector con hazLas esquinas de retícula son cuatro cajas de 8px, cada una dibujando solo los dos bordes que se juntan en su propia esquina. Sin pseudoelementos y sin SVG, y aguantan cualquier ancho de etiqueta porque van ancladas a la esquina, no dimensionadas contra la píldora. Lo único que cambia de altura es el haz, y como la fila se alinea abajo, eso separa los marcadores en profundidad sin mover ni una etiqueta.
- Formulario con chips de servicioCard de contacto con selección múltiple de servicios en chips toggleables, fila de email y redes en pastilla gris, envío asíncrono simulado y estado de éxito que sustituye el formulario por un check verde.
- Píldora flotante tipo isla dinámicaPíldora flotante que muta de forma entre tres estados (compacto, medio, expandido) animando anchura, altura y radio con un spring y haciendo crossfade del contenido interno; el cambio se dispara al tocarla o en un ciclo de demostración automático.
- Pill con borde degradado y glowSistema de pills/inputs con borde degradado de 1px real (doble background con background-clip padding-box/border-box), variante de anillo enmascarado con mask-composite y glow trasero blureado.
borders
- Píldora liquid glassTratamiento de cristal líquido para pills y badges: fondo casi invisible con blend luminosity, blur suave, inset highlight y un borde degradado vertical confinado a 1.4px con mask-composite.
- Haz de borde con ángulo registradoEl haz recorre el borde animando el ángulo del propio degradado cónico, no rotando una capa: la variable del ángulo se registra con @property para volverla interpolable, y como hereda, una sola animación en el contenedor mueve a la vez el hilo nítido y su halo desenfocado.
- Pipeline de nodos con beamTres nodos circulares neumórficos conectados por líneas por las que viaja un beam de luz en bucle con máquina de estados: recorre, salpica en el nodo central, sigue y descansa.
- Cards con borde foco de cursorGrid de cards oscuras donde un foco radial sigue al cursor a través de todas a la vez: el borde de cada card se ilumina solo en el arco más cercano al puntero gracias a un gradiente enmascarado, con un glow interior sutil en la misma posición.
- Gema de cristal 3DIcosaedro facetado con material de transmisión física (react-three-fiber): refracción, aberración cromática y aristas duras, girando en continuo y siguiendo al puntero con lerp, con degradación de calidad automática.
- Beam de borde con offset-pathDestello que recorre el borde de una card sin conic-gradient: un punto de luz radial viaja por offset-path rect() dentro de un anillo recortado con mask-composite, parametrizado por variables CSS por consumidor.
- Marquee de logosCarrusel infinito de logos en silueta blanca translucida: la fila se duplica y se desplaza -50% en loop lineal perfecto.
- Árbol con dots viajerosÁrbol de nodos glass conectados por curvas S dibujadas con pathLength, con puntos de luz que viajan en loop por cada conector usando animateMotion nativo de SVG.
- Cristal refractivo con dispersión cromáticaVidrio líquido de verdad, no un blur: una card actúa como VENTANA a una copia del fondo a viewport completo (sincronizada por rAF con rect negativo) a la que un filtro SVG aplica desplazamiento por turbulencia SOLO en los bordes y separado por canal R, G y B, produciendo refracción con franja cromática como un cristal grueso.
- Superficie liquid glassLa utilidad de cristal líquido: fondo casi transparente con blend luminosity, blur suave, brillo interior superior y un borde degradado vertical recortado con doble máscara xor que solo brilla en los extremos.
- Esquinas cóncavas con notchPestaña pegada a la esquina de una card cuyo encuentro con el borde se curva HACIA DENTRO: dos piezas decorativas con radial-gradient invertido (transparente en el círculo, color fuera) fingen la transición suave imposible con border-radius.
- Banda de blur progresivoFranja inferior de un hero de vídeo donde el desenfoque crece gradualmente hacia abajo: ocho capas apiladas de backdrop-filter con blur creciente, cada una enmascarada a su propia franja vertical.
- Grid con bordes que se apaganGrid de tres cards separadas por líneas dibujadas a mano: verticales solo entre columnas via background-image posicionado, horizontales que se funden a transparente en los bordes, y layout alternado en la card central.
- Borde con cometa conic rotatorioBorde animado para cards: un conic-gradient de cometa (transparente, glow débil, núcleo brillante, glow, transparente) de 250% rota en bucle dentro de un anillo de 2px confinado con mask-composite xor.
- Collage arrastrable con cursor de cristalFila de fotos con anchos y alturas desiguales que se re-coreografía al entrar en viewport y rota con drag; un cursor circular de cristal con spring aparece solo al sobrevolar una foto.
- Panel con esquina biselada redondeadaUn panel de vídeo central con una esquina cortada en diagonal a 45 grados PERO con las dos puntas del corte redondeadas: imposible con polygon(), se construye un clip-path path() en JS a partir del tamaño real del elemento y se recalcula con ResizeObserver.
buttons
- Cubo 3D que explota al clicUn cubo CSS de seis caras con gradientes flota con una animación de vaivén y, al pulsarlo, se encoge mientras catorce fragmentos (esquirlas cúbicas y esferitas) salen despedidos a offsets 3D aleatorios con delays escalonados, y vuelven al soltar el toggle.
- Kit de controles amigablesSet de micro-controles con estética redondeada y colores planos: toggle con thumb deslizante, barras de progreso animadas, badges pill tintados, tooltip con flecha y contador de racha con emoji.
- Eco de lo que anuncia el lector de pantallaJunto a una interfaz de ejemplo, un panel en texto reproduce en el mismo orden lo que anunciaría un lector de pantalla al recorrerla, nombre accesible, rol y estado, y añade avisos aparte cuando algo cambia en una región viva como un contador o un aviso emergente. Incluye a propósito un botón con icono mal etiquetado para mostrar cómo suena un nombre accesible vacío.
- Overlay de orden de tabulaciónCapa de diagnóstico sobre una interfaz de ejemplo que numera cada control en el orden real en que el teclado los recorrería y traza el camino que sigue el foco uniendo los números, calculado leyendo los elementos enfocables en orden de documento y respetando los tabindex positivos, con un caso deliberado de tabindex alterado que produce un salto visible.
- Resistencia al zoom de textoAmplía solo el tamaño del texto de una interfaz de ejemplo hasta el doscientos por ciento, nunca hace zoom de toda la página, y expone en vivo qué contenedores desbordan, qué textos se truncan por usar unidades fijas y qué elementos se adaptan bien por usar medidas relativas. Un contador resume cuántos problemas hay en cada nivel.
- Transición acompasada a una envolventeUna curva de envolvente ADSR (ataque, caída, sostenido, relajación) dibujada junto al elemento gobierna en tiempo real su escala, desenfoque y opacidad, con un cursor recorriendo la curva para dejar clara la causalidad entre la forma matemática y el movimiento.
- Transición atada a la carga realUna cortina de página con duración no fija: entra cubriendo, espera con el progreso avanzando asintóticamente hacia un techo sin llegar nunca mientras el destino carga, y sale acelerando en cuanto los datos están listos, saltando el progreso al cien por cien. Si la carga es instantánea la espera se salta entera; si tarda, se estira sin parecer colgada.
- El contraste del botón medido como manda la normaCalcula el contraste real entre el fondo del botón y nueve colores de texto deshaciendo la curva de la pantalla por tramos y pesando los canales como el ojo, y lo enfrenta a la cuenta fácil de promediar canales, contando los colores que esta aprueba sin merecerlo y los que suspende sin motivo.
- Tres formas de que el botón de pagar no cobre dos vecesSomete la misma ráfaga de clics a tres guardas contra el doble envío, la bandera en el estado que no existe hasta el siguiente pintado, la referencia que cierra en el acto y la clave de idempotencia que deja salir las peticiones y las junta en el servidor, contando los cobros de cada una.
- Pulsar y salirse para arrepentirseAlimenta el mismo recorrido del dedo a tres formas de cablear un botón, la nativa que solo dispara si empiezas y acabas dentro, la que dispara al pulsar y la que cuenta una por cada entrada al área, y enseña qué recorrido delata a cuál y cuál no distingue nada.
- Aguantar la tecla no es aguantar el ratónCuenta cuántas veces se dispara un botón cuando se mantiene pulsado por cuatro vías distintas, Enter que repite, Espacio que espera a soltar, ratón que salta al soltar dentro y un div que el teclado ni alcanza, calculando la repetición por fórmula cerrada y por recorrido del reloj para que una delate a la otra.
- Botón enviar con anillo orbitalBotón de enviar con anillo conic-gradient de 1px que gira con inercia (acelera al hover, frena al salir vía easing exponencial), barrido de brillo una sola vez por hover y flecha que se releva hacia arriba.
- Botón con hover de píxelesBotón cuyo hover no es un fade: un canvas pinta el color de llegada celda a celda como una ola de píxeles con brillo en el frente, umbrales deterministas por celda y reverso simétrico al salir.
- Botones de lente de cristalLo que convierte el desenfoque en cristal es la manchita blanca de 24 por 12 arriba a la izquierda. El backdrop-filter solo se lee como plástico esmerilado; ese brillo emborronado se lee como una superficie curva recogiendo una luz. Y no escala con el botón: los tres tamaños llevan exactamente el mismo reflejo, porque un brillo especular es propiedad de la luz, no del objeto.
- Interfaz con mix-blend differenceToda la interfaz fija (header, titulares, footer, indicadores) se pinta en blanco con mix-blend-mode difference: sobre zonas claras del vídeo se invierte a oscuro y sobre zonas oscuras queda blanca, siempre legible sin un solo overlay de contraste.
- Botón con flecha de relevoBotón blanco con micro-interacción de relevo: dos copias de la flecha apiladas en una ventana recortada; al hover la primera sale disparada y la segunda entra desde el lado opuesto con el mismo easing.
- Etiqueta que rota al hoverMicro-interacción de texto para botones y links: el rótulo sube y desaparece mientras un duplicado entra desde abajo, dentro de un contenedor con overflow hidden, coordinado por variants de hover del padre.
- Logo cromado que gira con el scrollMonograma 3D cromado en la cabecera: la malla se corta en dos mitades que giran con lerps distintos (se desincronizan al scrollear y se realinean al parar), con snap a vueltas completas.
- Ola de puntosCuatro puntos que botan en ola continua (delay escalonado por indice), con opacidades simetricas mas brillantes en los extremos.
- Logo SVG que se dibujaWordmark SVG animado por partes con CSS puro: el círculo hace pop con overshoot, los arcos se trazan con dasharray mientras se deslizan, y el texto llega con blur desde un lado, todo gateado por una clase is-ready.
- Sistema de sombras profundas con haloLenguaje de profundidad para UI clara: cada elemento clave (icono, botón, avatar) flota sobre un DUPLICADO borroso de su propio color como halo inferior, más inset de luz arriba y sombra tintada, y el halo crece y baja al hover como si el objeto se elevara.
- Barrido de arcoíris en el logoHover de logo o palabra: una capa superpuesta enmascarada con la propia silueta se llena con un degradado multicolor de 300% de anchura que barre de derecha a izquierda una sola vez.
- Conector de puntos que se dibujaConector en L de esquina redondeada dibujado punto a punto: un path guía invisible se muestrea con getPointAtLength cada 4px y cada punto hace pop con delay incremental de 40ms, trazando la ruta en orden.
- Botón que se llena desde abajoBotón outline cuyo hover no cambia el color: lo INUNDA. Un pseudo-elemento de color sube desde translateY(101%) hasta cubrirlo mientras el texto vira a oscuro y el borde adopta el color de relleno.
- Divisor diagonal entre seccionesTransición angulada entre una sección clara y otra oscura: un SVG con un único polígono irregular pegado al fondo del hero corta la luz en diagonal, con preserveAspectRatio none para estirarse a cualquier ancho.
- Anillo con barrido conicGráfico circular punteado que se revela como un barrido de reloj: mask-image conic-gradient animado de 0 a 360 grados con un motion value, sincronizado con contadores count-up.
- Canvas escalado a viewportPatrón de layout: cada sección se maqueta en un lienzo de píxeles fijos y se escala entera con transform scale medido por ResizeObserver, en vez de media queries.
- Botón con relleno pixeladoCTA cuyo hover rellena el botón con bloques de píxel en una onda ruidosa izquierda-derecha dibujada en canvas; el texto cambia de color cuando el relleno supera el 60%.
- Atajos rotulados sobre los propios controlesAl mantener pulsada una tecla modificadora, cada control de la interfaz muestra una insignia con su atajo justo en su propia esquina, en cascada según su posición, en vez de listarlos aparte; si se pulsa el atajo real mientras la capa está visible, el control correspondiente destella para confirmarlo.
- Tour con recorte que viajaRecorrido guiado donde un velo oscuro cubre la interfaz salvo por un hueco que copia el rectángulo, tamaño y radio exactos del elemento destacado (leídos con getBoundingClientRect y getComputedStyle) y que se estira y encoge mientras viaja al siguiente paso; el tooltip se coloca siempre en el lado con más espacio libre.
calendars
- Reserva de espacio contra saltos de maquetaciónUna página en miniatura donde llegan con retraso una imagen dibujada con formas, un banner, un anuncio simulado y filas nuevas de tabla, y el componente mide a mano el desplazamiento acumulado con la fórmula real: lee getBoundingClientRect antes y después de cada aparición, multiplica la fracción de ventana afectada por la fracción de distancia recorrida y va sumando. Un conmutador declara la altura de cada hueco y la cifra cae a cero, con las dos medidas juntas y una flecha que señala qué elemento empujó y cuántos píxeles.
- Semana a agenda que migra con FLIPVista semanal en rejilla por días y horas que cambia a una agenda cronológica en lista sin redibujar los eventos: cada tarjeta migra con una animación FLIP real desde su celda en la rejilla hasta su fila en la lista, con su propio desfase, y la cabecera de cada día se revela cuando su grupo termina de aterrizar.
- Calendario que mide su propio anchoRejilla de mes que decide qué enseñar mirando el ancho de SU contenedor, no el de la ventana: con sitio escribe el nombre completo del día y la hora del evento; sin sitio deja la inicial y solo el título. Dos instancias del mismo componente en la misma pantalla se ven distintas.
- Calendario con marco de esquinas mordidasEl marco se construye en dos mitades que NO se tocan: la tarjeta pone las barras de arriba y abajo, y una capa aparte pone las de los lados, empujada hacia fuera lo mismo que mide el borde. Las cuatro esquinas quedan vacías, y esos cuadraditos que faltan son lo que hace que la caja se lea como píxel art. Las flechas son siete cuadrados escalonados, sin diagonal ni curva.
- Por qué no se puede cubrir el cuadranteEmpareja turnos con personas habilitadas por caminos de aumento y, cuando queda uno sin cubrir, extrae el grupo exacto de turnos cuyo personal habilitado no da para todos, así que el aviso no dice que faltan personas sino qué turnos solo pueden hacer quiénes.
- Calendario de pagos que respeta el saldo mínimoUn mes de tesorería con cobros en fechas fijas y facturas con vencimiento en el que el componente decide en qué día pagar cada una para que el saldo no baje nunca del mínimo: ordena por vencimiento y coloca cada pago lo más tarde posible dentro del plazo, retrocediendo día a día cuando el hueco ya está ocupado, y dibuja la curva del saldo con el punto más bajo marcado. Si no hay plan posible señala qué factura fuerza el descubierto y cuánto falta, y compara el coste de retrasarla fuera de plazo con el de financiar ese importe; un conmutador superpone la curva de pagar todo al recibir, que se hunde.
- Widget de reserva de cristalCard de reserva flotando sobre el vídeo del hero: doble capa de blur y tinte soft-light, pills de fecha que despliegan un calendario en grid con el día elegido invertido, caja de check-in/out con divisor central y botón Reserve blanco, entrando desde la derecha.
callsToAction
- CTA con blob interior luminosoBotón ámbar de radio total con doble luz: una sombra exterior enorme y difusa del color del acento, y un blob blureado recortado dentro del borde superior que simula reflejo de tubo de neón.
- CTA con brillo superiorBotón pill azul con luz propia: sombra inset inferior blanca que simula volumen, outline del mismo color y una barrita de degradado clarito pegada al borde superior que se ensancha al hover del grupo.
- Botón 3D con sombra duraSistema de botones estilo juguete: sombra dura de 4px bajo el botón que desaparece al pulsar mientras el botón baja 4px, con variantes primaria, secundaria con borde, peligro y ghost.
- Botón de tecla mecánicaBotón con feedback táctil de tecla física: la cara descansa sobre un canto sólido más oscuro desplazado hacia abajo y, al pulsar, se hunde con translateY hasta casi tocar la base. Solo dos capas y una transición sobre transform, sin 3D real, con un rebote final tipo resorte al soltar.
- Botón degradado con glowCTA de tres capas: degradado cálido, halo blureado detrás que se enciende al hover, trazo interior de 1.5px para el borde vidrioso y flecha que entra deslizando; con variante secundaria glass blanca.
- Sistema de botones con esquinas cortadasFamilia de botones octogonales por clip-path: sólido con cortes diagonales, variante outline que simula el borde con un ::before interior recortado un pixel más pequeño, y versión compacta cuadrada para iconos sociales, todos con el mismo lenguaje de chaflán.
- Botones de scroll verticalColumna fija de dos botones cuadrados con chevrons que desplazan la ventana exactamente un viewport arriba o abajo con scroll suave.
- CTA blanca con flechaBotón blanco pastilla con círculo negro y flecha ArrowUpRight al final. Padding asimétrico que pega el círculo al borde.
- Botón CTA con giro de dos carasBotón que al hover gira como una pieza sólida de tres dimensiones (preserve-3d más perspectiva) para mostrar una segunda cara con otro texto y colores invertidos, como una ficha de aeropuerto que voltea. Ninguna de las dos caras se desvanece: solo una de ellas mira hacia la cámara en cada momento gracias al backface-visibility.
- Botón con borde cónico girandoBotón pill envuelto en un borde de conic-gradient que ROTA de verdad: un @property registra el ángulo como custom property animable, el gradiente lo consume y una máscara xor lo confina a un aro de 3px, con relleno interior que inunda al hover.
- CTA con columna de palabras que se desvaneceSección de cierre a dos columnas cuya mitad derecha es una cinta vertical infinita de palabras: la lista se duplica y sube un 50 % en bucle, y un bucle de rAF calcula la opacidad de cada palabra según su distancia al centro de la columna, así que el foco viaja con el texto en vez de quedarse fijo en una máscara.
- Botón con cuenta atrás de bloqueo por límiteBotón circular que cuenta los usos permitidos en una ventana de tiempo con puntos que se van apagando y, al agotarlos, se convierte en su propio indicador de espera: un anillo que se vacía marcando los segundos restantes con la cifra dentro, inerte a la pulsación pero que explica el bloqueo al pasar el cursor. Al completarse la cuenta atrás el anillo termina la vuelta, el botón vuelve a su estado normal con un pulso y los usos se reponen.
cards
- Feature cards con aurora superiorTres cards de features claras cuyo fondo es un radial-gradient de dos colores calientes que emana del borde superior y se disuelve en la superficie base, con escenas estáticas dentro: caja de prompt con frases degradadas, malla enrejada con máscara radial y pills flotantes con cursor.
- Miniaturas polaroidPar de tarjetas polaroid pre-rotadas con marco PNG, foto en la apertura, numeral serif flotante y lift de 4px al hover.
- Tarjeta de plasma cónico difuminadoEl plasma es un CUADRADO sin radio ninguno: 160px de degradado cónico bajo blur(30px). El desenfoque le redondea las esquinas de forma desigual y por eso sale orgánico en vez de circular, y el giro de tono del cónico le da el remolino de dentro. Con un radial saldría una lámpara plana, y redondeándolo antes, un círculo cualquiera.
- Visor de producto que gira al arrastrarVisor 360° sin fotos: un canvas genera cada vista del producto con matemática pura (achatamiento y barrido de luz según el ángulo), el arrastre horizontal lo hace girar con inercia al soltar y encaje amortiguado a la vista más cercana.
- Selector de variante que recolorea la fotoFicha de producto con muestras de color donde elegir una variante no sustituye la imagen: la misma composición se recolorea interpolando el color plano de las zonas teñibles mientras una capa de luces y sombras se mantiene fija encima con mezcla overlay, el nombre del color cambia con las letras rodando y la muestra elegida crece con un anillo.
- Tarjeta con grosor realTarjeta de producto construida con seis caras (frontal, trasera y cuatro cantos) unidas con rotaciones y translateZ hasta cerrar un volumen real; al inclinarse hacia el cursor se ven los cantos, una luz especular recorre el borde superior según el ángulo actual y la sombra proyectada se desplaza en sentido contrario a la inclinación.
- Tarjeta social en canvasCompositor de la imagen de compartir dibujada entera en canvas a resolución real: el título se reparte en líneas con el ancho medido por measureText, el tamaño de letra baja por pasos hasta caber en las líneas permitidas y, si ni al mínimo cabe, se recorta por grafemas para no partir un emoji.
- Ventana de código con resaltadoEl código es DATOS, no marcado: cada línea es una lista de texto y clase, y un único mapa de colores tiñe el listado entero. Añadir una línea no obliga a tocar ni un color. El halo es un degradado horizontal que se apaga en LOS DOS extremos, así que la ventana parece apoyada sobre una superficie iluminada en vez de rodeada por un aro de luz.
- Card que migra entre seccionesUna card fija en viewport que al escrollear se despega de su columna de origen (midiendo el rect de un ancla invisible) y morfa posición, tamaño y contenido hasta quedar centrada en la sección siguiente, con tilt 3D al puntero.
- Tablero con borde eléctricoLa turbulencia no se anima nunca: animarla hace que el campo salte en vez de viajar. Se queda quieta y lo que se mueve es un feOffset, con DOS copias de la misma semilla desplazándose en sentidos opuestos, de modo que cuando una sale de cuadro la otra ya está entrando y la costura no aparece jamás. Los dos ejes se mezclan con color-dodge, que es lo que bifurca el borde en vez de solo ondularlo.
- Entrada troquelada con matrizToda la silueta (las cuatro esquinas redondeadas y las dos muescas del troquelado) es UN solo clip-path: path(). Los arcos de la muesca usan bandera de barrido 0 para curvar hacia dentro; con 1 los mismos dos arcos se abultan hacia fuera y salen orejas. La matriz lleva el texto en vertical con writing-mode.
- Caja de selección al arrastrarEl origen de transformación va en la esquina SUPERIOR IZQUIERDA, no en el centro. Crecer desde una esquina se lee como un arrastre; crecer desde el medio se lee como algo que aparece. Y los cuatro tiradores entran en orden horario con 100ms de diferencia, empezando cuando la caja ya casi ha terminado: llegan en el orden en que los pondría una mano.
- Story card 3D con barrasTarjeta vertical estilo story con tilt 3D que sigue al ratón (springs), barras de progreso sincronizadas, titular alternante y fila de acciones glass.
- Card resumen con count-upTarjeta de cristal sobre foto con cifra grande animada por count-up (ease-out cúbico), divisor discontinuo y tres filas con barras degradadas.
- Card transacción blancaTarjeta blanca compacta con cifra count-up, caption y botón pastilla negro de ancho completo con badge de flecha.
- Card IA pregunta-respuestaTarjeta de cristal con rotación infinita de preguntas y respuestas vía AnimatePresence: salida blur hacia arriba, entrada blur desde abajo, cada 4 segundos.
- Burbuja que se materializaCard de chat oscura con dos burbujas: una esqueleto permanente y otra que tras un delay muta de esqueleto gris a mensaje real, animando el color de fondo mientras AnimatePresence intercambia el contenido.
- Superficie iridiscente por capasTarjeta holográfica construida con seis capas superpuestas y la misma inclinación: el degradado base, el mismo ciclo de tonos repetido en corto y mezclado en overlay, filos blancos especulares en plus-lighter, un rayado subpíxel, grano de feTurbulence y un único foco radial. Ninguna imagen.
- Tarjeta con abanico de radiosLos sesenta radios salen de UN solo repeating-conic-gradient con periodo de 6 grados y radio de 2. Dos detalles lo sostienen: una máscara radial que los apaga antes de las esquinas, porque a sangre parecen un error de impresión, y un desenfoque de 0.4px que mata el moiré donde los radios son más finos que un píxel, cerca del centro.
- Card que se disuelve en humoMicro-interacción de descarte donde una card no simplemente se desvanece, sino que un anillo de partículas blandas (círculos con blur y gradiente radial) aparece a su alrededor, se disuelve derivando hacia arriba con deriva lateral aleatoria, y la card encoge y se apaga en el mismo tramo de tiempo, como si se quemara en humo. Cada partícula tiene su propio retraso, deriva y tamaño calculados de forma determinista.
- Recibo de impresión térmicaLa tinta no se dibuja, se estropea: un filtro SVG desplaza el texto con turbulencia y luego lo perfora con una segunda turbulencia cuyo alfa se cuantiza en siete escalones, uno de ellos cero. Ese escalón que falta es el que hace que un séptimo de la tinta no llegue al papel. El borde dentado es un solo diente cónico repetido en x.
- Calculadora con reveal y count-upCard de calculadora que se descubre con clip-path al entrar en viewport, un count-up empuja la cifra y el slider a la vez desde la misma fuente de verdad, y al tocar el slider el usuario toma el control sin saltos.
- Tarjeta de relieve con luz fijaToda la tarjeta obedece a una sola regla: cada pieza lleva DOS sombras espejadas, una oscura abajo a la derecha y una blanca arriba a la izquierda, con el desenfoque siempre al doble del desplazamiento. Poner esas mismas dos sombras en inset convierte el objeto de saliente a excavado sin tocar nada más.
- Carpeta de neón que abre sus hojasLas hojas crecen de alto exactamente lo mismo que sube su borde superior, así que su borde inferior no se mueve nunca y parecen salir del bolsillo en vez de estirarse. En reposo quedan íntegramente detrás del cuerpo de la carpeta y no se ven. Ambos estados viven en la hoja de estilos: escribir el reposo en línea le ganaría al hover y nada se movería.
- Tarjeta de contorno trazado a manoEl contorno no es un borde. Es un rectángulo recorrido punto a punto cada 2,5 unidades, con cada punto sacudido al azar, emitido como un único path en un viewBox cuadrado con preserveAspectRatio none: así se estira a cualquier tarjeta sin recalcular el temblor. Y el guion es largo con hueco corto, desplazándose: la línea nunca se rompe mucho rato, sólo tiene una costura que viaja.
- Billete con luz en faseTres animaciones sobre un único reloj de 10s, escritas contra la misma línea de tiempo. El billete gira, y la lámina de luz viaja en sentido CONTRARIO al giro, porque eso es lo que hace una fuente de luz fija. Al compartir duración, el destello cae siempre sobre la misma cara en el mismo instante, sin una línea de JavaScript.
- Pantalla de tubo con líneas de barridoHay DOS retículas de líneas y hacen dos trabajos distintos. La de 6px en color fósforo es la que se ve. La de 4px en negro se queda entre el 2% y el 4% de opacidad y su único cometido es parpadear: es lo que hace que la pantalla parezca encendida. Quitarla por decorativa deja el tubo muerto.
- Card de código que se escribeFalso editor de código que teclea sus líneas una a una con setInterval, deja las últimas líneas atenuadas y, al terminar, pasa un barrido de resaltado naranja sobre segmentos concretos.
- Tarjeta con lámina de difracciónEl arcoíris no viene de apilar degradados sino de una rejilla de difracción: líneas de un píxel cada pocos píxeles sobre un degradado cónico, fundidas con color-dodge. Donde cae una línea el cónico se dispara casi a blanco y entre líneas se queda oscuro, y esa alternancia es lo que el ojo lee como lámina holográfica.
- Card que se construye por etapasCard de producto (estilo wallet) cuya entrada es una secuencia de construcción: un cursor de tiempo acumulado calcula el delay de cada capa, el panel es una puerta dura y las demás etapas se solapan parcialmente para que el conjunto fluya.
- Comparativa con grieta de luzLo que se recorta es la LUZ, no el contenido. Dos ambientes espejo, cada uno tres degradados radiales, se reparten la caja con recortes complementarios: inset(0 100-x% 0 0) y inset(0 0 0 x%). Como son complementarios teselan el marco exactamente, sin costura ni hueco, esté donde esté la grieta. El contenido nunca se recorta, así que arrastrar no revela otra cosa: cambia qué mitad está iluminada.
- Fila de retratos en escala de grisesCarrusel horizontal de tarjetas de equipo: fotos en grayscale que recuperan el color al hover, crops por porcentaje para reencuadrar fuentes desiguales, y dos dots indicadores por umbral de scroll.
- Card de proyección con línea dibujadaMini tarjeta de métrica con retícula de líneas finas, curva escalonada que se dibuja con pathLength, punto blanco con glow que hace pop y cifra grande con sufijo atenuado.
- Libro de hojas apiladasDoce hojas idénticas en el MISMO sitio, separadas sólo por medio píxel de Z cada una. Con perspectiva, esos medios píxeles se convierten en el canto del bloque de papel. Y todas giran sobre el mismo origen, el borde izquierdo: ese origen compartido es lo que las hace hojas encuadernadas y no tarjetas deslizándose.
carousels
- Carrusel de cards en abanicoCards de testimonios desplegadas como una mano de cartas sobre un arco descendente: cada card se posiciona por su distancia a la activa (translateX por paso, caída vertical creciente, rotación proporcional), la central se ilumina sólida con halo blanco y las demás quedan en vidrio esmerilado.
- Noria de cards con rotateXSección pineada de 700vh donde 13 cards de proyecto rotan como en una noria vertical: cada card mapea su distancia al índice activo a y/escala/rotateX/opacidad con 7 paradas, y el fondo blureado sigue a la activa.
- Carrusel de logos en arcoNueve logos posados sobre un arco elíptico rotan cada pocos segundos: el de un extremo sale por la izquierda, la cola se recorre por layout animado de Framer y el envuelto reaparece por la derecha, con el slot central expandido como card.
- Carrusel de tres visibles con autogiroCarrusel de cards altas que muestra tres a la vez (una en móvil), rota solo cada cuatro segundos y anima cada relevo con slide más escala 0.95 en la dirección correcta vía AnimatePresence custom, con flechas que resetean el reloj.
- Anillo 3D de cards con inerciaCarrusel cilíndrico real: N cards distribuidas con rotateY(i * 360/N) translateZ(radio) dentro de una escena con perspectiva, arrastrable con inercia física, y con DEFORMACIÓN por velocidad: al acelerar las cards se inclinan y sesgan como si el aire las empujara, vía un muelle amortiguado escrito en custom properties.
- Órbita elíptica con offset-pathCarrusel orbital donde los ítems recorren una elipse real vía offset-path y offset-distance en porcentaje: escala focal con curva coseno hacia un punto de foco, contrarrotación del contenido, y un tramo con scroll pinneado que deforma la elipse (radios, tamaño, rotación) mientras el progreso pasa de autónomo a dirigido por scroll.
- Rueda vertical de pillsCarrusel vertical infinito de opciones sobre una foto: la pill activa se expande con spring y muestra su icono y caption via layoutId, las inactivas colapsan a esqueleto y se desvanecen hacia los bordes.
- Marquee agarrable con inerciaCinta de imágenes que avanza sola a velocidad constante pero se puede AGARRAR: pointer capture, arrastre 1:1, lanzamiento con inercia decayente y retorno suave al avance automático, todo en un solo rAF con wrap por mitad de pista; dos máscaras SVG curvas blancas muerden la cinta por arriba y por abajo.
- Carrusel orbital de logosFranja de logos en bucle donde cada logo se transforma por frame según su distancia al centro: curva campana que da translateZ, rotateY, escala, blur y opacidad, leyendo como un anillo 3D girando.
- Slider revelado por ventana de clipFinal de página en dos actos: el scroll abre una ventana clip-path desde el centro hasta pantalla completa con ease cubic, y el scroll restante se convierte en desplazamiento horizontal de cards de producto con parallax interno y un símbolo gigante en blend difference que cambia entre cards.
- Carrusel cilíndrico 3D de cardsCards de crédito girando en un cilindro vertical: easing magnético que hace pausa en el frente, interpolación por tramos con alineado exacto al borde de pantalla mediante matemática de perspectiva, grosor volumétrico por capas y tilt al ratón amortiguado.
- Slider de historias con dragCarrusel horizontal controlado solo por arrastre: el track combina offset base más delta del gesto con clamps, cambia de slide al superar 100px, y las cards no activas se atenúan más durante el drag.
- Carrusel con carta asomadaCarrusel de equipo con 3.25 cartas visibles (la cuarta asoma como invitación), track con anchos en calc() exactos, columna de intro que empuja la primera carta, y disco de flechas blureado que aparece al hover.
- Marquee de libros 3D en CSSEstantería infinita e inclinada de libros construidos SOLO con CSS: cada libro apila contraportada, N páginas escalonadas con skewY y degradado de canto, portada y bisagra; se solapan con margen negativo y al hacer hover el vecino se APARTA vía :has() mientras el marquee se pausa.
- Carrusel de roles con fondo camaleónCuatro figuras comparten un escenario con cuatro ROLES fijos (centro grande y nítido, izquierda y derecha pequeñas con blur, fondo aún más difuso): navegar reasigna roles y cada figura viaja a su nueva posición, escala y desenfoque en una sola transición mientras el color de fondo de TODA la página cambia al color del personaje activo.
chartsAndDataViz
- Celda con sparkline y punto más cercanoTabla compacta donde cada fila lleva una mini gráfica SVG que se dibuja de izquierda a derecha con stroke-dashoffset al montar. Al mover el cursor sobre una línea se localiza el punto de datos más próximo comparando su x local con las x de la serie, marcándolo con un círculo, una guía vertical y un tooltip de valor, y resaltando la fila entera.
- Retraso que se propaga por la redRed logística de 12 centros y 40 envíos donde inyectar un retraso en un centro lo propaga aguas abajo en orden topológico: si el retraso supera la holgura del centro más su colchón propio, el envío pierde la salida y espera a la siguiente, así que el retraso se amplifica a saltos enteros de frecuencia en vez de mantenerse. Probando cada centro por separado señala el crítico y un conmutador enseña el cálculo ingenuo, en el que todos llegan con los mismos minutos, frente al real con pérdidas de conexión.
- Grafo de trazabilidad de retiradaGrafo de treinta y nueve nodos (proveedores, materias primas, lotes, palés y tiendas) que al marcar un producto defectuoso recorre la cadena en las dos direcciones: hacia atrás intersecta los ancestros de todos los palés reclamados para localizar el origen común más específico, y hacia adelante desde ese origen calcula qué lotes, palés, tiendas y unidades hay que retirar. Un conmutador enfrenta retirar lo justo con retirar por si acaso y cifra en unidades y tiendas lo que cuesta curarse en salud.
- Configurador con grafo de restriccionesConfigurador de cuatro grupos donde las incompatibilidades son aristas de un grafo, no cadenas de condicionales: cada opción se valida clonando la configuración completa, las imposibles se apagan con su motivo y, ante un conflicto, una búsqueda en anchura propone la sustitución mínima y anima las opciones que se mueven al aceptarla.
- Carrera de barras entre clientesGráfica de barras horizontales que corre en bucle: el valor de cada cliente crece con el tiempo simulado interpolando entre puntos de datos, y cuando una barra adelanta a otra las filas se reordenan animando su posición en vez de saltar, con un rótulo de periodo que avanza en sincronía.
- Gráfica que se dibuja con punto guíaLine chart SVG revelado por un rect de clip cuyo ancho crece con ease-out cúbico mientras un punto recorre la curva real con getPointAtLength y una etiqueta flotante aparece y viaja pegada al punto.
- Grafo de nodos flotantesDiagrama de nodos conectados que vuelan desde el centro al entrar en viewport y luego flotan con senos desfasados; las aristas SVG (sólidas y discontinuas) se redibujan cada frame desde las mismas motion values, así nunca se despegan.
- Alineación de dos capas por correlaciónGenera con canvas dos capas de la misma escena con semilla fija, separa la segunda un desplazamiento conocido y le suma ruido y un salto de brillo, y luego lo encuentra sola con correlación cruzada normalizada en dos escalas: barrido grueso sobre las capas reducidas y afinado a resolución completa alrededor del ganador. Dibuja los dos mapas de correlación como rejilla de calor con el máximo marcado frente al desplazamiento real, superpone las capas tiñendo la diferencia y contabiliza cuántas comparaciones se ha ahorrado frente a la fuerza bruta.
- Dos series con cadencias distintasCruza una serie por minuto con otra cada cinco de tres maneras, arrastrando el último valor conocido con tolerancia, interpolando o solo por marcas comunes, y mide cuántos puntos del resultado están inventados y cuánto se aleja cada uno del valor que la serie lenta tenía de verdad.
- Gráfica predictiva con wipeBloque blanco con cifra serif gigante y gráfica de area SVG que se revela con un wipe izquierda-derecha via clipPath animado, punto flotante con conector.
- Serie temporal con anomalías detectadasGráfica de línea que no marca anomalías a mano, sino que las calcula: sobre una media móvil y su desviación típica en una ventana de puntos, señala cada valor que se aleja más de N desviaciones y dibuja alrededor la banda de confianza que explica por qué. Cada anomalía lleva un halo pulsante y, al señalarla, muestra la magnitud exacta de la desviación.
- Matriz de retención por cohortesMatriz triangular donde cada fila es una cohorte de entrada y cada columna un periodo posterior: la intensidad del color indica el porcentaje que sigue activo. Al señalar una celda se resaltan su fila y su columna completas, comparando el valor contra la media de esa columna, y las celdas aparecen en cascada diagonal al montarse.
- Diagrama de flujos con recorrido resaltadoDiagrama de flujo en tres columnas de nodos unidos por cintas cuyo grosor representa el volumen, dibujadas como curvas de bezier que se reparten el alto de cada nodo sin solaparse. Al señalar un nodo o una cinta se resalta el recorrido completo de principio a fin, aguas arriba y aguas abajo, mostrando el porcentaje que representa ese camino sobre el flujo total.
- Gráfica de barras con envolventePanel de estadísticas por pestañas donde cada fila muestra la barra del valor, una BANDA de rango operativo detrás (translúcida, del inicio al fin del envelope) y puntos de chispa históricos que aparecen a lo largo de la barra, todo con delays encadenados por fila.
- Sparkline de triple trazoEl resplandor no es un filtro sobre la línea: es LA MISMA `d` dibujada tres veces, a 10, a 5 y al grosor real, con opacidad y desenfoque decrecientes. Y la curva sale de convertir Catmull-Rom a cúbicas: cada tirador apunta en la dirección que une los DOS vecinos del punto, que es lo que hace que la línea pase por todas las lecturas en vez de abombarse.
- Curva de premio con lástima acumuladaRecompensa cuya probabilidad arranca baja y sube en cada fallo hasta garantizar el premio en el intento límite, dibujada dos veces a la vez: el reparto teórico que sale de la regla y el histograma real de una simulación con semilla fija que corre por trozos con requestAnimationFrame y barra de progreso. Las dos curvas se superponen y el desvío máximo se muestra en puntos, así la honestidad del sistema queda comprobada y no prometida.
- Card de stat en matriz de puntosTarjeta oscura donde una palabra o barra se dibuja con decenas de puntos posicionados a mano que aparecen con blur-fade ordenado de abajo arriba, más pill de etiqueta y eje con extremos.
checkboxes
- Interruptor de palanca en ranura hundidaUn conmutador que finge ser una pieza física, y lo hace con sombras interiores en vez de imágenes. La ranura parece hundida porque una sola sombra interior desde arriba le deja el borde superior en penumbra, y cada estría de agarre es una barra oscura con una luz de un píxel DEBAJO: puesta encima, la misma barra pasaría de surco a nervio.
- Rejilla de selección con total y puertaRejilla de fichas seleccionables donde el importe y el botón final no guardan estado propio: los dos se derivan del mismo conjunto de elegidos. En cuanto hay una selección, las fichas no elegidas bajan a opacidad 0,55, el total pasa a tinta plena y la llamada a la acción se abre contando cuántas van.
- La carpeta que se queda marcada cuando ya no deberíaRecorre todas las secuencias de clics posibles sobre un árbol de casillas de tres estados y comprueba que lo pintado en cada carpeta coincida siempre con lo que dicen sus archivos, comparando guardar solo las hojas con guardar también las carpetas y con no deducir nada.
- Interruptor de balancín atornilladoEl estado es una INCLINACIÓN, no un desplazamiento: el balancín gira 8 grados sobre una perspectiva corta y el extremo que sube es el que se ve iluminado. Deslizarlo se leería como un potenciómetro, no como algo con bisagra. Y el hueco lleva una sombra interna de 8px 15px sin nada hacia fuera, que es lo que hace que el balancín parezca caído dentro de un agujero recortado en la placa en vez de pegado encima.
clients
- Cinta de marcas con bordes en máscaraFila de marcas en bucle cuyos extremos se funden con mask-image en vez de con dos degradados encima: la máscara se come los píxeles, así que la misma cinta funciona sobre blanco, sobre un degradado o sobre vídeo sin que nadie le diga de qué color es el fondo.
- Muro de logos solo con tipografíaMarquee de partners sin un solo asset: cada marca es TEXTO con su propia pila de fuente, peso, tracking y caja (una serif ancha, una black condensada, una mono espaciada), lo bastante distintos entre sí para leerse como logotipos reales.
comparisons
- Comparador de copy con vista conmutableComparador de dos versiones de un texto con diff palabra a palabra calculado en el cliente por subsecuencia común más larga (matriz de programación dinámica y reconstrucción del camino), memoizado sobre ambos textos. Su rasgo distintivo es el conmutador entre vista lado a lado y vista unificada que conserva la posición de lectura: apunta la palabra centrada en el área visible antes de cambiar y vuelve a centrarla después, con el reordenado animado por layout.
- Corte con costura de prismaLa aberración cromática no es texto con los canales separados ni un filtro sobre las letras: es UNA barra de 5px sobre la costura, roja arriba y cian abajo, desenfocada un solo píxel. Se superpone a lo que cruce el corte y el ojo lee el borde como una separación de canales. Debajo, dos escenas completas apiladas de las que solo se recorta la de delante.
- Comparación en vivo de movimiento completo y reducidoLa misma notificación se reproduce dos veces en paralelo y sincronizada: a la izquierda con desplazamiento, rebote de escala y parallax de fondo, a la derecha con la alternativa para movimiento reducido, que sustituye ese desplazamiento por una transición de opacidad y un cambio de color de estado. Un conmutador simula la preferencia del sistema y explica con texto qué cambia entre una versión y otra.
- Orden visual frente a orden del documentoComposición de diagnóstico que expone cuando el orden VISUAL de una interfaz (posición en pantalla, de arriba a abajo y de izquierda a derecha) diverge del orden del DOCUMENTO porque el CSS ha recolocado elementos con grid y la propiedad order, dibujando ambos recorridos a la vez con su propio color y marcando con la magnitud del desfase los elementos cuya posición cambia entre una secuencia y la otra.
- Búfer adaptativo frente a fijoTres búferes de reproducción compiten sobre la misma traza de red generada con semilla fija: dos de retardo fijo y uno que estima la variación del retardo con dos medias exponenciales y mueve su objetivo rápido al subir y lento al bajar. La ficha mide los cortes y la latencia de cada uno y dibuja la ocupación en el tiempo con los cortes marcados.
- Estado frente a sucesosDoce objetos se replican a otro cliente por tres vías sobre la misma traza de red con semilla fija: sucesos continuos, fotos completas del estado a ritmo fijo y una mixta que suma sucesos solo cuando el error de predicción supera un umbral. La ficha mide bytes por segundo y error de reconstrucción, señala el objeto peor replicado de cada panel y avisa cuando la mixta deja de compensar.
cursors
- Estela de stickers del cursorEl ratón va soltando stickers: cada 150px de recorrido aparece uno (ciclando una lista en orden, no aleatorio) con rotación aleatoria, animación de pop-sostener-desvanecer de 2.2s vía variable --rot, y un máximo de cuatro vivos a la vez.
- Cuerda elástica atada al cursorCuerda simulada con integración de Verlet: una cadena de puntos guarda su posición actual y anterior, se integra con una gravedad suave y se resuelve con varias pasadas de restricción de distancia entre puntos consecutivos, fijando el primero a un ancla y el último al cursor; se dibuja en canvas con grosor decreciente hacia el extremo y, sin puntero, un ancla virtual pasea en bucle.
- Composición que se fragmenta con el cursorUn gradiente rico se divide en una retícula de teselas que conservan, cada una, su porción exacta del fondo mediante background-position calculado por celda. Las teselas cercanas al cursor se apartan radialmente, rotan y ganan sombra y profundidad; al alejarse el cursor cada una vuelve a su hueco con un muelle amortiguado y la composición encaja sin costuras.
- Cursor que se acopla a la formaCursor propio que, al acercarse a un elemento interactivo, interpola su ancho, alto y radio hasta coincidir exactamente con la caja del elemento (leída con getBoundingClientRect y getComputedStyle), se centra sobre él en modo de mezcla diferencia y añade un ligero tirón hacia el puntero sin llegar a despegarse, como un imán.
- Reveal con cursorMicro-interacción firma: al pasar el cursor sobre la imagen, una mascara radial con spring revela una variante alternativa bajo el puntero.
- Cursor fantasma coreografiadoEscena de colaboración falsa: un cursor con etiqueta de usuario recorre keyframes por la card mientras una frase entre corchetes se resalta con barra blanca que crece y texto negro revelado por clip-path a la vez.
- Anillo de pulsación mantenidaInteracción hold-to-trigger: al mantener pulsado aparece un anillo SVG pegado al cursor que se llena con easeIn mientras encoge; al completarse dispara la acción una sola vez y exige soltar para rearmar, con retroceso rápido si se suelta antes.
- Pila de aciertos con matriz inversaRecorre la pila de piezas de arriba abajo aplicando a la posición del puntero la inversa de la matriz de cada una y comprueba el punto contra la forma real en su espacio local, con el agujero excluido, así que la pieza visualmente encima puede no ser la que responde; un conmutador enseña la caja envolvente y cuenta en cuántos puntos de un recorrido determinista discrepan los dos métodos.
- Cursor magnético de doble piezaCursor custom de escritorio: punto de 8px que sigue al ratón al instante y anillo de 44px que lo persigue con spring, ambos en mix-blend-mode difference; el anillo crece 2.2x sobre elementos interactivos.
- Retícula con foco de cursorSVG decorativo de cabecera en dos capas: base a baja opacidad y una copia en verde brillante visible solo dentro de un foco radial que sigue al cursor mediante variables CSS y doble máscara.
- Estela líquida del cursorEl cursor deja ondas de agua reales: un pool rotatorio de 80 divs con backdrop-filter que pasa por un filtro SVG de turbulencia y desplazamiento, de modo que cada anillo REFRACTA el fondo mientras crece y se disuelve.
- Zonas de intención sin solapesReparte el espacio entre controles asignando cada punto al más cercano medido contra su rectángulo y solo hasta una distancia límite, de modo que los objetivos pequeños crecen todo lo que pueden sin invadir al vecino, frente a agrandarlos todos por igual, que crea zonas solapadas donde lo que se pulsa depende del orden de pintado.
- Cursor-botón que abre un segundo vídeoLa página entera es el botón: el cursor nativo se oculta y lo sustituye un círculo de vidrio con la palabra open (o close); clicar en cualquier parte funde un segundo vídeo por encima del primero, y el ended o un nuevo clic lo cierra con guardas anti doble disparo.
- Foco de cursor que revela vídeoUna imagen estática cubre un vídeo y el cursor abre un agujero de luz: seis círculos encadenados con lerp forman una estela orgánica dentro de una máscara SVG con gradiente radial, y zonas de hover controlan el play del vídeo de debajo.
- Chispas de clicMicro-interacción global en canvas: cada clic dispara un puñado de rayos radiales que nacen en el punto exacto del puntero, se alargan hacia afuera y se desvanecen en menos de un segundo. El lienzo cubre toda la sección con pointer-events desactivado salvo en el contenedor que escucha el clic, así que funciona por encima de cualquier contenido sin interferir con él.
dashboards
- Card de consola con tabs mecanografiadasPanel oscuro estilo terminal con tres pestañas (CLI, API, Consola): cada una muestra su contenido con la línea clave tecleándose caracter a caracter con cursor parpadeante, y la pestaña de consola dibuja un formulario falso con slots delineados.
- Elección de idioma que negociaSelector que no elige idioma a ojo: enfrenta la lista ordenada que pide el navegador (arrastrable, ampliable y recortable) con la que la aplicación ofrece, y aplica la búsqueda por reserva recortando subetiquetas de lo más específico a lo más general, de modo que es-AR cae en es y zh-Hant-TW pasa por zh-Hant antes de morir. Dibuja cada intento con su motivo de descarte, cae al idioma por defecto cuando nada encaja y compara en vivo con la coincidencia exacta, listando en qué preferencias discrepan.
- Auditoría de volteo derecha a izquierdaPantalla de producto en miniatura que pasa de español a árabe volteando solo lo direccional (orden, flechas, esquina asimétrica, sombra, sentido de entrada y barra de progreso) y dejando quietas las cifras, el logotipo, el reloj, el reproducir y la gráfica temporal; un panel audita elemento por elemento con resalte al pasar por encima y un modo bruto refleja la pantalla entera para enseñar los errores clásicos.
- Paso fijo contra paso variable en cuatro pantallasUn muelle amortiguado recorrido por cuatro pantallas simuladas (30, 60 y 144 fotogramas por segundo y una irregular con parones) que comparten la misma lista determinista de instantes, integrado dos veces: con paso fijo más acumulador y con el dt de cada fotograma. En los instantes de referencia comunes las cuatro trayectorias de paso fijo coinciden con 0,00 px de diferencia mientras las de paso variable se separan hasta 44,75 px, y una tabla desglosa la diferencia máxima de cada pareja de pantallas.
- Parón de un fotograma y los topes que lo domesticanUna pelota con gravedad y rebote recibe un fotograma que dura 900 ms, como al volver de una pestaña oculta, y se integra con tres estrategias a la vez: sin protección, con tope de tiempo por fotograma y con tope de tiempo más tope de pasos fijos. El panel mide la altura justo después del parón, el error contra una referencia de pasos de 1 ms (814 px de error sin protección frente a 42 px con tope) y los pasos ejecutados en ese fotograma, y marca el punto exacto en el que acotar deja de bastar y hay que descartar tiempo.
- Órbita con dos integradoresUn satélite simulado a la vez con Euler explícito y con el semiimplícito desde las mismas condiciones y el mismo paso: el explícito gana energía en cada paso y sale en espiral del lienzo, el semiimplícito cierra la órbita durante decenas de miles de pasos, y el panel dibuja la energía total de ambos con su deriva en porcentaje, el radio máximo y las vueltas que aguanta cada uno.
- Ceder el hilo por trozosEl mismo recuento de primos por división de prueba se ejecuta de una tacada y troceado con un presupuesto por trozo que se comprueba con performance.now dentro del bucle y cede el turno por MessageChannel, mientras un anillo movido por requestAnimationFrame mide fotogramas perdidos, peor intervalo entre fotogramas y tarea más larga. Las dos ejecuciones se muestran juntas con el mismo número de primos, así que lo único que cambia es cómo se reparte el trabajo.
- Maquetación contra compositor medido en vivoDos rejillas idénticas animadas a la vez: la de la izquierda escribe top, left, width, height y margin y fuerza el recálculo leyendo offsetHeight dentro del fotograma, la de la derecha solo escribe transform y opacity. El componente cronometra con performance.now el coste real de cada lado, cuenta fotogramas perdidos y el peor intervalo del rAF, y sube la carga tarjeta a tarjeta hasta encontrar el número exacto en el que las dos curvas de fps se separan.
- Cálculo descargado a otro hiloCompara el mismo recuento de primos ejecutado en el hilo principal y en un hilo aparte creado al vuelo desde una cadena de código envuelta en un Blob, con la URL revocada y el hilo terminado en la limpieza. Mide fotogramas perdidos y peor intervalo mientras corre, avanza la barra con los mensajes reales de progreso del hilo aparte y cronometra la latencia de las pulsaciones en un campo de texto para enseñar cómo se atascan cuando el hilo principal está ocupado.
- Sugerencias por vecinos comunesPanel de a quién seguir sobre un grafo de 24 personas donde cada amigo común aporta 1 / log(1 + seguidos), así que coincidir con alguien selectivo pesa más que coincidir con una cuenta popular; la barra se descompone por aportación, un conmutador enseña el ranking sin ponderar y seguir a alguien reordena la lista con FLIP.
- Escaneos contra la topologíaHistorial de escaneos de un paquete validado contra la topología declarada de la red (10 centros y 15 enlaces con su duración), que caza saltos entre centros sin enlace, escaneos repetidos, huecos donde falta la salida o la llegada, horas fuera de orden y trayectos demasiado rápidos para su duración. Después reconstruye por búsqueda en anchura el recorrido con menos escaneos inventados que explica lo observado y los inserta marcados en la lista, que se puede editar borrando escaneos o moviendo sus horas.
- Auditoría de paleta para daltonismoGenera una paleta de gráfica de seis a ocho colores en Oklch desde un color base, la aplica a un gráfico de barras y a su leyenda, y simula protanopía, deuteranopía y tritanopía colapsando el cono correspondiente en el espacio LMS sobre luz lineal. Mide la distancia perceptual de cada par en Oklab, no en sRGB, pinta la matriz triangular como rejilla de calor donde las casillas problemáticas aparecen al cambiar de simulación, y repara las colisiones con una relajación que solo mueve la luminosidad, porque el tono es justo lo que la simulación destruye, mostrando la distancia antes y después de cada par y cuánto se ha desplazado cada color.
- Jerarquía visual que se deshace en penumbraInterfaz en miniatura (aviso rojo, botón azul, acento amarillo, texto secundario, enlace) duplicada de día y tal como la recibe el ojo con la luz actual, calculando la luminosidad percibida de cada elemento con la ponderación diurna (0,2126 / 0,7152 / 0,0722) y con la nocturna de los bastones (0,0193 / 0,3915 / 0,5892) sobre luz lineal. Ordena los elementos por prominencia contra el fondo en ambos casos y enseña que el orden cambia: el aviso rojo cae del cuarto puesto al último y el botón azul sube del quinto al primero, con flechas por fila, el porcentaje que pierde el que más cae, y un control que interpola la ponderación entre día pleno y penumbra recomponiendo la jerarquía.
- Parejas de color que vibranPanel que genera una paleta de marca en un espacio perceptual escrito a mano (sRGB a lineal, luminancia relativa y Oklab polar) y recorre todas las parejas para marcar las que vibran: luminancia casi idéntica, tonos muy separados y croma alto; para cada una calcula por búsqueda binaria el ajuste mínimo de luminosidad que las saca de la zona de riesgo sin tocar tono ni croma, y lo enseña en una muestra pequeña del borde antes y después y en un mapa de dispersión con la zona peligrosa sombreada.
- Diferencia de efectos antes de guardar una reglaEditor de una automatización ya activa que, antes de guardar, pasa la condición vieja y la nueva por un histórico de incidencias y reparte cada registro en tres listas exactas (sigue afectado, deja de estarlo, pasa a estarlo) con recuento, porcentaje y total antes y después. Dentro de los que salen separa los que la versión activa ya modificó, porque revertirlos obliga a tocar trabajo hecho, y un conmutador aísla el efecto de un solo término frente al del cambio completo.
- Regla inducida a partir de ejemplosTabla de incidencias donde marcas dos o tres filas y el componente induce en el cliente la condición más simple que las cubre sin colar ninguna otra: fabrica términos acotados a partir de los marcados (igualdad, pertenencia a un conjunto pequeño y rango ajustado), prueba primero las reglas de un término y luego las conjunciones más cortas, y lista las candidatas con su cobertura. Cuando ninguna condición separa lo marcado lo dice sin adornos y señala el registro idéntico que lo impide.
- Orden de ejecución seguro por dependenciasPanel de automatizaciones que declaran qué campos leen y cuáles escriben: el componente monta el grafo de dependencias, lo ordena con Kahn guardando el nivel de camino más largo y dibuja la secuencia por niveles indicando qué reglas pueden correr a la vez. Al añadir una dependencia hacia atrás aparece el ciclo, que localiza con búsqueda en anchura quedándose con el de menos aristas, lo resalta y propone qué enlace romper diciendo qué regla dejaría de ver el dato actualizado.
- Muebles con holgura comprobadaPlanta de salón a escala real en centímetros donde los muebles se arrastran y cuatro reglas geométricas se recalculan a cada píxel: distancia entre rectángulos (no entre centros), barrido de cada puerta resuelto como el ángulo exacto en que la hoja toca un mueble, separación del sofá a la televisión y corredor libre entre las dos puertas, hallado con una búsqueda de camino más ancho sobre una rejilla de distancias a los obstáculos. Las holguras se dibujan como cotas acotadas al centímetro y cada regla rota dice cuántos centímetros faltan.
- Accesibilidad comprobada sobre la plantaPlanta de vivienda declarada en centímetros que se rasteriza para calcular en cada punto la distancia a la pared más cercana, es decir el radio del mayor círculo que cabe ahí; desde la entrada propaga un camino más ancho con montículo binario, de modo que sabe qué estancias alcanza la silla, por qué puerta se queda fuera cada una y si dentro cabe el círculo de giro completo. El mapa se inunda en verde, ámbar y rojo, y los motivos se leen en centímetros que faltan.
- Compatibilidad demostrada, no prometidaGenera cientos de registros válidos según el contrato antiguo, los lee con el nuevo y, cuando uno falla, reduce el caso quitando campos opcionales, acortando listas y bajando valores mientras siga fallando, hasta dejar el contraejemplo mínimo que explica la incompatibilidad.
- Paneles de producto a color plenoSecciones de perfumería en split 50/50: mitad vídeo, mitad panel de color saturado con la ficha del producto (etiquetas arriba, packshot centrado, notas de salida-corazón-fondo y botón SHOP con barrido blanco), alternando lado por sección e invirtiendo el orden en móvil.
- Regenerar solo lo que depende del parámetroUna composición generada por cinco parámetros (densidad, paleta, tamaño, rotación, textura) con una tabla de dependencias declarada: tocar la paleta rehace solo los 30 campos de color de los 150 totales, un 80% de trabajo ahorrado, mientras que tocar la densidad cambia el número de elementos y obliga a rehacerlo todo con 0% de ahorro. Tras cada cambio parcial el componente reconstruye la composición entera desde los mismos parámetros y la compara campo a campo, contando comprobaciones y discrepancias.
- Bandeja que ordena por causalidadBandeja de avisos que llegan desordenados, cada uno con un reloj vectorial de tres orígenes: la entrega aplica la regla causal, así que lo que depende de un aviso que todavía no ha llegado se queda retenido con flechas SVG dibujadas hacia lo que falta, y al caer el eslabón que faltaba el bloque entero entra de golpe con FLIP. Un conmutador enseña la misma lista por orden de llegada, donde la respuesta aparece antes que la pregunta.
- Cola con contrapresión por créditoSimulación real de una ventana de crédito entre un emisor de avisos y un receptor: cada aviso gasta un crédito y el receptor lo devuelve al terminar, de modo que la ocupación en vuelo nunca supera la ventana. Un interruptor apaga el control y entonces la cola crece hasta el tope y empieza a tirar avisos, con dos contadores y una gráfica que superpone la ocupación de los dos modos para que la diferencia se vea.
- Silenciador por ritmo de fuenteBandeja que mide el ritmo real de cada fuente con una ventana deslizante de avisos por minuto y, al superar el umbral, propone silenciarla mostrando su gráfica; lo retenido se entrega después agrupado en un solo aviso desplegable.
- Filtros encadenados con recuento de descarteCadena de chips de filtro donde cada uno muestra cuántos registros descarta él, no en el total, sino sobre lo que le llegó del filtro anterior. Quitar un chip intermedio recompone la cadena entera y recalcula en cascada los descartes de los siguientes, animando cada cifra hacia su nuevo valor.
- Consola de eventos en vivo con anclaje al finalConsola de registro que recibe líneas de forma continua y mantiene la vista anclada al final mientras el usuario no interviene; en cuanto desplaza hacia arriba el anclaje se suelta, aparece un aviso con el número de líneas nuevas y un botón para volver abajo, y un filtro por nivel más un buscador que resalta coincidencias operan sobre el flujo sin detenerlo.
- Panel que cuadra su propio redondeoPanel de ventas donde el total grande, la fila de porcentajes y la tabla redondean cada uno por su cuenta y dejan de cuadrar: el componente audita solo las cifras visibles (porcentajes que suman 101, columna que no da el total, categoría con importe que se muestra al 0 %) y las cuadra con el método del resto mayor, dando el punto sobrante a las filas de mayor resto y escribiendo "menos de 1 %" en vez de cero.
- Dashboard mock codificado a manoLa preview de producto del hero construida en JSX real, no captura: wrapper de vidrio esmerilado claro, sidebar y toolbar en miniatura a 11px, gráfica de área con curva Bezier SVG artesanal y tabla de transacciones, todo select-none y recortado por el fold.
- Carrera de políticas de embarqueSimulación por pasos del embarque de un avión dibujado en planta: cada pasajero avanza una fila por paso si el pasillo está libre, se detiene a guardar el equipaje bloqueando a los de atrás y suma penalización cuando obliga a levantarse a quien ya está sentado. Cinco políticas corren con la misma semilla y los mismos equipajes, y la de atrás adelante, la más ordenada en apariencia, termina bastante después que la de ventana primero.
- Reprogramación por el menor dañoItinerario confirmado dibujado como cadena de cinco eslabones (vuelo con escala, hotel de dos noches, tren y vuelo de vuelta) del que se puede cancelar cualquier tramo: el componente busca entre las alternativas declaradas y las ordena por lo poco que rompen el resto del viaje, sumando el cambio de ciudad, el hotel perdido, el tren que se cae, el salto de día, las personas afectadas y los minutos por encima de la hora límite. Al recorrer cada alternativa la cadena muestra en vivo qué eslabones siguen intactos, cuáles se recolocan y cuáles se caen, con una frase en español que explica qué se pierde, y avisa cuando ninguna llega a tiempo ofreciendo la menos mala.
- Firma de API con tipos que se desplieganReferencia de una función de API donde cada tipo compuesto se despliega en el sitio y empuja el resto con transición de altura medida, mientras la sangría y un contador marcan la profundidad abierta. El componente lleva el camino de tipos ya abiertos y, al detectar un ciclo (un comentario que contiene comentarios), en vez de expandir sin fin marca el punto como recursivo y ofrece un salto animado a la definición de más arriba, que se resalta.
- Ejemplo ejecutable con árbol sintácticoBloque de código editable de un lenguaje mínimo (números, textos, + - * /, variables con let y tres funciones) interpretado por un analizador léxico y un parser de descenso recursivo escritos a mano, sin eval: muestra a la vez el resultado y el árbol sintáctico dibujado con nodos etiquetados. Los errores señalan línea y columna exactas mientras el último árbol válido queda atenuado, y un botón recorre la evaluación resaltando cada nodo con el valor que devuelve.
- Conflicto de edición simultáneaDos versiones del mismo fragmento se enfrentan línea a línea: lo que coincide aparece atenuado y lo que difiere se resalta y alinea en dos columnas. Eligiendo lado a lado de qué versión viene cada línea (una, la otra o ambas en orden) se compone en tiempo real una tercera versión en un panel inferior, con un aviso que indica si quedan conflictos por resolver.
- Comentarios anclados que resisten el reflujoComentarios anclados a un fragmento exacto del contenido, colocados en el margen a su misma altura y unidos por una línea curva: al cambiar el ancho de la columna el texto se recompone y cada comentario recalcula su posición y redibuja la línea, resolviendo los solapes entre hilos cercanos empujándolos hacia abajo sin perder nunca el anclaje.
- Metrónomo con reloj de audioMetrónomo que no programa el pulso con un temporizador: un tic de veinte milisegundos mira hacia delante una ventana de anticipación y encola cada clic sintetizado con su instante exacto del reloj del AudioContext, mientras el fotograma mide cuánto tarda el dibujo en alcanzar ese instante y lo apila en un histograma. Un conmutador reproduce el mismo compás con setInterval para ver la deriva acumularse de verdad sobre la rejilla ideal.
- Editor de recorte de silenciosEditor visual de una grabación de voz cuya onda se genera con un PRNG de semilla fija: un umbral arrastrable detecta de verdad los tramos por debajo del nivel durante más de una duración mínima, y al aplicar el recorte esos tramos colapsan a cero mientras la duración total y las marcas de tiempo de la transcripción se remapean restando el silencio eliminado antes de cada frase.
- Secuenciador de 16 pasosRejilla de dieciséis pasos y cuatro voces sintetizadas en el navegador (bombo con caída de tono, caja de ruido en paso banda, charles de ruido en paso alto y un tono con envolvente) que se encolan con antelación contra el reloj del AudioContext; el cabezal no cuenta fotogramas, interpola su posición desde currentTime, y las celdas se pintan arrastrando, con patrón de ejemplo, borrado y aleatorio de semilla determinista.
- Onda de dos canales con detección de faseDos canales de un tono con armónicos dibujados en espejo y, en medio, la suma en mono calculada de verdad muestreando un AnalyserNode por canal detrás de un ChannelSplitter, así que al invertir la fase la onda central se aplana sola. Un mando de desfase continuo recorre la transición del refuerzo a la cancelación y el medidor de nivel de la suma cae hasta el silencio.
- Mockup de dashboard autoescaladoUna maqueta de producto (chrome de navegador con semáforo, sidebar, tabla, stats) construida a un ancho de diseño FIJO de 896px y escalada como una unidad: un ResizeObserver calcula containerWidth/896 y aplica transform scale con origen arriba-izquierda, ajustando la altura externa al alto interno escalado.
- Cuentas que actúan juntasPanel de moderación que detecta actuación coordinada entre 30 cuentas: enlaza dos cuentas cuando responden a la misma publicación con pocos minutos de diferencia varias veces, pondera cada coincidencia por 1 partido por la raíz de lo concurrida que estaba esa publicación y extrae los grupos densos expandiendo desde la arista de mayor peso. Grafo de cuerdas con los grupos coloreados más una línea temporal por cuenta donde la ráfaga del grupo se distingue del ruido; dos sliders (ventana y densidad) hacen aparecer grupos falsos al ensancharse y pierden el real al estrecharse.
- Cola por daño esperadoCola de moderación que no ordena por llegada ni por gravedad, sino por el daño esperado hasta que haya revisor libre: proyecta el alcance de cada caso con crecimiento compuesto durante la espera estimada de la cola y lo multiplica por la gravedad, así que un caso leve que se difunde rápido adelanta a uno grave y estancado. El reloj simulado reordena la lista con FLIP, cada caso lleva su curva de alcance, y un panel compara el daño total de la jornada simulando las tres políticas sobre los mismos casos; con más revisores la ventaja se desvanece.
- Isócronas sobre rejilla editableMapa esquemático de 40 por 26 celdas donde un Dijkstra con cola de prioridad calcula las bandas de 5, 10 y 15 minutos desde un origen arrastrable y las pinta siguiendo el orden real de visita, así que el color se propaga por las avenidas y rodea los edificios. Los muros se pintan y se borran arrastrando: al soltar se recalcula todo y el panel dice cuántas celdas alcanzables se han perdido en cada banda.
- Distorsión entre proyeccionesComparador que aplica las fórmulas reales de Mercator, equirectangular y ortográfica e interpola punto a punto entre dos de ellas, de modo que la retícula de meridianos y paralelos se deforma de forma continua. Cinco cuadros de 10 por 10 grados miden su área proyectada con la fórmula de Gauss y la dividen por el área esférica real, revelando que Mercator dibuja x4,0 a 60 grados y x8,7 a 70.
- Paleta de comandos con demo automáticaModal de paleta de comandos (cmd+K) que se autodemuestra tecleando y borrando una consulta, filtra en vivo una lista de comandos agrupada por secciones y desliza un resalte animado hasta la fila activa con un muelle.
- Predicción del cliente y reaplicación de entradasUn objeto que se mueve con el teclado o arrastrando mientras un servidor simulado confirma con retardo: el cliente numera cada entrada, la aplica al instante y, cuando llega una instantánea vieja, parte del estado confirmado y reaplica solo las entradas posteriores, así que sobre el mismo recorrido las correcciones que no contradicen nada cuestan 0,00 px frente a los 16,5 px de media que tira el modo que pisa la posición, y el muro que el cliente desconoce enseña cuándo la corrección sí tiene que mover.
- Cámara lenta que mueve todo lo demásCalcula la duración del montaje integrando el inverso de la velocidad a lo largo del tramo, porque con entradas y salidas suaves la división directa se equivoca, e invierte ese mismo mapa para convertir el cabezal de montaje a origen y mantener el audio sincronizado.
- Descuadre que se diagnostica soloUna lista de apuntes editables y un descuadre contra el extracto que el componente diagnostica de verdad: si la diferencia es divisible entre nueve busca qué apunte con dos cifras intercambiadas la explica, si es el doble de un apunte señala un signo invertido, si coincide con uno señala duplicado u omitido y si es un múltiplo de diez sugiere un cero de más. Cada hipótesis se verifica sustituyendo el apunte y comprobando que la suma cuadra al céntimo, así que solo aparecen las que encajan, ordenadas por probabilidad, y cuando ninguna encaja lo dice.
- Qué facturas suma este ingresoPanel de conciliación que resuelve la suma de subconjuntos sobre céntimos enteros con una tabla de programación dinámica en bitsets, reconstruye todas las combinaciones de facturas que cuadran con la transferencia y avisa cuando hay más de una, dejando fijar o excluir facturas para ver cómo se deshace la ambigüedad; si no hay cuadre exacto da la combinación más cercana por debajo y por encima con su diferencia.
- Dashboard mock como product shotInterfaz de dashboard falsa en modo claro incrustada bajo el CTA de un hero oscuro: sidebar de iconos, tres stat cards con mini gráficas, gráfica de barras, tabla de deals y header con buscador.
- Widget now playingGrupo flotante esquina inferior: card blanca de pista con cuadrado de icono azul, barra de progreso y tiempos, más fila de controles Prev/Next y corazón con estado como botones blancos independientes.
- Ruleta con probabilidades realesRuleta de seis sectores cuyos ángulos se reparten según la probabilidad declarada, con el porcentaje escrito dentro de cada uno: un sector del 34% ocupa el 34% del círculo, no un sexto. El resultado se sortea antes de girar con un generador con semilla y la curva de frenado termina exactamente centrada en él, sin corregir al final, mientras un contador compara resultados obtenidos y esperados con un botón para tirar cien veces y ver la convergencia.
- Árbol de habilidades con alcance calculadoÁrbol de catorce nodos con requisitos alternativos donde el componente resuelve el grafo de verdad: con Dijkstra calcula qué nodos están al alcance con los puntos que quedan, por qué falta cada bloqueado y la ruta más barata hasta el que señalas, sumando costes y diciendo cuántos puntos faltan. Al desbloquear uno, el nuevo frente se ilumina en cascada según la distancia en saltos, y subir los puntos disponibles abre ese frente en directo.
- Rejilla de convergencia por permutacionesPanel que edita sin conexión un contador y un conjunto de etiquetas desde varios dispositivos y prueba en el cliente todos los órdenes de llegada posibles (los entrelazados que respetan el orden de cada dispositivo, hasta 1680) pintando una celda por orden. Su rasgo distintivo es que las estructuras convergen por construcción, el contador guarda el reparto por dispositivo y el conjunto guarda marcas de añadido con su origen más marcas de borrado, así que la rejilla queda uniforme; el conmutador a la versión ingenua (un número que se sobrescribe y un conjunto sin marcas) llena la misma rejilla de valores dispares y cuenta cuántos estados finales distintos han salido.
- Reordenar sin conexión con claves intercalablesLista de tareas que dos personas reordenan a la vez sin conexión, donde la posición no es un índice entero sino una clave de texto ordenable generada como punto medio alfabético entre las claves vecinas, de modo que mover algo no renumera nada y las dos tandas de movimientos se fusionan ordenando por clave. Al intercalar una y otra vez en el mismo hueco la clave se alarga carácter a carácter hasta que salta el aviso de renumerar, y un conmutador replica los mismos movimientos con índices enteros para ver la lista que ninguna de las dos personas pidió.
- Fusión de texto editado sin conexiónPanel que fusiona las ediciones que dos personas hicieron sin conexión sobre el mismo párrafo, dando a cada carácter un identificador estable de origen más contador y anclando cada inserción a su carácter vecino en vez de a un índice, con los borrados como lápidas que se pueden mostrar tachadas. Su rasgo distintivo es que dibuja la reconexión en los dos órdenes posibles a la vez: con identificadores ambos textos salen idénticos carácter a carácter, y el conmutador a la fusión por posiciones numéricas deja las mismas ediciones descolocadas y con palabras perdidas, resaltando la diferencia carácter a carácter con una subsecuencia común más larga.
- Pila de deshacer reescrita contra cambios ajenosEditor de líneas donde, al llegar una operación de otra persona, las entradas de la pila de deshacer dejan de significar lo mismo y el componente las reescribe contra la remota, mostrando cada una antes y después con su estado (válida, reescrita o descartada) y el motivo. Un conmutador apaga la reescritura y entonces deshacer borra o duplica trabajo ajeno, con los dos textos resultantes enfrentados y la línea perdida señalada por su nombre.
- Cadena de consentimientos verificableUn registro de decisiones de consentimiento donde cada tarjeta resume con SHA-256 nativo el resumen de la anterior junto con su propio contenido, así que al editar una decisión antigua la verificación recorre la cadena eslabón a eslabón y señala el primero roto y todos los arrastrados, enfrentando el resumen registrado con el recalculado. Un botón rehace la cadena para que vuelva a cuadrar consigo misma y deja a la vista que el resumen final ya no es el que se selló.
- Resumir un teléfono no lo anonimizaDos partes cruzan sus listas de contactos intercambiando resúmenes SHA-256 calculados con crypto.subtle, y el mismo panel recorre todo el bloque de teléfonos posibles en trozos cancelables de milisegundos hasta recuperar los números originales, con intentos y tiempo medidos; al activar el secreto compartido el recorrido termina sin un solo acierto y la intersección sigue funcionando.
- Actualización optimista con retrocesoLista de votos donde cada acción cambia el valor al instante y queda en estado provisional (opacidad reducida y punto pulsante) mientras se confirma; si la operación simulada falla, el valor retrocede animado a su estado anterior en vez de saltar, con un aviso de la razón y botón de reintentar.
datePickers
- La hora que no existió nunca y la que ocurrió dos vecesRecorre los mil cuatrocientos cuarenta minutos de los días en que cambia la hora contando a cuántos instantes reales corresponde cada minuto local, cero, uno o dos, y comprueba con respuesta sabida que el día del adelanto pierde justo los minutos del salto y el del atraso los repite.
- Selector de fecha por ruedas cilíndricasTres ruedas que giran bajo una banda central fija. Una sola distancia continua en filas gobierna a la vez el ángulo, la escala y la opacidad de cada fila, y por ser continua y no por escalones la rueda sigue siendo creíble a media arrastrada. La rueda de días se recorta al mes elegido, así que el 30 de febrero no se puede seleccionar.
dialogs
emptyStates
- Bandeja vacía con sobre abiertoLa solapa es un triángulo hecho de NADA más que bordes: la caja mide 0 por 0, los bordes laterales son transparentes y sólo el de arriba tiene color, así que lo que se pinta es la cuña entre ellos. Y se abre con transform-origin en su propio borde superior, que es por donde dobla una solapa de verdad; desde el centro giraría en vez de abrirse.
- Página 404 ilustradaPágina 404 de viewport exacto sin scroll: ilustración fija de fondo, título con iconos degradados flotando anclados a él, tags resaltados en el subtexto y cards de navegación con hover lift.
- Estado vacío con trío de iconos que se abreTarjeta de borde discontinuo cuyo emblema son tres fichas de icono solapadas 8 px y hundidas 4 px: al pasar el cursor se separan y se inclinan como una mano de cartas, aparece una retícula de puntos por debajo y el borde se oscurece, todo con la misma curva de 300 ms.
- Qué se enseña mientras se comprueba si el dato sigue valiendoRecorre las 128 visitas que salen de cruzar lo que tarda la comprobación, lo que dura la visita, cuándo va a pulsar el visitante y si el dato cambió, todas con copia guardada y ya vencida, y compara cuatro políticas midiendo segundos de esqueleto, segundos con el dato viejo, clics perdidos y visitas que acaban sin ver lo nuevo.
- El panel que pone un guion donde hay un ceroRecorre todas las formas en que pueden llegar las métricas de un panel, ausentes, nulas, valiendo cero, vacías, falsas o normales, y compara tres maneras de poner el valor por defecto, contando por separado las que esconden un dato real y las que fingen un dato que no existe.
faqs
features
- El editor que no ensucia el registroUna orden a pantalla completa pinta en una rejilla aparte y al salir devuelve intacto lo que había, frente a pintar sobre el mismo búfer, que sobrescribe las filas del registro y deja la sesión ilegible al cerrar el editor.
- El código de color partido en dos escriturasInterpreta las secuencias de color de una terminal con un autómata que guarda en qué punto se quedó al acabarse la escritura, así que una secuencia cortada por la mitad se aplica igual, frente al que analiza cada trozo por separado y escupe los restos como texto visible.
- Completar hasta donde no hay dudaEl tabulador inserta el prefijo común más largo de los candidatos y se para donde deja de haber una sola opción, con la lista solo si sigue habiendo ambigüedad, frente a meter el primer candidato entero, que obliga a borrar lo insertado casi siempre.
- Lo que ve la orden no es lo que ves túLa misma orden emite columnas alineadas con color cuando escribe a una pantalla y campos separados por tabulador sin color cuando escribe a un archivo, los dos desde el mismo modelo de datos, porque sin comprobar el destino el archivo acaba lleno de códigos que ninguna herramienta sabe leer.
- Todavía puede, aunque los puntos digan que noDecide si un equipo sigue vivo repartiendo las victorias de los partidos que quedan entre rivales, porque esos partidos las reparten a la fuerza, en vez de mirar solo si alguien ya le supera, y cuando está eliminado nombra el grupo de rivales que no cabe bajo su techo.
- Emparejar la ronda siguiente sin repetir rivalesEmpareja la ronda buscando sobre todo el campo una combinación sin repetir rival y lo más igualada posible en puntuación, retrocediendo cuando una elección cierra el camino, frente a juntar a los de la tabla de dos en dos, que repite parejas porque los que van igualados llevan rondas cruzándose.
- Órbita de productosSeis productos rotando en tiempo real alrededor de un titular con palabra serif glow. Hover: la órbita entera se congela y el producto crece con sombra.
- Evaluado con datos que ya vioSepara el mismo conjunto al azar y por fecha, mide la diferencia de acierto entre las dos evaluaciones y enseña de dónde sale: al barajar, los registros casi idénticos de una misma sesión caen a los dos lados y el vecino más cercano trae la respuesta copiada.
- Explorador de formas pluralesEl mismo mensaje con cantidad resuelto con Intl.PluralRules en idiomas con dos formas, cuatro y seis, más el japonés que solo tiene una: cada tarjeta enseña la categoría que ha salido y las que ese idioma admite, se distingue el plural cardinal del ordinal, y una matriz de cantidades trampa demuestra que en ruso el 21 va como el 1 y el 11 no.
- Gana quien pierde contra todosConstruye la matriz de enfrentamientos por parejas desde las papeletas ordenadas y detecta a quien gana todos sus duelos, o el ciclo en el que nadie los gana, enfrentándolo con el recuento a una sola opción sobre las mismas papeletas.
- Repartir los votos que sobranTransfiere el excedente de quien pasa la cuota repartiendo TODAS sus papeletas a fracción del voto, lo que da el mismo resultado en cada recuento, frente a sacar al azar exactamente tantas papeletas como votos sobran, que con dos escaños elige a personas distintas según el sorteo.
- Guardar las últimas plazas para quien llegue tardeCalcula cuántas plazas conviene no vender baratas comparando la probabilidad de que aún llegue alguien dispuesto a pagar la tarifa alta contra el cociente entre las dos tarifas, en vez de vender por orden de llegada o guardar un porcentaje redondo que no mira la demanda.
- Latencia de interacción medidaUna interfaz de juguete con botones, interruptor y campo de texto donde cada interacción se cronometra de verdad, del evento al fotograma ya pintado con dos requestAnimationFrame anidados, separando el trabajo del hilo del pintado; las muestras caen en un histograma vivo con la mediana, el peor caso y el percentil marcado sobre las barras, y un control de trabajo artificial estira la cola sin mover la mediana.
- El agua que falta no es toda fugaSepara el agua no cobrada en tubería rota y contador que registra de menos aprovechando que de madrugada casi nadie abre un grifo, restando al caudal de la hora más tranquila la dotación nocturna legítima, y se prueba con dos casos de respuesta conocida, uno sin fugas que debe dar cero y otro con la dotación acertada que debe dar la fuga exacta.
- Lo que rompe la tubería no es la presión altaReduce la curva de presión a sus máximos y mínimos y recorre esa lista con una pila cerrando cada vaivén en cuanto el tramo siguiente lo iguala, para contar ciclos enteros y sueltos, con una prueba de recorrido conservado y un centinela de escalera creciente elegido porque una regla de cierre equivocada sí lo falla.
- Landing con formato emailPágina entera maquetada como un email premium de 640px: hero de vídeo con gradiente de fusión, pasos numerados con badge lima, video-cards con zoom al hover, card CTA lima y footer de newsletter.
- La misma célula rítmica empezando por otro sitioReduce cada célula de una biblioteca a su rotación menor avanzando dos candidatas a la vez y descartando de golpe el bloque recorrido cuando una pierde, para agrupar las que son la misma girada, con contador de comparaciones frente a probar las rotaciones una a una y la exigencia de que los dos métodos devuelvan la misma forma.
- Cuantizar mata el grooveSepara la desviación de cada golpe en la parte que se repite igual en todas las pasadas, que es el groove, y la que cambia cada vez, promediando por posición de compás, para corregir solo la segunda, con un suelo de ruido que el propio componente mide simulando pasadas sin groove a partir del temblor estimado.
- Cuándo vuelven a coincidir tres contra cuatroDesarrolla en fracción continua la razón entre dos pulsos que no encajan y saca sus mejores aproximaciones racionales, quedándose con las que dejan un hueco por debajo de la tolerancia, contra recorrer los pulsos uno a uno, con las dos cuentas midiendo el mismo hueco en tiempo.
- La segunda toma va más lenta en el estribilloAlinea dos interpretaciones de la misma melodía construyendo la tabla de coste entre sus notas y buscando el camino mínimo que solo avanza, cuyos saltos absorben los adornos de más y las notas comidas, contra emparejar en bloque, que a partir del primer adorno va corrido y no puede seguir una deriva que cambia a lo largo de la toma.
- El dato que llega tardeCierra las ventanas con una marca de agua igual al instante de suceso más alto visto menos una tolerancia, y enfrenta las dos salidas posibles para lo que llega después: tirarlo, y que el número publicado se quede corto para siempre, o revisar la ventana y publicar una corrección.
- El último cubo está a mediasMarca el intervalo en curso con la fracción de tiempo transcurrida y lo proyecta por ritmo con una horquilla que se estrecha sola, en vez de dibujarlo tal cual, que finge un desplome a la misma hora todos los días, u ocultarlo, que esconde lo que está pasando ahora.
- La resolución se pierde con la edadUna consulta que cruza la frontera de retención pega dos resoluciones distintas y el tramo reciente parece mucho más movido sin serlo, así que elige la resolución más gruesa que cubre todo el rango y vuelve a agregar el tramo fino para igualarla.
- Repartir la herencia cediendo lo que menos dueleReparte lotes indivisibles entre dos herederos dando cada uno a quien más puntos le puso y cediendo después en orden de cociente entre valoraciones hasta igualar los porcentajes, partiendo el último lote en la fracción exacta, con la prueba de que ceder por tamaño también iguala y deja a los dos peor.
- La envidia que no se quita pero sí se acotaReparte bienes indivisibles por turnos rotatorios y comprueba, para cada par de herederos, que quitando un solo bien del montón del otro la envidia desaparece, aplicando la misma prueba al reparto por valor global, que la suspende en buena parte de los ajustes, y avisando cuando el caso es demasiado fácil para distinguirlos.
- Pujas a ciegas por la herencia y el dinero que cuadra la diferenciaReparte lotes indivisibles dando cada uno a quien más puja, calcula la parte justa de cada heredero con sus propias cifras y liquida en dinero lo que sobra o falta, distinguiendo las dos cuentas que se cumplen solas, la suma cero y el máximo del sobrante, de la única que sí puede fallar, que es que el sobrante nunca salga negativo.
- El sorteo del orden de elección contra el reparto simultáneoCompara sortear quién elige primero, promediando sobre todas las ordenaciones posibles, con el reparto en que todos avanzan a la vez sobre su lote favorito hasta agotarlo, y mide para cada heredero y cada corte de su lista si uno queda por debajo del otro, con un caso de referencia fijo donde el sorteo pierde y el recuento honesto de cuándo no.
- El higrómetro premia a la peor decisiónCompara calentar y ventilar razonando sobre el agua por kilo de aire seco en vez de sobre la humedad relativa, de modo que calentar deja el punto de rocío exactamente donde estaba mientras el higrómetro se desploma, y decide por la distancia entre la temperatura de la hoja, que sigue al aire con retraso, y ese rocío.
- Al final del gotero llega menosResuelve el sistema acoplado en que cada gotero da caudal según su presión y la presión cae según el caudal que aún arrastra el tramo, caminando desde el final del ramal y cerrando por tanteo contra la presión de entrada real, con la pendiente incluida y la comparación entre goteros normales y autocompensantes.
- El agua que vuelve se va salandoLleva por separado la cuenta del agua y la de la sal en un circuito cerrado, donde la planta bebe agua y deja casi toda la sal, y despeja el punto en que lo que entra iguala a lo que sale, comprobando ese valor contra la simulación vuelta a vuelta en lugar de enseñar solo la fórmula.
- La subasta que baja hasta que alguien la paraCalcula hacia atrás, desde el último tramo, el precio al que conviene aceptar en una subasta descendente, comparando lo que se gana parando ahora contra lo que cabe esperar si sigue bajando descontando la probabilidad de que otro la pare antes.
- Los que se van no salen en la estadísticaSimula una sala donde cada persona trae su propio aguante y se marcha si le toca esperar más, corriendo la misma tanda dos veces con los mismos sorteos para aislar el efecto, y enseña que el indicador calculado sobre los atendidos mejora cuanta más gente se va, además de que el abandono sujeta una sala que sin él tendría cola sin fin.
- Dos personas triando y el acuerdo que engañaDescuenta del porcentaje de acuerdo entre dos clasificadores lo que coincidirían clasificando a ciegas con sus mismas costumbres, calculado desde las frecuencias con que cada uno usa cada nivel, y se comprueba rehaciendo la tabla como si no se hubieran mirado, donde el resultado tiene que salir cero clavado.
- Cuántos boxes antes de que la espera se dispareCalcula la probabilidad de encontrar todos los puestos ocupados encadenando el resultado de uno al siguiente sin factoriales, y de ahí la espera, que se dispara al acercarse al lleno, comprobando el número por un segundo camino independiente que suma la distribución estado a estado y midiendo cuántos puestos de sobra hacen falta, que crecen como la raíz de la carga.
- Bajar el listón llena la sala de críticosRecorre el umbral de una escala de triaje sobre dos poblaciones solapadas y calcula en cada punto cuántos graves se escapan, cuántos leves se cuelan y qué proporción de los mandados a crítica lo son de verdad, que se hunde cuando los graves son raros, buscando el corte que minimiza el daño con el coste asimétrico de cada error.
- A qué minuto de cada hora sale cada líneaElige el minuto de salida de cada línea de un horario que se repite, y enseña por qué hay enlaces imposibles de cuadrar a la vez: al dar la vuelta a un ciclo las diferencias se cancelan y la suma firmada de las esperas cae siempre en el mismo resto al dividir por el periodo, un mínimo que ninguna elección de minutos puede quitar.
- El autobús tarda más de lo que dice la frecuenciaMide la espera de cientos de llegadas repartidas por la hora y contrasta las dos estimaciones que podría enseñar la app, la mitad del intervalo medio y la media de los huecos pesada por su propio largo, señalando a la que miente solo cuando la separación entre ambas supera lo que la medición resuelve.
- Sácalo antes de que esté hechoResuelve la difusión del calor por capas con el paso de tiempo atado al criterio de estabilidad y con la meseta de evaporación que mantiene la superficie cerca del hervor, para enseñar cuánto sigue subiendo el centro durante el reposo y cuánto se pasa quien espera a que marque el punto dentro del horno.
- Tres habitaciones que no valen lo mismoAsigna habitación y precio a la vez resolviendo las restricciones de envidia como un sistema de diferencias, con los precios sumando exactamente el alquiler, y al redondear a euros busca el punto entero que las siga cumpliendo, enseñando la envidia que queda cuando la región factible es más estrecha que un euro, frente a dividir entre tres, que deja a alguien queriendo cambiarse casi siempre.
- Un archivo que sobrevive a ser abiertoEntrecomilla solo los campos que llevan el separador, comillas o un salto, duplica las comillas de dentro y escapa aparte los valores que una hoja de cálculo ejecutaría, y lo demuestra volviendo a analizar el archivo emitido y comparando campo a campo.
- Los milímetros que la impresora no tocaSitúa la maqueta sobre la hoja en milímetros, dibuja el área imprimible y el área segura, y clasifica cada caja por su desbordamiento real contra cada límite, en vez de por cómo se ve, con una recolocación que devuelve todo dentro y dice cuántas cajas movió.
- Cuadrante de brasa con humoTres manchas desenfocadas colgadas del MISMO punto, y la tercera es NEGRA. Dos manchas cálidas solas dan un centro plano y quemado; poner encima un radial negro al 70 por ciento abre un agujero en la luz justo donde el ojo va primero, y eso es lo que se lee como humo. Encima, una cuadrícula de dos por dos cuyos bordes de 1px son la única geometría dura de la pieza.
- Collage de recortes con parallax propioSección manifiesto con recortes de producto esparcidos en dos capas (detrás y delante del texto): cada pieza declara velocidad, deriva lateral y rotación en data-attributes y se mueve según la distancia del centro de la sección al centro del viewport.
- Quién puede irse antes sin que se caiga nadaCalcula por turno cuántas horas se le pueden quitar por delante y por detrás manteniendo la cobertura mínima hora a hora, marca los que no admiten ni una, y mide que las holguras individuales no se pueden sumar porque varios turnos se apoyan en la misma hora sobrante.
- Lo que firmaste no es lo que se veRenderiza el mismo documento en el entorno de quien firma y en el de quien comprueba, y marca los elementos cuya representación depende del entorno, la fecha que se calcula al abrir, el importe que viene de fuera, la tipografía que no va dentro y el anexo por región, con el aplanado que lleva la divergencia a cero.
- Facetas que no mientenCalcula el recuento de cada valor de faceta sin aplicar a la faceta su propio filtro, porque marcar un segundo valor amplía el resultado en vez de restringirlo, frente al recuento ingenuo sobre el resultado ya filtrado, que deja los demás valores a cero y hace creer que no queda nada.
- Cambio con las monedas que hayCalcula el cambio con las existencias reales del cajón buscando el mínimo de piezas sobre cada importe intermedio, en vez de empezar por la moneda más grande, y cuando no hay combinación exacta dice qué moneda pedirle al cliente para que sí salga.
- Contar el almacén sin cerrar la tiendaCalcula el descuadre contra lo que el sistema decía en el instante exacto en que se contó la estantería, sumando solo los movimientos anteriores a ese instante, en vez de contra el cierre del día, que achaca a merma todo lo que se vendió o se repuso durante el recuento.
- El lote que caduca antes no es el más viejoConsume los lotes ordenados por fecha de caducidad y no por fecha de entrada, porque el proveedor no entrega en orden de vencimiento, y simula la misma demanda con las dos políticas contando las unidades que se tiran y la vida que le queda al producto en el momento de venderlo.
- Escalera de pilares con tallos degradadosDiagrama de proceso en cuatro pilares ASCENDENTES: cada fase es un chip de vidrio claro sobre un tallo vertical de 1px con degradado multicolor que se desvanece hacia abajo, con sus entregables colgando a la derecha del tallo, todo posicionado en vw para escalar como un plano.
- Selector de planta en isométricaEdificio en proyección isométrica dibujado como una pila de plantas, cada una un paralelogramo con su canto lateral para dar volumen: al elegir una planta esta se desliza fuera de la pila y las superiores se elevan para dejarle sitio, revelando las salas de esa planta, con el pintado ordenado de atrás hacia delante para que el apilado se lea con coherencia.
- Área de cobertura ajustableMapa estilizado con una sede fija en el centro y un área de cobertura circular que se arrastra directamente desde su borde: el radio en kilómetros se recalcula en vivo, los puntos de ejemplo dentro del círculo se marcan como cubiertos y los de fuera quedan atenuados, y un trazo discontinuo en rotación constante lee el borde como una zona activa.
- Marcadores que se agrupan en racimos al hacer zoomDecenas de marcadores sobre un mapa propio en SVG que se fusionan en racimos cuando su distancia en pantalla es menor que un radio fijo, con tamaño y color según cuántos contiene cada uno; al hacer zoom con la rueda o los botones los racimos se parten y sus marcadores salen volando desde el centro hacia su posición real, y al alejar vuelven a fusionarse.
- Grid escalonado con retículaSección editorial con titular ultraligero en dos líneas indentadas y un grid 2x3 escalonado de tarjetas de texto y vídeos, delimitado por segmentos de línea de 1px con huecos.
- Convertir una diferencia no es convertir un valorConvierte una columna aplicando el factor a todo y el desplazamiento solo a los valores absolutos, con el tipo propagándose al restar dos absolutos, y comprueba el resultado por coherencia entre celdas relacionadas y no por ida y vuelta, que vuelve bien incluso con la conversión equivocada.
- Estar calibrado no es saberParte la nota de un pronosticador en cuánto se desvía la realidad de lo anunciado en cada tramo, cuánto separa unos tramos de otros y la incertidumbre de fondo de las preguntas, tres trozos que recomponen la nota exactamente, y enseña que quien dice siempre lo mismo está perfectamente calibrado sin separar nada.
- Promediar pronósticos los vuelve tibiosAgrega varias opiniones por dos caminos, la media directa de las probabilidades y la media de sus razones de apuesta con un estirón cuyo mejor valor se busca por barrido, con una prueba de respuesta conocida, que si todos dicen lo mismo las dos devuelvan exactamente eso, y el recuento de en cuántas preguntas cada camino queda más decidido.
- La puntuación que hace que mentir no compenseRecorre cada anuncio posible y calcula lo que cobraría en media quien cree otra cosa, pesando los dos desenlaces por su creencia real, para tres formas de puntuar, y localiza dónde cae el máximo de cada una: en un extremo con la lineal y justo sobre la creencia con las otras dos.
- Por qué no puedes abrir estoResuelve el permiso efectivo subiendo por la rama hasta la regla explícita más cercana, con la denegación de cualquier ancestro cortando el ascenso y ganando sobre un permiso más profundo, y enseña en qué carpeta se decidió, que es lo que permite pedir exactamente lo que falta.
- La invitación que abre más de lo que creesPara llegar a algo hondo hace falta atravesar sus carpetas padre, pero atravesar no es leer: da el nombre de los ancestros y el contenido solo de lo compartido, y cuenta exactamente cuántos hermanos y cuántas carpetas sensibles quedarían abiertos heredando desde la raíz.
fileUploads
- La barra llega al final y el fichero aún no sirveRecorre las 144 subidas que salen de cruzar el tiempo de transferencia, la cola del servidor y el tiempo de proceso, todas con final feliz, y compara cuatro barras de progreso midiendo en segundos cuánto habilitan Compartir con el enlace roto y cuánto hacen esperar con el fichero ya listo.
- Subida con tres estados en la misma filaUna sola fila sirve para los tres finales de una subida y la barra es la que lo cuenta: verde al 100 % si terminó, tinta a media asta si sigue en vuelo y NINGUNA barra si falló. El relleno se mueve con scaleX desde el borde izquierdo, nunca con width, y la zona de suelta alterna entre disposición centrada y en fila.
footers
- Franja footer en trípticoCierre de hero en tres paneles desiguales (2fr-1fr-2fr): uno claro con claim y link subrayado, uno central con mini-carrusel de tarjetas que rota solo con barritas de progreso, y uno negro con cifra social y producto, con el packshot gigante SOLAPANDO los paneles desde arriba.
- Mega footer con CTA giganteFooter de dos actos: arriba un CTA enorme ("¿Hablamos?") con flecha que se desliza al hover, debajo el mapa del sitio en columnas compactas y una barra legal separada por un borde tenue. Las columnas entran con fade-up escalonado al llegar al final de la página.
- Footer con marquee giganteCierre de página cuya pieza central es una cinta infinita de texto gigante ("TRABAJEMOS JUNTOS ·") que corre en horizontal y se pausa al hover, con inversión de color bajo el cursor y una barra inferior mínima con wordmark y redes.
- Footer SaaS con estado del sistemaFooter de producto con columnas compactas, badge de estado con punto que late ("Todos los sistemas operativos"), selector de tema claro/oscuro en pastilla y bottom bar con versión del producto en monospace.
- Footer índice con filas numeradasFooter editorial que lista las secciones del sitio como filas numeradas de tipografía grande separadas por bordes; cada fila desliza una flecha y empuja el texto al hover, y la última fila es el correo de contacto en serif itálica.
- Footer barra que invierte el temaBarra de cierre de una sola línea que invierte los colores de la página (claro sobre oscuro pasa a oscuro sobre claro) para marcar el final: wordmark, links separados por puntos y iconos sociales que se elevan al hover con sombra corta.
- Footer de columnas en cremaFooter de lujo sobre crema: tres columnas de enlaces con cabeceras uppercase microscópicas y muy tracked, una columna de newsletter con input de solo borde inferior, y barra legal separada por hairline; todo entra con reveals de blur-up escalonados al hacer scroll.
- Footer fijo revelado al finalEl footer no entra: ya estaba ahí. Vive en position fixed bottom con z-index bajo, y un spacer transparente al final del flujo (con su altura sincronizada por JS a la del footer) deja que el contenido se deslice hacia arriba y lo destape como levantando una lámina.
- Footer final sobre vídeo nativoCierre de página donde el vídeo dicta la altura (w-full h-auto, sin object-cover): encima, un bloque de mandatos en mayúsculas alineado a la derecha con acento manuscrito, y un rail vertical de iconos sociales en cristal anclado abajo a la izquierda.
- Footer con logo gigante cortadoFooter donde el protagonista es el propio wordmark: una versión gigante del logo ocupa todo el ancho y queda cortada por el borde inferior de la página, como si el nombre se hundiera bajo el suelo. Encima, columnas compactas de links; el logo sube unos píxeles con blur-out al entrar en viewport.
forms
- Comprobador de nombres confundiblesCampo de elección de nombre de usuario que no compara por igualdad sino por forma normalizada: minúsculas, descomposición NFD con borrado de marcas diacríticas, mapa de caracteres confundibles (cero por o, uno por ele, cinco por ese, cirílicos y griegos que se ven latinos) y colapso de puntos y guiones bajos. Avisa de la colisión aunque las cadenas sean distintas, enseña las dos formas normalizadas, marca cada carácter sospechoso con su nombre unicode aproximado y propone alternativas libres validadas contra la misma normalización.
- Bloques de evento con arrastre elásticoVista de día con bloques de evento cuyo borde inferior se arrastra para alargar la duración, encajando cada quince minutos y mostrando la nueva duración mientras se arrastra. Si el bloque crece contra el siguiente, este se desplaza o se comprime según el modo elegido, y el arrastre se frena mostrando el tope cuando ya no hay hueco.
- Fechas escritas en lenguaje llanoCampo de texto donde el usuario escribe una fecha como la diría en voz alta y el componente resalta dentro de la propia frase los fragmentos que reconoce (el día, la hora, la recurrencia) con un color distinto para cada tipo, dejando sin colorear lo que no entiende como señal para reformular, y confirma debajo la fecha resultante en formato completo con un mini calendario.
- Constructor de regla de repeticiónConstructor de reglas de repetición (cada N semanas en días concretos, o un día fijo de cada mes) donde cada cambio recalcula de verdad el calendario y marca al instante qué fechas caen, incluidas las que se ajustan por caer en un mes corto. Una frase en lenguaje llano resume la regla activa.
- Estimador de superficie pintando la rejillaRejilla de catorce por nueve celdas sobre la que se pinta el área a cubrir arrastrando con ratón o dedo, y que calcula de verdad la superficie, el perímetro contando solo los lados de celda sin vecina pintada, las piezas necesarias con merma y el coste. Un recorrido de componentes conexos detecta si la selección queda partida en varios trozos, los colorea por separado y lo avisa, mientras las cifras se interpolan fotograma a fotograma durante el arrastre.
- Migas de pasos reversiblesAsistente de cuatro pasos que al volver atrás no tira todo lo posterior: cada opción declara de qué respuestas depende, así el componente conserva las decisiones que siguen siendo válidas y solo descarta las que colgaban de lo cambiado, con las migas perdidas tachadas y un resumen en vivo de lo que se mantiene.
- Traspaso de sesión entre dispositivosDos dispositivos dibujados con formas CSS intercambian una sesión: el portátil muestra una retícula de módulos determinista que pulsa al ritmo del emparejamiento y, al confirmarse en el móvil, una onda de color cruza el hueco entre ambos y transfiere la sesión; si el código caduca se apaga módulo a módulo y ofrece regenerarlo.
- Verificación por ritmo de tecleoCampo de contraseña que, además del texto, mide el intervalo real entre pulsaciones y lo compara contra una plantilla de ritmo grabada: los intervalos se dibujan como pulsos superpuestos a la referencia y una barra de coincidencia sube o baja según encajen en la tolerancia, de modo que un texto correcto tecleado con un ritmo distinto no pasa la verificación.
- Campos condicionales con recolocación FLIPFormulario donde la respuesta a una pregunta muestra u oculta campos siguientes, y la recolocación usa FLIP real (First, Last, Invert, Play): antes de cambiar se miden las posiciones, se aplica el cambio, se invierte la diferencia con un transform sin transición y se deja animar, así ningún campo salta. El campo que aparece crece desde altura cero y el foco viaja solo hasta él; una demo responde sola en bucle hasta que el usuario interactúa.
- Edición en el sitio sin salto de layoutFila de datos editable en el sitio: al pulsar un valor se transforma en un input sin ningún salto de layout, porque un span espejo fuera de pantalla mide el ancho exacto del texto en cada pulsación de tecla y el input adopta esa medida. Enter confirma con un breve destello de guardado, Escape cancela y restaura el valor anterior.
- Selección múltiple con lazoRetícula de chips donde arrastrar sobre el fondo dibuja un rectángulo de selección translúcido que marca en vivo cada opción solapada, usando las posiciones medidas una sola vez al iniciar el arrastre; mantener una tecla modificadora suma a la selección previa y un clic simple alterna solo esa opción.
- Formulario que se pliega en reciboFormulario por pasos donde cada campo completado se pliega en una línea de recibo (etiqueta a la izquierda, valor a la derecha y una línea de puntos flexible entre ambos) animando su altura de campo a línea; pulsar una línea ya plegada la vuelve a abrir para editarla mientras la anterior se pliega, y al terminar el conjunto se lee como un ticket.
- Firma con grosor por velocidadPad de firma en canvas donde el grosor del trazo depende de la velocidad del gesto (rápido es fino, lento es grueso) con curvas cuadráticas suaves; firma sola una rúbrica de ejemplo al cargar y se detiene en cuanto el usuario dibuja de verdad.
- El cartel de Guardado que miente mientras guardaSimula evento a evento todas las tandas de tecleo que salen de combinar huecos entre pulsaciones y latencias de red, 2187 con los valores por defecto, y compara cuatro maneras de autoguardar midiendo los milisegundos que el cartel dice Guardado sin estarlo y las veces que el servidor se queda para siempre con la versión anterior.
- Máscara que respeta el cursorCampo que da formato mientras se escribe (miles, grupos de cuatro o fecha con barras) y recoloca el cursor contando las cifras que quedan a su izquierda antes de formatear para volver a ponerlo tras las mismas cifras después. Reproduce una secuencia grabada de 12 ediciones sobre la versión ingenua y la corregida, y mide en cuántas acaba el cursor donde la persona lo espera: 1 de 12 frente a 12 de 12.
- Rebote y número de secuenciaCampo que comprueba un alias contra una red simulada determinista y ejecuta las cuatro combinaciones de rebote y descarte por número de secuencia sobre el mismo tecleo y la misma traza de retardos. Mide consultas lanzadas y resultados que no corresponden al texto actual (7 y 5 sin nada, 3 y 1 solo con rebote, 7 y 0 solo con secuencia, 3 y 0 con ambas) y dibuja la línea temporal con las respuestas cruzándose.
- Migración de esquema a medio rellenarFormulario de alta a medio rellenar al que le llega un esquema nuevo: el componente aplica las equivalencias declaradas (conservar, renombrar, partir el nombre por los dos últimos tokens, fundir dos campos en orden, pasar de texto libre a lista cerrada normalizando, archivar lo que ya no tiene campo) y dibuja el antes y el después unidos por líneas bezier medidas en tiempo real. El panel de recuento tiene ocho categorías que suman exactamente los valores escritos, y un conmutador enseña la migración ingenua por nombre idéntico y cuántos valores se pierden en silencio con ella.
- Chips de consulta analizadaCampo de busqueda que analiza en vivo lo que escribes y lo descompone encima en fichas de colores: filtros con operador (autor:marta, fecha:>2026), exclusiones (-borrador), frases entre comillas y el texto libre restante. La relacion es bidireccional (editar o quitar una ficha reescribe la consulta) y un tramo mal formado se marca como no reconocido en lugar de tragarselo.
galleries
- Galería acordeón por flexFila de cards de imagen donde el hover redistribuye el espacio animando flex-grow: la señalada se expande, las vecinas se comprimen a franjas con etiqueta vertical rotada y degradado, y en móvil el acordeón se convierte en carrusel con scroll-snap.
- Galería acordeón por reparto flexibleLos paneles no tienen ancho: tienen base cero y una proporción de crecimiento, así que es el motor de layout quien reparte el espacio y la suma siempre cuadra con el contenedor. Al abrir uno, los demás ceden en el mismo gesto y su color se apaga en vez de moverse.
- Índice de proyectos con imagen flotanteLista de filas de proyectos donde la fila activa lanza una miniatura flotante que persigue el cursor con inercia de muelle, se inclina según la velocidad del arrastre y hace crossfade al cambiar de fila; en reposo recorre las filas sola con un barrido sinusoidal.
- Redimensionado por costurasRedimensionado por costuras aplicado de verdad sobre una imagen generada en canvas: energía por gradiente, coste acumulado por programación dinámica de arriba abajo y borrado de la columna serpenteante más barata, repetido por tandas con la siguiente costura resaltada antes de caer. Al lado, la misma imagen escalada de la forma normal, para ver que el escalado aplasta el círculo mientras las costuras se comen el fondo y dejan las figuras intactas.
- Galería de columnas sobre plano inclinadoVarias columnas que corren en vertical, cada una a su ritmo y en sentido alterno, montadas sobre un único plano al que se le aplica una sola perspectiva y una sola rotación en tres ejes: las columnas siguen siendo planas y no saben nada del 3D, y una viñeta radial funde el borde con el fondo.
- Carpeta con fotos flotantesIlustración de carpeta en capas de la que crecen tres fotos: nacen diminutas dentro, se expanden a su pose rotada con ease suave, flotan en bucles idle desincronizados y se congelan al hover.
- Generador de portadas con invariantes de marcaGenerador que produce decenas de portadas desde una semilla y valida cada una contra cuatro invariantes medidas sobre la geometría dibujada: tono dentro de un arco alrededor del color de marca, densidad de elementos en rango, contraste WCAG del texto sobre el fondo y proporción máxima de un elemento cortado por el borde. Enseña la rejilla de las aceptadas, las descartadas atenuadas con el motivo y por cuánto se pasaron, y la tasa de aceptación sube o baja al estrechar cualquier límite, avisando cuando las invariantes dejan pasar casi nada.
- Colocación generativa estable por identificadorComposición generada en la que posición, giro y color de cada tarjeta salen de una función de dispersión sobre su identificador y no de su índice en la lista, así que añadir, borrar o reordenar no recoloca a los que ya estaban. Un conmutador aplica la misma secuencia de operaciones con la versión ingenua basada en el índice y el componente mide cuántos elementos se mueven y cuántos píxeles se desplaza el conjunto en cada estrategia, dejando la traza operación a operación y las posiciones previas como fantasmas.
- Retícula con proporción morfanteRetícula de fotos donde al seleccionar una celda, su proporción cambia de cuadrada a panorámica ocupando dos columnas mientras el resto se reorganiza con un FLIP real (medir antes, aplicar el cambio, invertir con transform y animar hasta la identidad). Un ciclo de demostración va marcando celdas distintas hasta el primer clic real, y el encuadre de cada foto se mantiene centrado al cambiar de proporción.
- Cinemagrafía con máscaraUna escena que parece una foto fija donde solo una mancha irregular de agua está viva, dibujada en canvas con destellos senoidales y recortada con una máscara de bordes suaves para que el límite entre lo quieto y lo animado sea invisible; un conmutador tiñe la máscara de color para revelar el truco.
- Comparador de tres imágenesTres versiones de la misma escena superpuestas y recortadas por dos divisores verticales independientes que se pasean solos en bucle hasta el primer arrastre real: si un divisor se acerca demasiado a otro se aparta en vez de cruzarlo, y las etiquetas de cada tramo se abrevian o se reordenan para no solaparse.
- Lightbox con elemento compartidoRetícula de fotos donde al pulsar una miniatura, esa misma pieza viaja hasta su versión ampliada: se miden el rectángulo de origen y el de destino y se coloca el elemento grande en la posición de la miniatura mediante transform, animando después hasta la identidad para que parezca que crece en el sitio. El fondo se oscurece y difumina en paralelo, y al cerrar se repite el cálculo midiendo de nuevo el origen por si la retícula se movió.
- Rosetón de tarjetas tangentesAnillo de tarjetas donde una sola rotación las coloca Y las orienta: al girar alrededor del centro del anillo, cada pieza queda tangente a la circunferencia y sus cantos se encadenan como los pétalos de un rosetón. Al pasar el cursor, la tarjeta se aleja del centro por su propio radio.
- Rail de destinos con alturas propiasGaleria horizontal con scroll libre donde cada card declara su propio ancho y alto (200x230, 340x310, 250x360...), mezclando fotos y vídeos congelados en su primer frame con #t=0.1, sobre un buscador gigante transparente.
- Collage de fotos con profundidadHero de retratos: siete fotos de esquinas rectas flotando alrededor del titular, cada una con su profundidad de parallax al cursor via variables CSS, badges sociales, y un dot de glow con pill "View album".
- Columnas de vídeo con hover playVitrina de flota a pantalla completa: columnas de vídeo que entran desde la derecha en cascada, se reproducen SOLO al hover (con promesa resuelta para no cortar el play), escalan suavemente y despliegan título y specs desde máscaras.
- Mosaico que se dispersa con rueda virtualPágina sin scroll real: la rueda acumula un progreso virtual 0-1 que interpola cada celda de un mosaico con forma (un corazón, un logo) desde su posición inicial a destinos individuales, dispersando el resto.
- Modal que vuela desde su celdaDetalle de foto con técnica FLIP: la card nace en el rect exacto de la celda pulsada y anima transform/tamaño hasta el centro, con pill cuyas letras entran en orden inverso, tags escalonados y paginación por teclado.
- Grid de media cards de cristalGalería de coleccionables: cards de vidrio con vídeo cuadrado (truco padding-bottom 100 por ciento), barra inferior de cristal con score y botón circular degradado con chevron, en grid 3-2-1 con hovers que aclaran el vidrio.
- Lienzo infinito con paneo inercialRetícula de tiles que se arrastra en cualquier dirección y se recoloca con aritmética modular para que el plano nunca se acabe, con inercia al soltar y deriva automática en reposo.
- Galería que escala por posiciónUn panel negro sube sobre el hero y dentro corre una retícula dispersa de imágenes donde CADA card calcula su escala cada frame según su posición vertical: crece de 0 a 1 al entrar por abajo y se encoge de vuelta a 0 al salir por arriba, con transform-origin alternando hacia el centro.
- Estante de insignias con empaquetado por filasEstante de insignias de tamaños mezclados que se colocan sin solapes con un empaquetado propio por filas de altura variable: cada pieza entra en la primera fila donde cabe y solo se abre fila nueva cuando ninguna la admite, así las pequeñas rellenan el hueco que dejan las grandes. Al mover el control de ancho o al cambiar el tamaño real del contenedor (ResizeObserver) se recalcula el empaquetado entero y las insignias viajan a su nueva posición con FLIP, y un conmutador enseña la envoltura simple con el porcentaje de espacio aprovechado en cada modo.
gradients
gridsAndBento
- Bento con maquetas en vez de iconosRejilla oscura donde la mitad superior de cada tarjeta no lleva un icono decorativo sino una maqueta que demuestra la función: una terminal que reporta tiempos línea a línea, o una lista de esqueletos. El titular usa una sola escala tipográfica y separa promesa y renuncia solo con el color.
- El hueco que sobra cuando el último bloque no se veRecorre todas las disposiciones posibles de una pila cuyos bloques pueden faltar o estar ocultos y compara tres maneras de separarlos, contando en cuáles queda un hueco sobrante al final y demostrando que quitar el margen al último hijo falla siempre que el último nodo está oculto.
heroes
- Hero collage editorialHero crema con titular de tres líneas (blur-in + palabra serif glow), modelo central a 100vh y constelación de stickers: polaroids que caen en 3D, smile, flecha y sello serif.
- Hero con fondo de shader compuestoHero full-viewport cuyo fondo es un stack de shaders WebGL en tiempo real: luz de estudio, esferizado con swirl interior, lens flare, partículas flotantes, ondas al cursor y grano de película.
- Hero con escena 3D interactivaHero cuyo fondo es una escena 3D embebida e interactiva (no un vídeo): carga perezosa con Suspense y fallback del color del hero, overlay de contenido con pointer-events none para que el ratón manipule la escena, y solo los botones recuperan el clic.
- Typewriter incrustado en el vídeoHero donde un texto se teclea, pausa y borra en bucle POSICIONADO sobre la pantalla del dispositivo que aparece dentro del vídeo de fondo, con offsets por breakpoint para que siempre caiga en el sitio y cursor parpadeante.
- Hero de palabras desperdigadasEl titular no es una frase apilada sino TRES palabras gigantes a 18-24vw colocadas en posiciones absolutas que se entrelazan por el viewport, con párrafos pequeños y bloques de stats con divisores inclinados rellenando los huecos.
- Teclado de teclas en relieveUna tecla oscura sobre un teclado oscuro solo se lee en relieve si la luz que proyecta es MÁS CLARA que el fondo, no más oscura. De ahí que la caja exterior lleve una sombra BLANCA hacia abajo. La caja intermedia toma las sombras internas solo arriba y a la izquierda, lo que coloca la fuente de luz abajo a la derecha y le da el labio a la tecla. Las setenta y tantas teclas son una sola receta con anchos en unidades.
- Reveal disparado por el fin del vídeoHero cinemático donde el vídeo se reproduce UNA vez acelerado y su evento ended dispara el clímax: el titular gigante se revela letra a letra desde abajo y una imagen de terreno aparece POR ENCIMA del texto tapándole la base, mientras dos círculos concéntricos encogen desde fuera y laten.
- Hero enmarcado con dashboard sangradoLa página entera vive dentro de un marco redondeado con padding exterior: vídeo, navbar pill flotante, copy centrada y una bandeja de dashboard cuyas cards se salen por el borde inferior y quedan RECORTADAS por el propio marco.
- Hero editorial con objetosHero full-viewport editorial-minimal: fondo papel cálido, titular fantasma en dos líneas, dashboard central que asciende y dos objetos orgánicos fotorrealistas con reveal de textura al hover.
- Hero bento con vídeos sobreescaladosHero de dos columnas que ocupa exactamente 100vh en desktop: titular con pills e imágenes INLINE dentro de las líneas, y una columna bento de tres cards negras cuyos vídeos en streaming van escalados al 150 y 280 por ciento para encuadrar solo un detalle.
- Hero con video HLSHero full-viewport con video en loop (hls.js con fallback nativo Safari), overlay degradado, titular mixto y bloques de marca en las esquinas.
- Titular legible sobre la fotoGenera la imagen de fondo en el propio lienzo con semilla fija, lee con getImageData los píxeles que quedan bajo cada palabra del titular, calcula la luminancia relativa y el contraste real, y aplica por zonas el arreglo más barato que llega al umbral (nada, oscurecido local, cambio de color o halo), frente al velo global de siempre que cumple igual pero tapa la imagen entera.
- Titular partido en dos tintasHero mitad crema mitad vídeo donde el MISMO titular se renderiza dos veces perfectamente superpuesto: una copia en tinta oscura clipada a la mitad izquierda y otra en blanco clipada a la derecha, cambiando de color exactamente en la costura.
- Hero sin scroll con tríptico de fotosHero de exactamente un viewport (h-screen, sin scroll): titular serif cuyas palabras entran con pop rebotado (rotación, skew y blur), cards laterales, y abajo TRES fotos a hueso sin separación con overlays de stats, rating y CTA flotando sobre ellas.
- Hero editorial por capas con retículaComposición de moda sobre color pleno: rótulo de marca a 24vw detrás de un retrato central recortado, líneas de retícula verticales que CRECEN con scaleY escalonado, cifra de premios entre corchetes tipográficos gigantes, y bloques funcionales (card exclusiva, botones flecha) encajados en las columnas.
- Parallax de tres capas con hierbaHero con profundidad real al scrollear: la copy sube rápido y se funde, el mock de producto sube lento y una franja de vegetación en primer plano DERIVA HACIA ABAJO, invirtiendo el movimiento para vender la ilusión de capas.
- Hero scrubbed con frames en canvasHero pineado de 700vh que scrubbea un vídeo pre-extrayendo sus frames a ImageBitmaps y dibujándolos en canvas, con tres fases: scrub, fundido a negro y párrafos secuenciales.
- Hero con lente proyectada y HUDHero de vídeo donde una máscara de lente y sus trazos HUD se re-proyectan en runtime desde el lienzo de diseño al viewport con matemática cover-fit, con lecturas verdes en condensada que se decodifican en orden aleatorio.
- Hero card con carpetas flotantesHero claro donde el contenido central vive en una card gigante con malla de puntos, rodeada de cuatro grupos decorativos de UI flotante: carpetas enormes con task cards, post-it con chincheta, integraciones y deadlines, cada grupo entrando rotado con su propio delay.
- Hero con retrato recortado a brochaHero de portfolio en degradado naranja intenso: titular masivo condensado al 12vw, retrato central con máscara CSS de brochazo que lo convierte en recorte irregular POR ENCIMA del texto, blobs con blend screen y nombre gigante desenfocado de fondo.
- Hero sobre retícula áureaHero cuyo lado derecho es el propio andamiaje del diseño dibujado en SVG: cuadrados encajados que crecen por phi, la espiral logarítmica que pasa exactamente por sus esquinas exteriores y un par de diagonales de puntos, todo generado por fórmula y no calcado.
- Hero de vídeo que se encajonaHero sticky de 250vh donde el vídeo empieza a sangre completa y el scroll le mete márgenes laterales progresivos hasta volverlo una card centrada, mientras tres stat cards translúcidas entran deslizándose desde los lados y desde abajo.
- Hero de vídeo con barra de pricingHero full-screen sobre vídeo con titular ultraligero arriba-izquierda y, pegada abajo, una barra de pricing de cristal en tres columnas: card de addon con toggle, precio gigante y features con CTA partida.
- Hero con selector de escenas de vídeoPortfolio con tres vídeos de fondo precargados como blobs y conmutados por botones numerados (01, 02, 03) con crossfade de 1.2s; el acento de la página (el punto del nombre, el glow del dot de disponibilidad) cambia de color según la escena activa.
- Hero partido con cortina de vídeoHero en dos columnas donde la de vídeo se descubre con una cortina clip-path de izquierda a derecha al montar, con franja inferior de blur enmascarado y CTA que aparece tras la cortina.
- Hero de capas parallaxHero de montañas en cinco capas PNG que entran en carga con desplazamientos, escalas y delays independientes, degradados de fundido al fondo y titular palabra a palabra con blur.
- Órbita contrarrotada sobre el horizonteGirar el marco, empujar hacia fuera y girar la etiqueta OTRA VEZ, la misma cantidad y al revés: `rotate(360deg) translateX(200px) rotate(-360deg)`. El elemento recorre un círculo y se queda derecho. Es la decisión contraria a la de una roseta, donde quitar esa contrarrotación es justo lo que hace que las piezas apunten al centro.
- Hero con fade parallax y dashboardHero oscuro cuyo bloque de texto sube y se desvanece con el scroll mientras un screenshot de producto en blend luminosity flota sobre un vídeo full-bleed, con entradas escalonadas al cargar.
- Hero con palabra display giganteHero 100vh sobre vídeo sin overlay: una única palabra display a 10-12rem en black, párrafo alineado a la derecha y CTA rectangular con cuadrado de icono contrastado.
- Piscina de bolas físicaHero con una piscina de bolas simuladas en canvas: decenas de círculos con gravedad caen, rebotan entre ellos y contra los bordes, mientras el cursor actúa como un repulsor invisible que las aparta al pasar cerca. El titular flota encima sin bloquear el puntero, dejando la física como fondo interactivo en vez de decorativo.
icons
- Selector con raíl que sigue al scrollEl raíl inferior no se marca al hacer clic: se marca solo, porque un IntersectionObserver vigila una franja fina justo debajo de la cabecera pegajosa y la sección que la cruza es la que manda. Sin el margen inferior negativo, todas las secciones de más abajo cuentan como visibles y el raíl salta a la última.
- Rail de iconos con conector curvoSelector vertical de categorías: columna de iconos espaciados a paso fijo, una línea conectora curva SVG hacia el panel de contenido, y un indicador que se desliza por la línea hasta el codo de la curva del ítem activo.
images
- Enderezar la foto del documentoResuelve las ocho incógnitas de la transformación proyectiva que lleva las cuatro esquinas detectadas del papel a un rectángulo, endereza aplicando la inversa a lo que se ve en el encuadre, y lo contrasta con recortar el rectángulo envolvente, midiendo con dos varas a la vez, el ángulo de los renglones y su largo, porque el ángulo por sí solo no ve la foto inclinada hacia atrás.
- Cambio de tema con tirón de imagenUn toggle día/noche donde el fondo se cambia FÍSICAMENTE: la foto frontal se deja arrastrar hacia abajo 20vh acelerando (ease-in), en ese instante se intercambia por la foto del otro tema y regresa con rebote elástico, mientras una copia borrosa detrás ya muestra el destino.
- Trama de semitono que reproduce el tono pedidoUna trama de puntos no tiene grises, tiene superficie tapada, así que el radio de cada punto decide el tono: hacerlo proporcional al nivel deja los medios tonos clarísimos porque el área va con el cuadrado, la ley de la raíz acierta hasta que los puntos se tocan en pi partido por cuatro, y solo encadenar puntos blancos sobre negro llega al sólido. El desvío se separa en pantalla en lo que pone la ley y lo que pone la rejilla de píxeles.
- El esqueleto que no se va porque la imagen ya estaba cargadaRecorre todas las combinaciones de procedencia de las fotos de una rejilla, de la caché, por la red o con error, y compara tres maneras de detectar que una imagen está lista, contando en cuántas queda un esqueleto colgado para siempre.
inputs
- Escribir mientras la salida sigue llegandoReserva la fila de abajo para lo que se está tecleando y, cada vez que llega salida, la borra, imprime encima y la vuelve a dibujar con el cursor donde estaba, frente a imprimir donde caiga, que parte la orden a medio escribir y cuenta cuántas veces pasa.
- El punto ciego del dígito de controlGenera todos los errores de un dígito y todos los intercambios de dígitos contiguos de un número de tarjeta y cuenta cuántos caza el método de duplicar alternos, demostrando sobre los noventa pares posibles que los únicos que se le escapan son el cero seguido de nueve y el nueve seguido de cero.
- El teclado que tapa el campo que estás rellenandoCalcula, campo a campo de un formulario móvil, si el bloque entero con su etiqueta y su aviso cae dentro de lo que queda de pantalla al abrirse el teclado, comparando no mover nada, pegar el campo arriba y centrarlo en el hueco, y midiendo qué contexto pierde cada una.
- Formulario gigante de dos pasosCaptación en dos pasos donde lo que escribes ES la tipografía protagonista: un input invisible alimenta un display de 5rem con cursor falso parpadeante, el titular se encoge y desenfoca a medida que crece el texto, el valor se auto-escala para caber, y Enter avanza presupuesto, email y pantalla de éxito con springs.
- Panel de propiedades con campos que se barrenPanel de propiedades donde cada campo lleva la unidad pegada al valor y una zona cuadrada a la izquierda que se arrastra en horizontal para barrer el número: el texto se formatea con su unidad y se vuelve a parsear al confirmar, así que el campo siempre entiende su propia salida.
- Selector de color con área HSBEl cuadrado de saturación y brillo no se dibuja píxel a píxel: es un color de fondo (el tono puro) con dos degradados encima, blanco de izquierda a derecha y negro de abajo arriba. El damero de opacidad sale de un único repeating-conic-gradient repetido cada 8px.
lists
- Subir en la lista puede hacerte perderCuenta por eliminación sucesiva sobre un perfil real de 113 papeletas donde subir a la ganadora en unas pocas cambia quién se elimina primero y le cuesta la victoria, con las dos secuencias de vueltas enfrentadas para ver de dónde sale la vuelta atrás.
- Darle más memoria a la caché y que vaya peorEjecuta la misma secuencia de peticiones sobre dos tamaños de caché con dos políticas de desalojo y enseña que tirar la más antigua puede fallar más con un hueco de más, con la secuencia construida a propósito porque sorteando al azar no aparece nunca.
- Elegir un rango con la tecla de mayúsculasRecorre todas las secuencias de clics posibles sobre una lista y compara tres maneras de resolver la selección por rango, guardar el ancla del primer clic, mover el ancla a cada pulsación con mayúsculas o acumular intervalos, contando en cuántas cada una se desvía de lo que hacen las listas del sistema.
- Soltar una pieza en su propio huecoRecorre TODOS los arrastres posibles de listas de cuatro a ocho elementos, cada pieza a cada hueco, y compara cuatro maneras de calcular dónde cae lo soltado, contando los arrastres que dejan mal el orden, las piezas fuera de sitio y los avisos de cambio que se mandan con la lista idéntica.
- La lista larga que mide sus filas en vez de suponerlasTraduce el desplazamiento a número de fila con sumas parciales y búsqueda binaria, lo contrasta con recorrer las alturas una a una, que es un segundo camino sin código compartido, y cuenta en qué parte del recorrido se equivoca quien supone que todas las filas miden lo mismo.
- Lista con acciones bajo la filaCada fila es una tapa opaca que se arrastra en horizontal sobre una bandeja fija: debajo esperan dos acciones a cada lado, y al soltar la fila decide entre quedarse abierta del todo o cerrarse según haya pasado el umbral, cerrando además cualquier otra fila abierta.
maps
- Selector de envío por zonas con polígonosMapa esquemático en SVG con cuatro zonas de reparto dibujadas como polígonos irregulares y un marcador que se arrastra con pointer events: el componente decide la zona con una prueba real de punto en polígono por cruce de rayos, no por rectángulos ni por distancia al centro. La zona acertada se ilumina y su borde se redibuja, el coste y el plazo se interpolan hasta el nuevo valor, y si el punto cae en un hueco sin cobertura mide la distancia a cada segmento de cada polígono para proponer la zona más cercana y llevar el marcador al borde.
- Mapa mundial de puntos con ciudades activasSección de presencia global con el mapa del mundo dibujado como una matriz de puntos donde solo se encienden los que caen sobre continentes, más un marcador que pulsa en anillos concéntricos y un tooltip que va rotando entre varias ciudades en un ciclo automático.
- Mapa de regiones semánticasSuperpone marcos de color sobre una página de ejemplo para señalar cada región semántica (cabecera, navegación, principal, complementaria, pie) con su rol y su nombre accesible, y aísla en rojo el contenido que ningún landmark cubre: el hueco real que la tecnología asistiva no puede saltar. Un panel lateral recorre las regiones y resalta su marco al pasar el cursor.
- La ruta más barata no se puede sumar tramo a tramoBusca la ruta más barata con una tarifa que se paga por el conjunto de zonas pisadas, llevando en cada estado la parada, las zonas ya pisadas, el tiempo y los tramos gastados, y descartando un estado solo cuando otro llega antes, con menos tramos y con un conjunto contenido, para contrastarla con el enrutador que suma el precio de cada tramo y cobra dos veces por volver a una zona.
- Mapa de estados del accesoEl propio flujo de autenticación dibujado como un grafo de seis estados (identificado, credencial, segundo factor, bloqueado, recuperación, sesión) sobre un anillo, con flechas curvas que se recorren con un punto animado en la transición activa; los caminos alternativos quedan atenuados y los inalcanzables desde el estado actual se marcan con trazo discontinuo, mientras un formulario real debajo avanza en sincronía con el nodo activo.
- Etiquetado de mapa sin solapesMapa esquemático de veintidós localidades cuyas etiquetas se colocan probando ocho posiciones candidatas alrededor de cada punto por orden de preferencia, midiendo el ancho real del texto con un nodo oculto y descartando las candidatas que chocan con una etiqueta ya colocada, con un marcador o con el borde del lienzo; se procesa por importancia, así que las localidades mayores ganan sitio y las menores se quedan solo con el punto, y un conmutador enseña el amasijo de la colocación ingenua con el contador de etiquetas legibles de cada modo.
- Racha por días naturales con zona horaria honestaContador de racha con calendario de dos semanas que agrupa marcas de tiempo absolutas por la fecha local de la zona elegida usando Intl.DateTimeFormat, no por horas transcurridas: cambiar de zona recoloca las actividades en el calendario y parte o alarga la racha de verdad. Un control desliza la última actividad entre las 23:30 y las 00:30 locales alrededor de la medianoche real de esa zona, calculada invirtiendo el desfase, y el panel explica en qué día cae, cuánto falta para el salto y si cruzar la medianoche mantiene, alarga o rompe la racha.
- Ruta que se dibuja según el medio de transporteMapa propio (calles, manzanas y agua dibujados en SVG, sin teselas externas) donde la ruta entre un origen y un destino se traza progresivamente con stroke-dashoffset siguiendo las calles, con un marcador que avanza sobre el trazado real usando getPointAtLength; al cambiar el medio de transporte la ruta anterior se retrae y la nueva se dibuja, cambiando trazado, color y duración estimada.
- Asistente con mapa ramificadoAsistente de configuración cuyo mapa de pasos se dibuja como un grafo: al responder, el camino se bifurca, la rama elegida se ilumina con una línea que se traza, las descartadas se atenúan y repliegan, y el mapa se recentra sobre la rama activa; también se puede deshacer el trazo retrocediendo paso a paso.
marquees
- Flujo holográfico en sentidos opuestosLa cinta contiene las MISMAS tarjetas dos veces, y por eso desplazarla exactamente -50% deja la segunda copia donde empezó la primera: el bucle cierra sin salto y sin medir nada. La fila en sentido contrario no es otra animación, son los mismos keyframes leídos al revés. Y el campo de estrellas son cinco capas con lados que no comparten factores.
- Cinta en espiral con offset-pathCinta infinita cuyo raíl es una espiral de Arquímedes generada por código (radio proporcional al ángulo) y servida a offset-path como una sola cadena de puntos: cada pieza avanza por offset-distance y toma opacidad y escala interpolando ese mismo porcentaje, así que la profundidad sale del recorrido y no de un 3D.
- Filas de palabras que obedecen al scrollDos cintas de palabras que corren en sentidos opuestos a velocidad propia y quedan enganchadas a la velocidad del scroll: al bajar aceleran, al subir se dan la vuelta, y el sentido se queda donde lo dejó el último gesto en vez de volver al de fábrica.
navigationMenus
- Menú móvil con doble estadoMenú móvil que anima también al cerrarse: dos estados separados (intención y presencia en el DOM) más animationend para desmontar tras la salida, hamburguesa que se cruza en fundido con la X y entradas escalonadas por nth-child.
- Menú con revelado circularMenú móvil a pantalla completa que se abre como un círculo creciendo desde la esquina de la hamburguesa hasta 300vmax, con doble estado montaje-animación vía requestAnimationFrame, links enormes con flechas y salida temporizada.
- Navbar que se despliega desde el centroIntro de navbar en keyframes CSS: la barra nace clipada a una franja central (inset 0 46% redondeado) y se despliega hacia los lados, luego la marca sube, los links escalonan y el botón de sesión entra desde la derecha.
- Navbar grid centradoNavbar fija con blur y grid de 3 columnas: el bloque central queda matemáticamente centrado al viewport independientemente de los laterales.
- Navbar pill de cristalNavbar fija con píldora central de cristal (blur + borde translúcido) centrada absolutamente, links con hover instantáneo y CTA blanca.
- Pill de menú que se ensanchaLa hamburguesa vive en una pill de cristal cuadrada que al pulsarla se ENSANCHA en el sitio (width 48px a 290px con ease expo) revelando los links dentro, mientras el icono se convierte en X y en móvil el logo colapsa para ceder el espacio.
- Navbar que se despliegaNav de cristal oscuro que nace como una pastilla estrecha con solo el botón de login y, tras un delay, anima su anchura a auto desplegando los links con fade retardado; el header entero sube desde el centro del viewport.
- Dock magnificado estilo macOSFila de iconos que se magnifican en cascada según la distancia horizontal al cursor, con caída suave tipo campana y elevación proporcional; cuando no hay interacción real, un punto de atracción virtual recorre la fila para demostrar el efecto sin necesidad de mover el ratón.
- Navbar con desenfoque progresivoMenú desplegable cuyo velo trasero no es una capa plana sino un degradado de desenfoque construido con varias capas de backdrop-filter superpuestas, cada una limitada por su propia mask-image a una banda distinta, así el blur crece suavemente hacia el borde del panel en vez de cortar de golpe.
- Menú radial alrededor del cursorMenú radial que se abre al mantener pulsado sobre la superficie: los sectores se despliegan con stagger desde el punto de pulsación, y el sector alineado con la dirección del cursor (calculada con atan2) se resalta en tiempo real hasta soltar, momento en que se confirma con un destello y el menú se repliega.
- Menú lateral con precapas y tragaperrasMenú off-canvas de lujo: capas de color que entran en cascada por delante del panel, botón cuyo icono de cruz rota 225 grados y cuya palabra MENU-CLOSE gira como tragaperras varias vueltas antes de asentarse, e items que entran rotados.
- Navbar que reacciona a la direcciónCabecera de tres columnas transparente que al scrollear HACIA ABAJO se transforma en pill flotante blanca con blur (invirtiendo colores de logo, links y CTA) y al scrollear HACIA ARRIBA se esconde del todo, comparando scrollY contra el frame anterior.
- Menú de pastillas que brotanMenú overlay donde cada enlace es una pastilla gigante rotada unos grados que brota con scale 0 a 1 con ease back y jitter aleatorio en el delay, cada una con su propio color de hover, sobre un fondo oscurecido con blur.
- Navbar brutalista con reglasNavbar monocroma de tres columnas decorada con líneas divisorias de 1px insetadas: verticales entre links, horizontales bajo cada bloque, wordmark central con doble regla lateral.
notifications
- A cuánta gente de la lista de espera avisoConstruye la distribución del número de aceptaciones metiendo a cada persona de una en una con su propia probabilidad, porque no todas aceptan igual, y elige el número de avisos que más plazas llena descontando lo que cuesta pasarse, que no es ni el número de plazas ni la lista entera.
- feed de actividad en vivoAvisos de actividad reciente entran desde abajo empujando a los anteriores hacia arriba, cada uno con una barra de vida que se consume y dispara su salida al agotarse; hay un máximo de avisos visibles y, si llega uno nuevo con la pila llena, el más antiguo sale antes; señalar un aviso pausa su barra de vida hasta que se deja de apuntar.
- Aviso de conexión perdida con reintento crecienteBanda persistente que aparece al perderse la conexión y no se cierra sola: muestra el intento actual, una cuenta atrás con espera creciente (backoff exponencial con tope) y un indicador que late durante cada intento; al recuperarse pasa a verde, espera un instante y se pliega hacia arriba reduciendo su altura.
- Aviso de datos desactualizados con refrescoPanel de métricas con una marca de antigüedad que cuenta en vivo (hace 12 s, hace 1 min) y que, al superar un umbral, cambia de tono y atenúa ligeramente las cifras para transmitir menos confianza; al refrescar, un destello recorre el panel y las cifras se actualizan con un contador breve mientras la antigüedad vuelve a cero.
numbers
- Contador de caracteres por grafemasCampo de publicación cuyo contador cuenta como una plataforma real: segmenta con Intl.Segmenter en modo grafema (con reserva propia que une secuencias con junturas de ancho cero, pares de indicadores regionales y modificadores de tono), cobra a cada enlace una longitud fija sea cual sea su tamaño y desglosa en vivo cuánto suma cada parte frente al recuento ingenuo de length. Al pasar del límite, una capa espejo alineada detrás del textarea pinta exactamente el trozo sobrante.
- El contador que se reiniciaDetecta el reinicio de un contador que solo sube, cuando la lectura nueva es menor que la anterior, y cuenta el valor nuevo entero como incremento sobre el tiempo real entre muestras irregulares, en vez de restar lecturas, que pinta picos negativos y se come todo lo contado antes del reinicio.
- Muro de fotos con crossfade y contadorSección sticky con un muro de 10 columnas de fotos donde celdas aleatorias hacen crossfade cada 2s, dos columnas centrales en blanco, overlays multiply + noise, y un contador decimal animado en el centro.
- Anillos concéntricos de tiempoCada etiqueta se coloca girando el marco ENTERO y empujando después hacia fuera, en ese orden: así cae sobre la circunferencia y se inclina con ella. Contrarrotarlas para dejarlas derechas rompería el anillo en una nube de números sueltos. Cuatro anillos con cuentas distintas, 31, 24, 60 y 60, así que cada uno avanza con un paso angular propio y el borde exterior queda el más denso.
paginations
pricingSections
- Pricing con barras que respiranSección de precios coronada por doce barras doradas a sangre completa cuyas alturas ondulan con senos y cosenos ligados al scroll, junto a una tabla de tarifas por GiB con toggle y una fila de tres planes con CTAs pill.
- Cards de pricing editorialesSección de precios en tonos piedra: wrapper con marco tonal, dos cards blancas con puntos en las esquinas, listas con rombos, precio en serif Cormorant e ilustración anclada que se inclina al hover.
- Configurador de precio con flipMicro-lógica de pricing interactivo: tabs segmentadas y un switch de addon recalculan el total, y la cifra cambia con una animación flip (sube y desvanece, cambia el texto, reaparece).
- Constructor de packs con tramos de ahorroSelector de productos que se apilan visualmente al añadirse mientras el descuento sube por TRAMOS de gasto: una barra de progreso muestra cuánto dinero falta para el siguiente umbral y, al cruzarlo, el porcentaje entra con una animación y la barra pulsa.
- Histórico de precio con mínimo marcadoGráfica de precio dibujada como línea escalonada (el valor se mantiene hasta que cambia, así que sube y baja en ángulo recto) que marca el mínimo histórico con un punto y una guía punteada, compara el precio actual contra ese mínimo en una etiqueta y muestra bandas de fondo en los periodos de rebaja; al pasar el cursor una guía vertical revela el precio de cada semana.
- Comparador de coste total por horizonteComparador de coste total de propiedad donde tres opciones se apilan en implantación, licencia y soporte con crecimiento compuesto, y un control de 1 a 60 meses recalcula de verdad las curvas: el ranking se reordena con FLIP y el mes exacto del cruce se localiza barriendo la curva, no se escribe a mano.
- Selector de extras que resuelve la mochilaDiez extras con coste y utilidad declarada sobre los que el componente resuelve un problema de la mochila con programación dinámica y propone la combinación de mayor valor que cabe bajo el tope. Al mover el tope la solución cambia de verdad y las tarjetas viajan entre las columnas propuesto y fuera con animación de posición compartida, respetando los extras fijados como obligatorios y los vetados.
- Luz natural por trazado de rayosPlanta de vivienda cuyo mapa de luz se calcula lanzando abanicos de rayos desde tres ventanas: cada rayo se corta contra los segmentos de pared con la intersección segmento a segmento y va depositando energía en una rejilla, con caída por distancia y peso coseno respecto a la normal de la ventana. El día entero se precalcula a trozos en trece horas, de ahí salen los porcentajes de superficie bien iluminada, en penumbra y a oscuras, y el rincón que no recibe luz a ninguna hora.
- Planta levantada en isométricaPlano de vivienda extruido a vista isométrica sin librería 3D: las paredes se trocean en cajas con dintel sobre las puertas y antepecho bajo las ventanas, cada cara se prueba contra la dirección de cámara para descartar las traseras y el resto se ordena por profundidad antes de pintarse. El giro en pasos de noventa grados y el levantamiento animado recalculan visibilidad y orden en cada fotograma, y el panel dice cuántas caras se dibujan y cuántas se descartan.
- Por qué ha subido el precio si nadie ha pujadoResuelve la puja delegada enseñando como precio la segunda puja más alta más el incremento de su tramo, cortado por el tope del líder, con la traza de cada salto y el caso de quien no llega al precio y no puede pujar, frente a enseñar el máximo de quien va ganando.
- Pricing de cristal sobre vídeoTres planes en cards de vidrio oscuro sobre vídeo: blur con brightness reducido, borde que se enciende en cian al hover mientras la card levita, toggle mensual/anual con knob deslizante y scroll-snap horizontal en móvil.
- Medidor de consumo por tramosMedidor horizontal segmentado en tramos de precio que diagnostica el consumo actual con una aguja: el tramo vigente se ilumina, los superados quedan tenues, y una continuación punteada proyecta a fin de mes el consumo según el ritmo actual, avisando si esa proyección se sale del tramo.
- Suscripción frente a pago único en el tiempoGráfica de coste acumulado que enfrenta una suscripción en escalones mensuales contra un pago único con salto inicial y línea plana después: el mes de cruce se calcula de verdad comparando ambas curvas, se marca con un punto y se tiñe la franja donde el pago único sale más a cuenta. Un deslizador temporal recorre el eje solo hasta el primer arrastre real del visitante.
- Comparar dos planes ocultando lo idénticoTabla comparativa de tres planes con un interruptor de 'solo diferencias': al activarlo, las filas cuyo valor coincide entre los dos planes elegidos se pliegan a altura cero con una animación escalonada, quedando solo lo que distingue a ambos con las celdas resaltadas, y un contador permite recuperar las filas ocultas. Los dos planes a enfrentar se eligen con selectores en las cabeceras de la tabla.
- Stepper de asientos con precio decrecienteSelector de cantidad de asientos con botones más y menos (mantener pulsado acelera el conteo) donde el precio por asiento baja al cruzar tramos de volumen: el importe tachado convive un instante con el nuevo mientras la etiqueta de descuento entra con un pop, y una barra de progreso indica cuánto falta para el siguiente tramo.
- Slider de volumen con precio por tramosSlider de volumen de uso con escala logarítmica: la posición se convierte en valor con una exponencial y el valor en posición con un logaritmo, de modo que los tramos bajos tienen más recorrido en la pista. Marca los umbrales de tramo, colorea solo el segmento activo, imanta la manija a las marcas cercanas y hace rodar los dígitos del precio al cambiar de tramo; al soltar, el segmento activo pulsa.
- Cuándo subió el precio de la suscripciónSerie de 36 cargos mensuales en céntimos donde el componente localiza el cambio de precio sin que se le diga dónde: prueba cada corte posible, mide cuánto baja la suma de errores cuadráticos al describir la serie con dos medias en vez de una y se queda con el pico, dibujando esa curva de mejora junto a los tramos; si la mejora no supera el umbral admite que no hay cambio detectable en vez de inventarlo.
- El precio que se mueve solo con quien apuestaCobra cada compra como la diferencia del saldo de una bolsa exponencial en vez del precio de ahora por la cantidad, de modo que mover el precio cuesta lo mismo de golpe que a plazos, con la prueba de que la manera ingenua sí abarata al trocear y el tope de pérdida de la casa, que solo depende de la liquidez.
progress
- Progreso dibujado con caracteresLa barra no es un div con ancho: es una fila de caracteres monoespaciados entre corchetes literales, donde avanzar significa cambiar el glifo de cada celda de sombreado a bloque lleno. El relleno encaja en la rejilla del tipo, y la celda del frente se enciende como cursor.
- Anillo de progreso con count-upMicro anillo SVG que al entrar en viewport anima un motion value hasta su porcentaje: el stroke-dashoffset y la cifra central derivan del mismo valor, así el número y el arco nunca se desincronizan.
- Manómetro de aguja con zona rojaEl arco rojo es UN degradado cónico anillado por una máscara radial: el ancho de la banda es simplemente dónde empieza y acaba la máscara, sin trazo SVG ni un path. La aguja es la misma tira de radio completo que las muescas, pero con la marca en el extremo INTERIOR en vez del exterior, así que barre desde el eje hacia fuera.
- Progreso por pasos con fallo parcialProceso de varios pasos con una barra segmentada que avanza paso a paso; uno de los pasos falla a mitad de camino, se marca en rojo con el motivo y ofrece reintentar solo ese tramo retomando desde donde se detuvo, mientras los pasos anteriores conservan su estado de completados y los siguientes esperan atenuados.
scrollAreas
- Acordeón de cards apiladas por scrollSección de 400svh+ con panel sticky: cuatro cards suben desde abajo del viewport según el progreso y se van APILANDO como pestañas colapsadas de 84px, con nav lateral que salta a cada tramo y clip-path para que la activa se revele limpia.
- Sobre que revela productosEscena scroll-driven de 400vh: un sobre se abre (flap 3D 180 a 0), seis fotos asoman por la V, saltan por encima y se despliegan en fila con captions escalonados.
- Hoja plegada que se despliegaUna tira de pliegues alternos, anidados unos dentro de otros como un acordeón real, gira sobre bisagras que alternan de sentido hasta quedar plana; las caras de canto se oscurecen y se aclaran al llegar al plano, y la sombra proyectada se estrecha conforme la hoja se abre.
- Escena de libro desplegableDos páginas giran como un libro real alrededor del lomo mientras varias piezas recortadas se levantan sobre bisagras propias, ancladas al pliegue o a la página, con las traseras alzándose antes que las delanteras y sombras que se acortan al ponerse de pie; un único valor de apertura gobierna páginas y piezas a la vez.
- Vídeo frotado por el scrollUn vídeo fijo a pantalla completa cuyo tiempo de reproducción lo controla el scroll con interpolación suavizada: la página entera se convierte en la línea de tiempo de la pieza, con fundido final al llegar al fondo.
- Titulares que se relevan pineadosSección de 350vh con escenario sticky donde tres parejas de titulares se turnan según ventanas de progreso: cada set enfoca desde blur mientras su línea superior sube y la inferior baja, separándose al salir.
- Inversión de tema por scrollLa UI completa invierte de claro sobre oscuro a oscuro sobre claro en una franja estrecha de scroll: todos los colores viven como motion values interpolados y los SVG se voltean con filter invert animado.
- Fullpage con telón que caeSitio de secciones completas donde el hero es un telón fijo que CAE hacia abajo (translateY 100vh) con su sombra intensificándose, mientras las demás secciones se desplazan detrás; rueda con lock, teclado y gesto táctil.
- Título que es el hueco de la máscaraAl navegar, el nombre de la sección destino crece hasta convertirse en un hueco transparente: una capa opaca del color de la cortina queda recortada con una máscara SVG del texto, y ampliar esa máscara agranda el agujero hasta revelar toda la página siguiente.
- Indicador de scroll con estrellaFila centrada con estrella de 4 puntas girando con easing suave y etiqueta que flota con un bob vertical infinito.
- Deck de slides a pantalla completaPresentación web de N slides navegable con rueda, teclado y swipe: transiciones con dirección (entra desde el lado correcto, sale encogiendo), candado anti-rebote de 800ms y barra de controles con contador, etiqueta animada y dots que se estiran.
- Cascada de cards scroll-linkedSiete cards que entran en abanico coreografiado (la líder barre y revela al resto), se recogen en pila al scroll y se despliegan en escalera diagonal que queda anclada.
- Ficha de producto que entra por scrollComercio dentro de una película scrubbed: al alcanzar ventanas concretas del progreso, un panel lateral de producto completo (categoría, foto, precio, stepper de cantidad, añadir al carrito) se desliza desde la izquierda con ease expo, y su botón de volver te scrollea de regreso al metraje.
- Visto solo si estuvo en pantallaLista de avisos que marca leído por permanencia real: IntersectionObserver más un temporizador por elemento exigen un tiempo mínimo con un porcentaje visible, con un aro que se llena y se vacía si sales antes, y un conmutador que compara el conteo honesto con el ingenuo.
- Título que se separa con scrollCard fotográfica full-width cuyo titular de dos palabras gigantes se abre en horizontal con el scroll: cada palabra viaja hasta ±18vw en direcciones opuestas mientras la card cruza el viewport.
- Vídeo scrubbed por scrollSección donde un vídeo no se reproduce: su currentTime se scrubbea con el progreso de scroll. Incluye los requisitos de encoding (keyframe por frame) y servido (HTTP 206) que evitan que se congele.
- Scrub de vídeo con estadísticas pineadasCapítulo de 400vh: el vídeo se pre-extrae a 120 ImageBitmaps y un canvas sticky lo frota con el scroll suavizado, mientras dos bloques de estadísticas gigantes entran y salen en ventanas de progreso con badge de acento.
- Marquee sin costura con densidad adaptableCinta de logos infinita: sets duplicados con aria-hidden, desplazamiento del 50% exacto por variable CSS para el bucle perfecto, y a anchos intermedios se oculta uno de cada dos logos para evitar el apelotonamiento.
- Ciclo de pasos por zonas de scrollSección pineada cuyo progreso se divide en N zonas iguales y cada zona en tres fases (dibujar, sostener, des-dibujar) por fracciones fijas, de modo que cada paso entra, respira y sale limpiamente al scrollear.
- Palabras que atraviesan la cámaraCapa narrativa dentro de un scrub: frases que vuelan HACIA el espectador en un espacio con perspectiva (entran desde z negativo con blur, descansan, y salen pasando por delante de la cámara a z positivo), más un waveform de barras con envolvente y una ruta SVG que se dibuja con checkpoints que saltan.
- Explorador con cabecera pegada al scrollTarjeta de archivos con tres capas de chrome: cabecera y pie fuera del área desplazable, y una fila de columnas que viaja DENTRO del scroll pegada arriba, translúcida y desenfocada, de modo que las filas pasan por debajo en vez de chocar con ella. La barra de scroll se oculta sin perder el desplazamiento.
- Anclaje de lectura contra saltosPágina de documentación con desplazamiento propio que guarda con getBoundingClientRect la posición del primer bloque bajo la línea de lectura, aplica cambios de altura por encima (figura que carga, aviso, código que se despliega, tabla con más filas) y corrige scrollTop en un efecto de disposición antes de pintar; un conmutador apaga la compensación y un contador mide en píxeles reales cuánto salta el texto en cada caso.
- Lomo de libro como progreso del artículoEn el lateral del artículo se dibuja el lomo de un libro visto de canto, dividido en cuadernillos cuyo grosor es proporcional a la longitud real de cada sección; conforme avanza la lectura los cuadernillos se tiñen desde arriba y un marcador señala el punto exacto, y señalar o pulsar un cuadernillo muestra su título o salta a esa sección.
- Lectura en audio con la frase resaltadaArtículo con reproductor simulado donde la frase que se está leyendo se resalta y el contenedor interno se desplaza suavemente para mantenerla a la vista, sin saltos bruscos. Cada frase dura en proporción a su longitud más una pausa tras el punto, lo que da un ritmo de lectura no lineal y humano, y una barra de segmentos de distinto ancho permite pulsar y saltar a cualquier frase.
- La sección alta que nunca se anima al entrarRecorre las 1728 combinaciones de altura y forma de llegada de tres secciones que aparecen al hacer scroll, con dos alturas que superan la ventana, y compara cuatro umbrales de disparo midiendo los píxeles que hay en pantalla en el instante en que salta cada uno.
- Escalado global con zoomEstrategia responsive de una línea: por debajo del ancho de diseño, todo el documento se reduce uniformemente con CSS zoom recalculado en resize, manteniendo los valores de píxel del layout intactos.
- Trío de primitivas de entradaTres componentes de entrada reutilizados en toda la página: titular con blur-in y slide, párrafo con fade-up más suave, e imagen revelada por clipPath inset de arriba a abajo; mismos easings y viewport once.
- Navegación espacial por cuadrantesLa página es un lienzo de 200vw x 200vh con cuatro secciones en cuadrantes solapados: la rueda pasea la cámara en sentido horario con un ease dramático, cooldown anti-rebote y fallback vertical con snap en móvil.
- página con scroll infinito sin costuraEl contenido se triplica y, cuando el scroll se acerca al límite de un juego de bloques, el scrollTop se reposiciona hacia adelante o hacia atrás exactamente esa altura; como el contenido en ese punto es idéntico, el salto es invisible y la página se siente infinita en ambos sentidos, con un contador de vueltas y un flash discreto que marcan cada repetición.
- Rebote elástico con mensaje ocultoAl forzar el scroll más allá del final, el contenido se despega del borde con una resistencia de goma que satura mediante una curva exponencial, descubriendo un panel oculto de forma proporcional; al soltar, todo vuelve a su sitio con un muelle. El mismo gesto en la parte superior no hace nada.
- transición de página que se pasaAl avanzar el scroll, la sección activa se despega por el lomo y gira como una hoja de libro (rotateY o rotateX con perspectiva), mientras la siguiente sección espera ya colocada debajo; una sombra de pliegue se desplaza y se estrecha durante el giro y la cara que se levanta se oscurece de forma progresiva, todo mapeado al progreso de scroll y no a una duración fija.
- Tramo de scroll con fricciónUn tramo concreto de la página absorbe solo una fracción de cada gesto de scroll, de modo que cruzarlo cuesta más esfuerzo y el titular gana contraste según el progreso acumulado; si el usuario invierte el sentido sale de inmediato, sin quedar atrapado.
- Órbitas con backdrop en dos tiemposSección centrada donde unas elipses concéntricas escalan desde cero en cascada y, mucho después, dos medias lunas y dos triángulos entran deslizándose desde fuera con un ease casi elástico, sobre filas de iconos que aparecen por índice global.
- Recorrido pineado por estacionesSección de 7x100vh con lienzo sticky: el scroll avanza 6 estaciones (solo cambia un dot y un título por opacidad), una regla lateral marca el paso y el último tramo infla un círculo hasta cubrir el viewport.
- Reveal de imagen en persianasFoto que se descubre mediante cuatro franjas horizontales del color del fondo que colapsan (scaleY 1 a 0) en cascada, con solape de 2px para que no se vean costuras.
- Slides revelados por elipse crecienteHero sticky donde cada slide de vídeo sucesivo se revela SOBRE el anterior mediante un clip-path de elipse que crece desde un punto central hasta cubrir la pantalla, con el radio ligado al progreso de scroll y easing cúbico; incluye titular por caracteres y subtítulo caligráfico.
- Relevo de secciones con zoom de fondoUn scroll de un viewport orquesta tres cosas a la vez: el vídeo fijo de fondo hace zoom de 1 a 1.3, el hero se funde rápido subiendo, y la sección siguiente (una card con su propio vídeo y dashboard) entra escalando de 0.88 a 1 en una ventana de progreso posterior.
searchBars
- Por qué la búsqueda responde antes de soltar el dedoRetira las paradas una a una añadiendo atajo solo cuando una búsqueda testigo no encuentra otro camino igual de bueno sin ella, y luego consulta subiendo de nivel desde los dos extremos a la vez, comprobando contra la búsqueda normal que el resultado es el mismo y midiendo si el preparado compensa, que a tamaño pequeño no lo hace.
- Buscador de vuelos con conexión mínimaBuscador que resuelve un camino mínimo sobre una red de 25 vuelos entre nueve aeropuertos donde una escala solo vale si la salida cae después de la llegada anterior más un tiempo de conexión variable, que crece al cambiar de compañía, al ser vuelo internacional y al cambiar de terminal. Calcula a la vez el trayecto más rápido y el más barato con las mismas reglas y los enseña juntos para que se vea que no coinciden, con la holgura real y el mínimo exigido en cada escala, las conexiones ajustadas en ámbar y un panel con los enlaces descartados por conexión imposible.
- Recuperacion de busqueda vaciaEstado vacio que se diagnostica solo: cuando varios filtros activos no devuelven nada, calcula para cada uno cuantos resultados habria si se quitara solo ese y los ordena por impacto, marcando como irrelevantes los que no cambiarian nada. Al quitar un filtro los resultados se pueblan animando su llegada y el resto de sugerencias se recalcula en vivo.
- Búsqueda por palabra clave frente a búsqueda por significadoPara una misma consulta se enfrentan dos columnas de resultados: la que coincide LITERALMENTE con el término (resaltado en el texto) y la que coincide por SIGNIFICADO gracias a etiquetas de concepto compartidas, sin necesidad de contener la palabra. Los resultados exclusivos de cada lado se marcan con un color y los comunes se conectan con una línea entre columnas; un conmutador funde ambos conjuntos en una única lista indicando el origen de cada resultado.
selects
- Selector de opciones por frente de ParetoNube de dieciséis opciones sobre dos ejes en la que el componente calcula el frente de Pareto en el cliente: ordena por un eje, barre el mejor valor del otro y se queda con los puntos no dominados, uniéndolos con una escalera que se dibuja de forma progresiva. Al señalar una opción descartada traza la línea hasta la que la domina y explica el porqué, y cambiar el sentido de cualquier eje (más es mejor o menos es mejor) recalcula el frente de verdad y lo redibuja.
- Selección múltiple con fichasLo elegido sale de la lista en vez de quedarse en gris, el campo desplaza de lado en lugar de crecer, y Backspace con el campo vacío borra la última ficha. Esas tres decisiones son las que separan un multi-select usable de uno que obliga a apuntar a una cruz de doce píxeles.
shaders
- Imagen que se disuelve en arenaTransición de imágenes vía filtro SVG animado: turbulencia + displacement creciente + offset vertical + blur + fundido de alpha hacen que la foto saliente se deshaga en partículas hacia arriba y la entrante se condense desde el polvo, integrada con AnimatePresence.
- Glitch de texto por velocidad de scrollBloques de texto repetido que se corrompen con caracteres aleatorios en una onda cuya intensidad sigue la velocidad de scroll, mientras un timeline scrubbed deja caer y rotar cada carácter.
- Glitch VHS por rebanadasEfecto glitch CSS-only sobre una imagen: quince rebanadas clipadas de la misma imagen tiemblan con delays aleatorios propios, gateadas por un ciclo compartido de actividad y silencio, solo cuando están en viewport.
- Grano de películaOverlay global de grano: un único frame de ruido gaussiano en tile que salta de posición con steps() para hervir como emulsión, mezclado en screen a baja opacidad.
- Reveal de texto con flareTexto rasterizado a textura y revelado con un wipe de borde ruidoso: frente esmerilado con blur hexagonal de seis muestras y un destello que cabalga el borde y muere al completarse.
sidebars
signIns
- Contraseña revelada por ventanaCampo de contraseña con dos capas superpuestas (puntos y texto real) donde la capa real solo se descubre dentro de una ventana enmascarada que sigue al cursor mientras se mantiene pulsado, como si se rascara la superficie; al soltar, la ventana se cierra encogiendo y el resto del campo vuelve a quedar oculto.
- La sesión que caduca mientras la petición viajaRecorre todas las sesiones que salen de cruzar el resto de vida en cada clic, la duración de cada petición y el desfase del reloj del navegador, 1536 con los valores por defecto, y compara cuatro maneras de proteger la caducidad contando aparte el trabajo que se pierde y las veces que se cierra una sesión que el servidor habría aceptado.
sliders
- Mando rotatorio con arco de muescasEl hueco de abajo en el arco no es decoración: es donde se aparca la discontinuidad de atan2. Midiendo el ángulo como atan2(dx, -dy) el cero cae arriba y la costura de ±180 cae justo en el tramo sin muescas, así que el mando nunca salta de un extremo al otro a mitad de arrastre. Cada muesca es una tira de radio completo anclada al centro y rotada, no una posición calculada con trigonometría.
- Regla de muescas que se arrastraEl valor no es la posición de un tirador sino cuánto se ha desplazado la regla entera bajo una línea central fija, como el dial de una cámara. El realce de las muescas cercanas al centro son tres escalones discretos, no una rampa, y el anillo lee el valor con pathLength 1.
- Manijas de selección que se cruzanDos manijas arrastrables seleccionan texto ajustando a límites de palabra y, al cruzarse, intercambian ancla y foco en lugar de colapsar la selección; un conmutador reproduce el mismo gesto grabado con la versión rota, que se queda vacía y pegada, junto al registro de cada intercambio de ancla.
- Deslizador de rango con dos tiradoresLos dos tiradores se empujan en lugar de intercambiarse, y un clic en la pista desnuda coge el MÁS CERCANO. El relleno se define por left y right, así que ningún extremo necesita conocer la posición en píxeles del otro.
- Deslizador que reconstruye el documentoUn deslizador temporal recorre el historial de un documento y reconstruye su estado exacto en cada punto: las frases añadidas después del instante seleccionado desaparecen, las borradas reaparecen y las modificadas vuelven a su redacción anterior, todo animando la altura del párrafo para que el texto no dé saltos, con marcas de color por autor sobre la propia barra.
- Deslizador de pista partida con tirador de barraLa pista no pasa por debajo del tirador: se parte en dos con un hueco a cada lado, y cada mitad lleva radio asimétrico, redondo por fuera y casi recto en la cara que mira al tirador. Eso es lo que hace que se lea como un objeto cortado en dos y no como dos barras vecinas. El tirador es una barra que se estrecha mientras arrastras.
- Comparador antes/despuésSlider de comparación con clip-path controlado por pointer events (con setPointerCapture), línea divisoria de 1px y tirador de cristal con seis barritas.
spinnerLoaders
- Skeleton de tabla con anchos realesSkeleton de tabla en carga donde cada columna conserva su ancho y su forma de placeholder definitivos (avatar circular, línea corta, píldora, número alineado a la derecha) sobre el mismo grid-template-columns final, así que nada se recoloca al llegar los datos; las filas cambian de skeleton a contenido real una a una en cascada con un crossfade corto, mientras un brillo recorre cada placeholder.
- Cargador de fichas con sombra duraToda la pieza descansa en una sombra con desenfoque CERO, que no se lee como luz sino como una segunda forma sólida detrás de la primera. Las luces del cabecero son cuadradas con borde negro de 1px, no redondas: redondearlas es la manera más rápida de perder el estilo. Y las tres fichas se abanican solo con rotación desde un mismo punto, no separándolas.
- Orbe punteado de estados de agenteIndicador de "pensando" para interfaces de IA: una esfera de puntos dibujada en canvas 2D que comunica el estado del agente cambiando de coreografía (órbitas inclinadas al trabajar, meridiano que barre al buscar, bandas que se desordenan y resuelven al razonar, anillo que respira, contorno que muta de círculo a triángulo y cuadrado). Reloj compartido entre instancias, pausa fuera de viewport y frame estático con reduced-motion.
- El esqueleto se transforma en el contenidoCada hueco del esqueleto ocupa la posición y el tamaño exactos de su contenido real, y al llegar los datos el propio placeholder se convierte en el elemento: interpola tamaño y radio hasta sus valores definitivos mientras el brillo de carga se apaga y el contenido aparece dentro, en cascada fila a fila.
- Matriz de puntos con coreografía por retardoUna sola rejilla de puntos y un solo keyframe dan tres cargadores distintos: lo que cambia es la función que calcula el retardo de cada punto a partir de su posición, radio para la onda, columna para el barrido y ángulo para la órbita. Los tres niveles de opacidad viven en variables CSS.
- Cargador de hélice vista de cantoUna doble hélice vista de canto no es más que una oscilación horizontal. Ningún punto gira ni hay 3D: cada uno sólo se desliza a izquierda y derecha, y la escala y la opacidad van atadas a la MISMA fase, así que el lado lejano del giro se lee pequeño y apagado. Los dos filamentos son la misma animación con medio ciclo de diferencia.
- Cargador de tres puntos pegajososLos puntos se funden con un filtro SVG de dos pasos: desenfocar y después machacar el canal alfa multiplicándolo por 21 y restándole 7. Todo lo que queda por encima de un tercio de opacidad pasa a sólido y lo demás desaparece, así que dos círculos que se solapan salen como una sola forma con cuello. El filtro va en el PADRE, nunca en cada punto.
- Loader de panal que respiraPantalla de carga con clúster hexagonal: la celda central azul se hincha mientras las pálidas se contraen en onda que cascada hacia fuera por anillos, tres iconos rotan en tríos aleatorios y la barra avanza a saltos irregulares.
- Escena de espera que arranca a mitadCargador con escena: cuatro nubes cruzan el cielo y la profundidad se codifica como duración, la lejana tarda más. La clave es el retardo de animación NEGATIVO, que hace que cada nube empiece ya avanzada en su viaje, así que al pintar la página el cielo nunca aparece vacío esperando a la primera.
- Carga que se adapta a la conexiónLa pantalla de carga mide en vivo el ritmo de llegada de los recursos y cambia de estrategia si la conexión es lenta: rebaja la promesa visual, ofrece una versión ligera y explica la espera invirtiendo la jerarquía tipográfica entre título y texto de apoyo; con conexión rápida apenas llega a mostrarse.
- Interfaz que se dibuja como plano técnicoAntes de que llegue el contenido, la interfaz se dibuja a sí misma como un plano técnico: rectángulos de contorno fino, ejes y cotas trazándose con stroke-dashoffset en el orden real de construcción (retícula, luego contenedores, luego elementos). Cuando el contenido llega, cada contorno se rellena con su pieza real y las líneas de construcción se desvanecen, como si vieras el andamiaje antes que el edificio.
- Progreso honesto por etapasPantalla de carga que enumera las etapas reales (tipografías, imágenes, datos, scripts) con su peso relativo, y hace avanzar la barra global en proporción a ese peso en lugar de repartirlo a partes iguales. La etapa activa muestra su propio progreso, las terminadas quedan marcadas con su tiempo real y se señala sin alarmar cuando una tarda más de lo esperado.
- Estimación que aprende de la sesiónEl tiempo restante no es un número inventado: se calcula con la media de las cargas anteriores de la sesión y se muestra como una banda con margen de error que se estrecha con cada muestra nueva. Si una carga se sale del rango previsto, la banda lo reconoce y se ensancha para la siguiente predicción.
- El indicador se convierte en la interfazEl elemento que indica carga nunca desaparece: el círculo viaja hasta la esquina y se convierte en el avatar, la barra se estira y se convierte en la cabecera, el punto pulsante se asienta como indicador de estado. Los mismos nodos cambian de posición, tamaño y forma con una transición interpolada, sin desmontarse en ningún momento, lo que da sensación de continuidad material.
- Panel que distingue caché de redRejilla de tarjetas de un panel donde las que vienen de caché aparecen ya asentadas y con una marca discreta, mientras las que llegan de red muestran su propio placeholder y entran con su ritmo; cuando una tarjeta cacheada se revalida, se refresca con un destello suave que delata el cambio.
- Carga con envío a segundo planoUn panel de carga bloqueante ofrece cancelar o continuar en segundo plano; al elegir la segunda opción se encoge y viaja hasta convertirse en una píldora discreta en una esquina mientras la interfaz queda usable, y al terminar avisa y se puede volver a desplegar. Cancelar congela el avance y permite reanudarlo desde donde iba.
- Secuencia de intro con logoApertura de 3.6s: punto blanco que crece sobre el icono, círculos concéntricos que se expanden, rayos SVG que se trazan en abanico, wordmark revelado por clip de anchura y logo que vuela a su hueco del navbar.
- Preloader cinematográficoPantalla de carga full-viewport sobre navy casi negro: partículas, esfera con color-dodge, arco de números 0-100 en canvas, wordmark y ola de puntos.
- Pantalla de carga en trípticoLoader de portfolio con tres focos: rótulo arriba a la izquierda, palabras que rotan en serif itálica en el centro (Design, Create, Inspire) y un contador 000-100 gigante abajo a la derecha, cerrado por una barra de progreso con glow que escala desde la izquierda.
- Loader de ojos líquidosPreloader WebGL: un personaje-silueta emerge del borde inferior y dos ojos líquidos SDF (elipse + dos párpados cortadores) persiguen el cursor con muelles infra-amortiguados, cola y gelatina de borde.
statsAndKpis
- Muelle en sus tres regímenesEl mismo muelle animado tres veces con amortiguamiento por debajo, en y por encima del crítico, integrado con paso fijo de 1/300 s: el valor crítico se deriva de 2 por la raíz de rigidez por masa en lugar de ponerse a ojo, así que los tres regímenes siguen siéndolo al mover la rigidez, y bajo las curvas de posición se miden la subida al 90%, el tiempo de asentamiento en una banda del 1% y el sobreimpulso de cada uno.
- Exposición acumulada de la cadena de fríoRegistro de temperatura de un envío refrigerado que no juzga por el pico sino integrando el área por encima del umbral en grados por minuto, con el reparto de esa exposición por tramo (carga, trayecto, muelle y entrega) y el instante exacto en que se cruza el límite del producto. La serie está construida para que el criterio ingenuo del pico dé el envío por bueno mientras el acumulado lo suspende, y un conmutador enfrenta las dos cifras.
- Desglose de valoraciones que filtraBloque de reputación con la nota media a la izquierda usando estrellas de relleno fraccionado (un degradado SVG recortado al porcentaje exacto, no estrellas enteras) y a la derecha un desglose por número de estrellas en barras que se llenan en cascada al entrar en el viewport; pulsar una barra filtra la lista de reseñas inferior por esa puntuación y el contador se actualiza.
- Gauge de ticks en arcoMedidor semicircular hecho de rayitas: 40 ticks radiales sobre un arco de 180 grados donde los activos se pintan de acento y el resto queda gris, con el porcentaje centrado y etiquetas opcionales de mínimo y máximo.
- Barchart de rayas en marchaCard de métricas con gráfica de seis barras rellenas de patrón diagonal rayado que se desplaza en bucle, reveladas por tapas que se deslizan, y un count-up grande de visitantes debajo.
- Regla infinita bajo una métricaBajo una cifra protagonista (una edad, un peso, una puntuación) corre una REGLA infinita: ticks dorados de tres alturas desfilando en marquee con máscara en los bordes y un indicador central fijo más alto, como si el dial midiera en vivo; la cifra hace count-up y late sobre un fondo circular que rota 360 grados en 30s.
- La semilla no basta: manda el orden de llamadasUna composición generada que se reconstruye entera desde una semilla corta y enseña el fallo del orden de llamadas: con un generador compartido, activar la capa extra consume los primeros números de la secuencia y desplaza o recolorea 26 de los 26 elementos previos con la misma semilla, mientras que con un generador por canal (derivado de semilla, canal y capa) cambian 0 y la capa solo añade. El componente regenera la composición dos veces y confirma elemento a elemento que sale idéntica.
- Cifras con polvo de partículasCarrusel de estadísticas gigantes que auto-avanza: cada cambio de cifra emite ~140 partículas deterministas desde el borde del glifo que ascienden en arcos con rizo, sobre arcos punteados decorativos.
- Cifra en fichas tickerImporte grande mostrado como fichas de dígito independientes que aleatorizan su valor cada 50ms y se van resolviendo en orden, cada una unos ticks después que la anterior, como un panel de aeropuerto.
- Stats con relleno líquidoTres cards cuadradas de estadística con count-up easeOutCubic al entrar en viewport y hover líquido: una masa verde oscura de borde redondeado sube desde la base, la card se eleva y el texto pasa a blanco.
- Muestra por reservorio comprobadaFlujo continuo del que solo caben unos pocos registros en memoria, resuelto con la regla del reservorio (los primeros entran directos y el registro en la posición n sustituye a un hueco al azar con probabilidad k entre n, con la curva de entrada cayendo y el hueco recién ocupado señalado). Encima va la comprobación: la simulación entera se repite miles de veces con semillas derivadas de una fija, troceada por fotogramas, y el histograma de frecuencias por posición sale plano sobre la línea teórica con su margen de tres sigmas, mientras un conmutador cambia la regla por una probabilidad fija y deforma el histograma al instante con la desviación máxima disparada.
- Desfase de reloj estimado por ida y vueltaEstimación del desfase entre el reloj del cliente y el del servidor con una red simulada de retardo variable y asimétrico: cada intercambio deja una muestra de viaje y desfase, se promedian solo las del 25% de viaje más corto y el error cae a 28,1 ms frente a los 45,2 ms de promediar las 40, con las descartadas atenuadas en el plano viaje contra desfase, las dos curvas de error enfrentadas y el sesgo irreducible de 27,0 ms (la mitad de la asimetría) marcado como el suelo que ningún método cruza.
- Cola de tareas que avanza solaUna lista vertical infinita donde cada pocos segundos el siguiente ítem sube a una card de vidrio fija (el "activo", con etiqueta e icono) y los demás esperan debajo cada vez más pequeños, apagados y desenfocados; al agotar la lista, un teletransporte silencioso sin animación reinicia el bucle.
- Presupuesto de privacidad que se gastaUn panel de estadística agregada donde cada consulta devuelve el recuento con ruido de Laplace y consume presupuesto, y un botón ejecuta de verdad el ataque por repetición: el promedio de las respuestas ruidosas se acerca al valor real y el error cae con la raíz del número de consultas, dibujado contra el límite teórico. Con el presupuesto activo el sistema deja de responder a mitad del ataque; al quitarlo, el valor real queda al descubierto y se ve cuántas consultas hicieron falta.
tables
- Gráfica con selector de rango que filtra la tablaGráfica de área con relleno degradado y, superpuesto, un selector de rango arrastrable de dos asas independientes: lo que queda fuera se atenúa y la tabla inferior se filtra en vivo a las filas del rango, recalculando total y media al instante.
- Columnas que se reordenan arrastrandoTabla cuyas columnas se reordenan al arrastrar su cabecera: la columna arrastrada se despega con sombra y ligera rotación y sigue al puntero, mientras las demás se desplazan en bloques de una posición para abrir hueco, calculado comparando la x del puntero con el centro de cada columna, y aterriza con un spring al soltar.
- Tabla con filas que se reordenan con FLIPTabla de datos ordenable por columna donde, al cambiar el criterio, las filas no saltan a su nueva posición: se miden sus coordenadas antes y después del reordenamiento y se interpola la diferencia con una animación FLIP (First-Last-Invert-Play), invirtiendo el sentido si se pulsa la misma cabecera dos veces.
- Rejilla editable tipo hoja de cálculoRejilla de celdas con una celda activa marcada por un recuadro de acento que se desliza animado en vez de saltar entre posiciones, con navegación por teclado (flechas, Enter, Tab), edición inline que sustituye el contenido al empezar a teclear o lo conserva con F2 o doble clic, y una barra superior con la referencia de celda (A1, B3).
- Ranking con empates estadísticosRanking de seis opciones en barras horizontales con su margen de error dibujado como banda: cuando el intervalo de una opción se solapa con el de la que lidera su grupo, el componente no finge un ganador y las agrupa como empate, con puesto compartido, corchete común y una frase que explica que la diferencia no es concluyente. El nivel de confianza ensancha o estrecha las bandas, así que los grupos se fusionan o se separan y las barras se reordenan con una transición FLIP.
- Conflictos de agenda repartidos en columnasVista de día donde los eventos solapados se agrupan por cadenas de solape y se reparten automáticamente en columnas dentro de cada grupo, escalonándose un poco para insinuar la pila; señalar un evento lo despliega por encima del resto sin mover a los demás.
- muro de reseñas con columnas a la derivaTres o cuatro columnas de reseñas de alturas distintas se desplazan en bucle infinito en sentidos alternos y a velocidades distintas; al señalar una card, su columna frena con una desaceleración suave y la card se eleva mientras las demás siguen, con máscaras de degradado arriba y abajo para que el contenido aparezca y desaparezca sin corte.
- Qué queda elegido cuando borras otra filaRecorre todos los pares de fila elegida y fila borrada distintas y cuenta en cuántos salta la selección a otra fila, comparando recordar la posición, recordar la identidad o ir siempre a la siguiente, con la condición exacta que provoca el salto.
- Lo que borra el botón cuando el filtro esconde lo elegidoRecorre todos los escenarios que salen de marcar cualquier subconjunto de lo visible y pulsar después la acción en lote con cualquiera de los filtros, 240 con los valores por defecto, y compara cuatro maneras de guardar la selección contando las filas que se tocan sin verse, las que se tocan sin haberse elegido y las elegidas a las que no les pasa nada.
- Input de código en celdasInput de verificación con un dígito por celda: cada carácter hace pop desde escala 1.3 al entrar, el foco avanza solo mediante un anillo animado y, al completar el código, todas las celdas pulsan en verde en cascada o tiemblan en rojo si es inválido.
- Retícula de celdas que rotan fotosMini-retícula pixelada donde cada celda cicla continuamente un pool de imágenes con crossfade de 600ms, desfasada por su índice serpiente para que nunca cambien dos vecinas a la vez.
- Ordenar por un campo con empates baraja las páginasPagina una lista donde muchas filas comparten la clave de orden, dejando que el motor devuelva las empatadas en distinto orden en cada petición, comprueba el invariante de que cada fila salga exactamente una vez con y sin un segundo criterio de desempate, y calcula si algún corte parte un grupo de empatadas, que es condición necesaria del fallo aunque no suficiente.
- Cruzar dos tablas anónimasDos tablas inventadas sin nombres, una de mutua con tratamiento y un padrón con iniciales, se cruzan por edad, código postal y sexo: el componente cuenta las combinaciones únicas en ambas, reconstruye la fila concreta que queda al descubierto y deja generalizar por tramos de edad y dígitos de código postal, con las curvas de protección y precisión enfrentadas marcando el punto de equilibrio.
tabs
- Vitrina de tabs con ciclo automáticoPanel de vídeo con barra de tabs que avanza sola cada pocos segundos: cada tab monta su propia card de demo (wizard, métricas, tests, deploy) sobre el vídeo con doble animación de overlay y diálogo centrado.
- Barra de pestañas con cúpula viajeraLa silueta de la barra se deforma: su borde superior sube en cúpula justo donde está la pestaña activa, y el botón se eleva hasta quedar montado en ella. El bulto no es un pseudo-elemento redondeado sino una losa del mismo color recortada con un clipPath dibujado en píxeles y devuelto a coordenadas normalizadas con un scale.
tags
testimonials
- Nube de palabras que filtra reseñasA partir de un conjunto de reseñas se cuentan las palabras significativas y se dibujan en una nube donde el tamaño refleja su frecuencia, colocadas en espiral desde el centro para que ninguna se solape. Al pulsar una palabra, la lista de reseñas se filtra a las que la contienen.
- Prisma 3D de testimoniosCarrusel de testimonios cuya foto es un prisma CSS 3D real de 4 caras que gira físicamente; 6 slides se re-etiquetan sobre las 4 caras justo antes de cada giro para que el cambio sea invisible.
texts
- Titular extruido por copias apiladasCada letra se dibuja unas treinta veces: cada copia se desplaza 0,3 px a la derecha y 1,2 px hacia arriba respecto a la anterior y aclara su gris un par de puntos, de modo que el lateral del volumen es un degradado hecho de tipografía. Las letras se apartan del cursor y un clic suelta un anillo que se expande.
- Trozos que cortan letras por la mitadAcumula el resto entre trozos antes de descodificar y no pinta una línea hasta que llega su salto, porque una letra acentuada ocupa dos bytes y un corte en medio la convierte en un rombo con interrogación, mientras pintar cada trozo tal cual parte líneas y rompe caracteres.
- Titular que se borra tecla a teclaTitular pixelado gigante donde el scroll BORRA caracteres de derecha a izquierda como un backspace: cada glifo (y los stickers intercalados como caracteres) es un span indexado y el progreso decide cuántos siguen visibles, con cursor de bloque parpadeando tras el último.
- Manifiesto en créditos de cineUn manifiesto largo en tipografía pixelada sube como créditos de película: fijo en viewport, su translateY recorre de +100vh a -350vh ligado al progreso del scroll con fade-in rápido, deslizándose SOBRE un vídeo scrubbed de fondo.
- Lista que se colorea con la línea de tiempo del scrollCada línea se colorea al cruzar la mitad del recorrido, y lo hace sin una sola línea de JavaScript: la propia línea declara su view-timeline y la animación se engancha a ella, así que el progreso ES la posición del scroll. El rango es lo que convierte un desvanecido en un umbral.
- Palabra serif con glowLa firma visual: palabra en Instrument Serif itálica con halo amarillo-verde fluorescente (doble capa con text-stroke) y entrada tubular curl en 3D.
- Palabra con marco de selecciónUna palabra del titular aparece rodeada por el marco de selección de una herramienta de diseño: cuadrilátero IRREGULAR punteado con puntos en esquinas y puntos medios, ligeramente rotado, como si alguien la estuviera editando en directo.
- Palabra con glow direccionalPalabra final de un titular serif gigante que emite un glow neón direccional: dos duplicados blancos superpuestos con blur creciente y máscaras de gradiente que sesgan la luz hacia una esquina.
- Recuento de palabras sin espaciosContador de palabras que segmenta con Intl.Segmenter en modo palabra y solo cuenta los segmentos que la propia API marca como palabra, dibujando los cortes entre una y otra sobre el texto. Trae ejemplos en español, chino, japonés con los tres sistemas de escritura, tailandés y alemán con una palabra compuesta larguísima, y enfrenta el recuento real con el ingenuo por espacios, que devuelve una sola palabra para una frase entera, con el tiempo de lectura y los caracteres por palabra de cada idioma.
- Tambor cilíndrico de textoUn manifiesto largo montado sobre un cilindro 3D invisible: cada línea se coloca en el tambor por su distancia a la línea activa (translateY, translateZ y rotateX derivados del ángulo sobre un radio fijo), y el scroll hace girar el tambor con las líneas curvándose hacia el fondo con blur de profundidad.
- Rótulo tumbado en el suelo que se lee parejoRótulo pintado sobre un suelo en perspectiva donde cada línea se estira a lo largo del piso hasta que el ojo la ve de la misma altura, frente a tumbarlas todas con la misma profundidad, y donde se mide el techo de la técnica: pasado cierto punto no queda pantalla sobre el horizonte y la línea ya no cabe.
- Reseña con subrayado de rotuladorUn testimonio largo resalta sus frases clave en cascada con un trazo de rotulador de esquinas irregulares que crece de izquierda a derecha por detrás del texto, respetando cada salto de línea con su propio trazo, mientras el resto del párrafo se atenúa; el ciclo se repite solo en bucle.
- Texto que enfoca por caracteresReveal tipográfico por caracteres con desenfoque y brillo: cada letra entra desde blur 10px y brightness 0 con stagger corto, y la salida reproduce la cascada en dirección inversa.
- Texto que se decodificaEtiquetas monospace que aparecen decodificándose de izquierda a derecha: cada carácter cicla glifos aleatorios hasta fijarse en el real, con arranque retardado fijo y delays por línea.
- Titular con luz propiaEl resplandor son OCHO capas de filtro SVG, cada una con su propio tinte, su propio desplazamiento y su propio desenfoque, fundidas con feMerge. Y sólo se calculan CUATRO desenfoques, que se reutilizan: el desenfoque es la primitiva cara. Un text-shadow no puede hacerlo, porque todas sus sombras comparten forma y sólo admiten un color por sombra.
- H1 fantasma en dos líneasTitular apilado en dos líneas donde la primera va desvanecida (ghost) y la segunda en tinta sólida. Entrada blur-up cinematográfica en cascada.
- Titular con revelado de palabrasBlurText: cada palabra entra desde blur 10px, 50px abajo y opacidad 0 pasando por un keyframe intermedio que rebasa 5px hacia arriba, disparado por IntersectionObserver, para titulares serif gigantes que se materializan por rachas.
- Logotipo de polígonos que se armaWordmark SVG donde cada letra está construida con 3-4 polígonos (verticales, diagonales, travesaños) y cada pieza entra deslizándose desde y:120 con stagger, así el logotipo se ENSAMBLA como piezas de rótulo en lugar de aparecer.
- H1 palabra a palabraTitular gigante cuyas palabras suben una a una con delay incremental global, manteniendo el flujo natural del texto en varias líneas.
- H1 sans + serif itálicaTitular firma que mezcla Inter Tight recta con Instrument Serif itálica en la misma línea. Entrada desde arriba con easing expo-out.
- Texto con destello que lo recorreLa línea clave del titular lleva un brillo blanco que barre las letras en bucle: un gradiente angular con núcleo estrecho de luz, recortado al texto con background-clip y desplazado con background-position animado.
- Titular con scramble bidireccionalTitulares mono que se materializan con caracteres aleatorios resolviéndose de izquierda a derecha y, al empezar a scrollear, se DES-materializan con el proceso inverso; una máquina de estados por línea (idle, entrando, revelado, saliendo, oculto) reacciona al umbral de scroll.
- Frase tecleada con barrido de colorManifiesto centrado cuyas letras entran con y+rotationX escalonadas sobre un degradado suave, y una frase interior recibe después un barrido de recolor izquierda-a-derecha en dos tiempos: azul primero, negro después.
- La reserva que no saltaMide con canvas el ancho de cada carácter en la familia de reserva y en la definitiva, saca de ahí el factor de tamaño y el espaciado que igualan la ocupación, y enseña el mismo párrafo con y sin ese ajuste midiendo en píxeles el desplazamiento acumulado de las líneas cada vez que se conmuta entre las dos fuentes.
- Titular justificado que estira cada líneaCartel tipográfico donde cada línea encaja exactamente en el ancho de la caja: se mide su ancho natural con un espejo invisible y, por búsqueda binaria en dos rondas, se resuelve el escalado horizontal y el tracking compensado que la hacen coincidir con el borde, recalculando en vivo con ResizeObserver.
- Letras que se funden en ligaduraPareja de letras contiguas que se aproximan hasta fundirse en una ligadura cuando el cursor se acerca: un filtro SVG de desenfoque más contraste alfa (efecto goo) hace que sus trazos se unan en una sola forma continua, y se separan al alejarse.
- Alineación óptica del margenBloque de cita editorial donde la comilla de apertura y las letras redondas u oblicuas que abren línea (O, C, A, V, W) sobresalen una fracción del margen matemático, para que el ojo perciba el borde como recto; incluye un conmutador de comparación con guía vertical que revela el desfase.
- Párrafo que abraza la siluetaPárrafo editorial que se derrama alrededor de una figura irregular con shape-outside, donde el polígono no sale de una imagen sino del perfil de la silueta muestreado por tramos, y donde muestrear por el punto en vez de por el máximo del tramo hace que las líneas se metan encima del dibujo.
- Titular en arco puesto letra a letraTitular colocado sobre un arco glifo a glifo, donde repartir el arco en partes iguales monta las letras anchas sobre sus vecinas y abre huecos alrededor de las estrechas, y donde girar cada letra por la tangente de su borde en vez de la de su centro la deja inclinada media anchura de arco.
- Titular de revelación circularTitular duplicado en dos capas (un contorno fantasma y una versión rellena de color) donde la capa de color se recorta con un clip-path circular cuyo radio y punto de origen animan solos en bucle y saltan a seguir el cursor en cuanto entra en la zona. La revelación nunca usa opacidad ni máscara de imagen: es geometría pura sobre el propio texto.
- Vídeos circulares dentro del titularUn titular donde algunas palabras van acompañadas de VÍDEOS en miniatura incrustados en línea como si fueran glifos: círculos recortados con overflow hidden que reproducen clips en bucle a la altura de la caja tipográfica, escalando con clamp junto al propio texto.
- Palabra rellenada con persianasUna palabra del titular se rellena con LÍNEAS horizontales en vez de tinta sólida: un repeating-linear-gradient de franjas blancas y huecos transparentes recortado al texto con background-clip, como texto escaneado o de persiana veneciana.
- Párrafo que se entinta con el scrollManifiesto por caracteres: cada letra pasa de opacidad 0.3 a 1 en una micro-ventana de progreso ligada a su posición en el texto, así la lectura avanza como una marea exactamente a la velocidad del scroll, sin partir palabras.
- Acentos cursivos con blend exclusionSistema de rotulación a dos voces: titulares condensados en mayúsculas con una palabra manuscrita en verde neón SUPERPUESTA en mix-blend-exclusion y ligeramente rotada, más una textura granulada fija en blend lighten sobre toda la página.
- Titular por caracteres en runtimeTitular de varias líneas cuyos caracteres se envuelven en spans por JS al montar y suben desde translateY(110%) con delay incremental por carácter y salto de línea, preservando espacios sin envolver.
- Anillo de texto giratorioInsignia circular con una frase corta repetida sobre un trazado SVG (textPath) que gira en bucle lento e infinito alrededor de un icono centrado. Al pasar el cursor invierte el sentido de giro y acelera, funcionando como sello de scroll o badge decorativo en heros.
- Titular con fichas en líneaUna hilera de fichas circulares solapadas vive DENTRO del titular, entre dos palabras, no encima ni al lado: es un inline-flex alineado al medio, así que se comporta como una palabra más, se apoya en la misma línea óptica y el texto sigue fluyendo y partiendo a su alrededor.
- H1 con vídeo redondo incrustadoTitular gigante cuyas palabras suben desde máscaras individuales y que incrusta en mitad de la frase un clip de vídeo circular en loop como si fuera un emoji, con pop de entrada backOut.
- Marca de agua con grano y degradadoPalabra gigante de fondo (16rem, weight 800) con degradado oscuro-a-cian recortado al texto y un filtro SVG de turbulencia que mete grano SOLO dentro de las letras, con un rótulo pequeño solapado encima por márgenes negativos.
- Sugerencias con cambios aceptables uno a unoUn párrafo donde el texto original y las propuestas de varios autores conviven a la vez: las inserciones aparecen subrayadas en el color de quien las propone y las supresiones tachadas, sin sacar al lector de la lectura. Cada cambio se acepta o descarta por separado y, al resolverse, el párrafo se recompone: la palabra que se va encoge hasta desaparecer y las que quedan ocupan su sitio en el mismo flujo de texto.
- Notas al margen que resuelven sus solapesArtículo con notas al margen derecho colocadas a la altura exacta de su referencia en el texto, medida con la posición real de cada marca; cuando dos notas chocarían, la de abajo se empuja en cascada lo justo para no tocarse, y señalar una marca resalta su nota con una línea fina que las une.
- Definición que abre hueco entre las líneasTérminos marcados en un párrafo que, al pulsarlos, no abren un globo flotante que tapa el texto: el propio párrafo abre un hueco real entre las dos líneas donde vive el término, insertando la definición como un bloque con la altura animada desde cero mediante CSS grid. Solo puede haber una definición abierta a la vez: abrir otra cierra la anterior primero y encadena las dos animaciones para que el texto no dé tirones.
- Titular difference que se despideRótulo fijo al fondo del viewport en mix-blend-difference que al scrollear el hero sube, encoge a 0.8, se desenfoca hasta 24px y se funde, todo con lerp por frame, invirtiéndose sobre cualquier fotograma del vídeo que cruce.
- Titular con barrido de máscaraTitular que no se funde: se BORRA de izquierda a derecha con una mask-image de gradiente lineal cuyo frente avanza con una variable --wipe ligada al progreso del vídeo scrubbed, mientras el fondo se desplaza lateralmente hasta centrarse.
- Titular con persiana de tres lamasCada letra se recorta en tres franjas con clip-path (35, 30 y 35 por ciento de su alto) que entran desde lados alternos y siguen de largo hasta salir por el contrario, mientras una cuarta copia de la letra, la que se queda, pasa de desenfocada a nítida justo cuando las lamas la cruzan.
- Banda de texto sobre trazado curvoEl texto va sobre un textPath, así que los glifos se curvan de verdad siguiendo la línea base, cosa que offset-path no puede hacer. El punto de control de la Bézier está muy por debajo del viewBox, de modo que solo asoma la cresta de una parábola profunda y el arco sale suave en vez de una U cerrada. El color no se mueve: son cinco paradas de un degradado que recorren la misma rueda desfasadas una posición.
- Titular con eje variable en scrollTitular grande cuyo eje de peso variable (wght) y su tracking se interpolan de forma continua con el progreso de scroll mediante font-variation-settings, pasando de fino y muy abierto a negro y compacto (o al revés); cada palabra lleva un pequeño desfase para que el engorde recorra la frase como una ola, y una regla graduada muestra en vivo el valor numérico del eje.
- Titular que rueda letra a letraEntrada de titular donde cada carácter es un cilindro de dos caras: la que sale gira sobre un eje situado a un cuarto de la caja y la que entra se despliega desde la línea base, mientras una tercera copia invisible sostiene el ancho para que el texto no se mueva ni un píxel.
- Palabra que se transforma en otraAl cambiar la palabra, las letras que las dos comparten no se sustituyen: se deslizan a su nueva posición con animación de layout, y solo se desvanecen las que sobran y aparecen las que faltan. La clave está en numerar cada repetición de una letra para que el emparejamiento no se cruce.
- Letras con peso variable al cursorWordmark gigante cuyas letras cambian de font-weight según la dirección del movimiento del ratón sobre cada una: adelgazan al pasar hacia la derecha, engordan al volver.
- Testimonio revelado por scrollCita larga cuyas palabras se encienden una a una conforme avanza el scroll: cada palabra mapea su propio tramo de progreso a opacidad y color, sin trigger de entrada, totalmente reversible.
- Panel de letras abatiblesCada carácter es una tarjeta partida en dos mitades que gira sobre una bisagra central, ciclando por varios glifos intermedios con retardo escalonado por columna hasta asentarse en la letra final.
- Párrafo editorial con capitular animadaApertura editorial clásica con una capitular gigante en serif itálica que ocupa varias líneas: al entrar en viewport se rellena de color de abajo arriba con un gradiente animado sobre background-clip: text, mientras la primera línea en versalitas y el resto del párrafo aparecen con un fade escalonado.
- Reveal por líneas medidasTexto que se revela línea a línea con máscara y slide-up, midiendo los saltos de línea reales del DOM en runtime (no hardcodeados) y re-midiendo cuando cargan las fuentes.
timelines
- Cronología de cambios con diffCronología de actividad donde cada entrada se despliega para mostrar el diff real del cambio, con líneas añadidas y eliminadas y su recuento, en lugar de solo describir la acción. Las entradas del mismo autor en el mismo momento se agrupan en una sola fila con contador y se separan al desplegar el grupo.
- Retardo con realimentación visibleLaboratorio de eco donde un pulso sintetizado con la Web Audio API se realimenta dentro de un nodo de retardo y cada repetición se dibuja en una línea temporal con su amplitud real, la realimentación elevada a n, contra un umbral de audición dibujado, así que los ecos audibles se pueden contar uno a uno. Mover el retardo separa las barras y muestra el equivalente en pulsos por minuto, y pasada la realimentación segura el componente avisa y la limita para que la cola no se dispare.
- Marquee de logos con timelineDoble pieza de prueba social: marquee infinito atenuado con máscara en los bordes, y debajo una barra de progreso degradada que avanza por pasos iluminando un logo cada 2.5s hasta encender los cuatro.
- El historial que ve cada uno es distintoRenumera el registro de actividad por espectador y calcula los totales solo sobre lo visible, porque conservar la numeración global deja contar por los huecos cuántas cosas pasaron en lo que no se puede ver, y un total agregado permite deducir lo oculto restando.
toasts
- Pila de avisos con profundidadLos avisos se apilan uno encima de otro y el índice manda sobre tres canales a la vez: cada capa hacia atrás baja 7 px, escala 0,965 y pierde 0,18 de opacidad. El contenedor solo mide la tarjeta de delante más la cola, así que la pila no empuja el resto de la página al crecer.
- El deshacer que llega tardeRecorre los 1014 escenarios que salen de cambiar un campo y dejar que ocurran dos sucesos cualesquiera antes de pulsar deshacer, y compara cuatro políticas de deshacer contra el resultado obtenido repitiendo el registro sin la acción, midiendo las unidades de valor que cada una corrompe y los deshaceres que se niega a hacer.
videos
- Boomerang por captura de framesVídeo de ida y vuelta perfecto: durante la primera reproducción cada frame se captura a canvases fuera de pantalla con requestVideoFrameCallback y, al terminar, un canvas visible reproduce el array adelante y atrás a 30fps sin un solo seek.
- Card de registro sobre vídeoPágina de sign-up cinematográfica: vídeo a pantalla completa y una card de dos columnas donde la mitad del formulario es opaca oscura y la otra mitad es un panel de cristal que deja ver el vídeo con solo el logo flotando.
- Personaje de vídeo con estadosUn personaje (un ave, una mascota) vive en el hero como CUATRO clips webm intercambiados por una máquina de estados: entrada al cargar, dos idles alternándose en bucle, y salida disparada al scrollear; volver arriba lo hace regresar.
- Vídeo revelado como telón centralTras un carrusel horizontal pinneado de productos, un wrapper centrado (left 50%, translateX -50%) crece de width 0% a 100% revelando un vídeo scrubbed por detrás: las dos mitades del catálogo se apartan como un telón que se abre desde el centro.
- Vídeo como puerta entre pantallasSitio de dos pantallas sin scroll: un botón circular de arranque reproduce el vídeo del hero una única vez (los titulares gigantes salen por máscaras), y su evento ended sube con spring la segunda pantalla: un abanico de tres cards de vídeo solapadas que se reproducen al hover.
- Vídeo con bucle fundidoReproductor de vídeo sin salto de bucle: rAF tween de opacidad al cargar, fundido a negro cuando queda medio segundo, reset silencioso a cero y reaparición, con un flag que evita fundidos dobles.
- Orbe de vídeo reteñido por filtrosUn asset de vídeo con fondo negro (un orbe de cristal) se integra y se RE-TIÑE al color de marca sin tocar el archivo: mix-blend-screen elimina el negro y una cadena de hue-rotate, saturate, brightness y contrast gradúa el color como en un editor.
- Vídeo que crece de hueco a pantallaTimeline pinneada en dos fases: primero el wrapper del vídeo anima desde el rect MEDIDO de un hueco invisible del layout (getBoundingClientRect contra la sección) hasta pantalla completa, y después el scroll restante scrubbea video.currentTime con guardas de seeking y umbral de delta.
- Dos vídeos scrubbed por mitades de pantallaEl cursor gobierna DOS películas: mover el ratón a la izquierda del centro muestra y scrubbea el vídeo B, a la derecha el vídeo A, con una ZONA MUERTA central donde ambos descansan en el frame 0 y se mantiene el último activo para que el cambio nunca parpadee.
- Vídeo boomerang por seeksBucle de ida y vuelta sin assets extra: el vídeo reproduce normal y al terminar un reloj rAF lo rebobina con seeks acelerados y sin apilarse (flag seekPending resuelto en el evento seeked), volviendo a play al llegar a cero.
- Capa de vídeo HLS multiplataformaComponente memoizado de vídeo en streaming: usa hls.js donde hace falta y HLS nativo en Safari, destruye la instancia al desmontar y funde el poster solo cuando el vídeo realmente pinta, evitando flashes negros.
- Logo de vídeo con blend lightenLa marca es un VÍDEO en bucle (tinta luminosa sobre negro) integrado sin canal alfa: mix-blend-mode lighten elimina el fondo negro, con la regla crítica de Safari de poner el blend en la capa fija exterior y nunca dentro del recorte overflow.
- Un vídeo troceado en paneles síncronosTres cards redondeadas con hueco entre ellas muestran UN único vídeo continuo: un vídeo oculto alimenta un canvas por card, y la matemática de cover trata los tres paneles como una sola superficie, cortando el frame en rebanadas exactas cada frame.
- Fondo de vídeo boomerangFondo que reproduce el vídeo una vez capturando cada frame a canvases offscreen y luego lo repite en ping-pong infinito a 30fps, adelante y atrás, sin corte de loop visible.
