Qué hace
- Seis hoyos con curvas reales, incluidos rebote y anticipación
- Arrastra las manijas con el dedo, el mouse o las flechas
- Los tiros fallados muestran los puntos objetivo: cada golpe enseña
- Tarjeta para compartir con birdies y bogeys
Preguntas frecuentes
¿Qué es una curva cubic-bezier?
Relaciona el tiempo de la animación con el progreso usando dos puntos de control. En CSS se escribe cubic-bezier(x1, y1, x2, y2); valores sobre 1 o bajo 0 en el eje y crean rebote y anticipación.
¿Cómo mejorar leyendo curvas?
Un inicio empinado es movimiento rápido al principio (ease out) y uno plano es un arranque lento (ease in). Practica en el playground de curvas y vuelve por un mejor puntaje.
Más herramientas gratuitas
- Generador de paletas - Elige un tono y una armonía y obtén una paleta accesible completa con verificación de contraste AA/AAA en vivo.
- Verificador de contraste - Pega dos colores, mira el ratio WCAG y corrige una combinación que falla con un clic.
- Imagen → Paleta - Sube una imagen, extrae sus colores dominantes y descubre qué combinaciones se pueden usar juntas.
- Simulador de daltonismo - Mira una paleta con protanopia, deuteranopia, tritanopia y acromatopsia, y detecta los colores que se confunden.
- Generador de escala tipográfica - Elige un tamaño base y una proporción y obtén una escala tipográfica completa con vista previa, clamp() fluido y tokens.
- Generador de degradados - Degradados lineales, radiales, cónicos o de malla: arrastra los puntos, mezcla colores y copia el CSS.
- Explorador de estados de componentes - Botones, campos y tarjetas en todos sus estados (hover, foco, presionado, deshabilitado, error) con verificación de contraste.
- Convertidor de design tokens - Pega tokens W3C, Tokens Studio o Variables de Figma y obtén CSS, SCSS, Tailwind v4 o SwiftUI, con alias incluidos.
- Laboratorio de movimiento - Arrastra curvas cubic-bezier, ajusta un resorte real, míralos competir y exporta tokens de movimiento.
- Recorte automático - Suelta tus PNG y recupéralos sin los bordes transparentes vacíos, en lote, en tu navegador y en un solo ZIP.
- Prueba de expansión de texto - Mira cómo se rompe una interfaz en alemán, español o pseudotraducción, y qué CSS la hace resistir la traducción.
- Mini auditoría de accesibilidad - Pega HTML y encuentra textos alternativos y etiquetas que faltan, botones sin nombre, saltos de títulos, objetivos táctiles pequeños y bajo contraste.
- Vista previa multiformato - Un mensaje en tamaños de redes sociales y anuncios display, con zonas seguras y punto focal arrastrable. Exporta cada PNG.
- Vista previa móvil - Abre cualquier sitio web dentro de marcos de iPhone, Pixel, Galaxy y iPad a su tamaño real. Gíralo o compara cuatro dispositivos a la vez.
- Caza de color - Iguala cinco colores a ojo con tono, saturación y luminosidad. Puntaje por distancia perceptual y un reto diario para compartir.
- Pasa o falla - Veinte rondas rápidas: ¿este texto pasa el contraste WCAG AA? Confía en tu ojo y luego mira las proporciones reales.
- Ojo óptico - Corrige siete detalles de layout a ojo: centra un ícono de play, iguala padding y ajusta un círculo frente a un cuadrado. Algunas respuestas son ópticas, no matemáticas.
- Pánico de estados - Los componentes caen con algo pasándoles. Elige hover, focus, presionado, cargando, error o deshabilitado antes de que toquen el piso.
- Supervivencia de contraste - El fondo no deja de cambiar. Ajusta la luminosidad del texto para que pase WCAG AA, luego AAA, el mayor tiempo posible.
- Carrera de tokens - Reemplaza valores fijos con los design tokens correctos, rápido. Mismo valor no es el mismo token. Luego cambia el tema y mira qué se rompe.
- Ajusta el kerning - Espacia seis palabras a ojo. Cada una tiene un par de letras muy junto o muy separado; la respuesta es el kerning del diseñador de la fuente.
- Orden del Tab - Toca los botones, enlaces y campos de una pantalla en el orden en que debería recorrerlos la tecla Tab. Cinco pantallas, una regla de WCAG.