01MOVIMIENTO
Botón magnético.
Se deja atraer por el cursor y vuelve a su sitio. Invita a hacer clic sin decir nada.
GALERÍA · 22 COMPONENTES
Piezas que hacen que una web se sienta viva.
Cada tarjeta es un componente real, no una imagen: pásale el cursor, arrástralo, rellénalo. Así se nota una web hecha con cuidado.
Ver los componentes
AISOFTWAREAGENTS
LA GALERÍA
Veintidós piezas, todas funcionando.
02MOVIMIENTO
Relleno que sigue al cursor.
El color entra por el lado por el que llegas y sale por donde te vas.
03MOVIMIENTO
Tarjeta 3D con foco de luz.
Se inclina hacia el cursor y una luz suave la recorre. Perfecta para destacar un plan o un producto.
DESTACADO
Plan a medida.
Mueve el cursor sobre la tarjeta.
04TEXTO
Texto que se revela con el scroll.
Cada palabra se enciende a medida que bajas. El lector avanza al ritmo de la historia.
Una web no se lee de golpe. Se descubre a medida que bajas, y cada frase llega justo cuando hace falta: ni antes, ni después.
05TEXTO
Letras escalonadas.
El titular entra letra a letra. Un primer impacto que se recuerda.
Hecho a medida.
06TEXTO
Palabra rotativa.
Una frase, varios mensajes. La palabra cambia tras una máscara limpia.
Webs que se sienten rápidas, claras, vivas y tuyas.
07TEXTO
Contadores.
Las cifras suben al aparecer. Datos de esta misma página.
- componentes en esta página
- 22
- fotogramas por segundo
- 60
- de objetivo táctil mínimo
- 44 px
08MOVIMIENTO
Cinta infinita de logos.
Clientes, socios o prensa en movimiento continuo, con los bordes desvanecidos. Se para al pasar el cursor.
- NORTE
- ámbarstudio
- Vértice
- OLAS&CO
- brisa.
- TALLER 9
- Cítrica
Nombres ficticios.
09NAVEGACIÓN
Acordeón animado.
Preguntas frecuentes que se abren con suavidad, sin saltos.
¿Funcionan en el móvil?
Sí. Cada componente se adapta al tacto: lo que en escritorio sigue al cursor, en el móvil responde al dedo o se queda quieto.
¿Y si alguien prefiere menos movimiento?
Se respeta. Si el sistema pide reducir el movimiento, las animaciones se apagan y el contenido se ve entero y quieto.
¿Se pueden usar con teclado?
Sí. Son botones y controles reales, con foco visible y etiquetas para lectores de pantalla.
10NAVEGACIÓN
Pestañas con indicador.
El indicador se desliza hasta la pestaña elegida. También con las flechas del teclado.
Primero, la idea.
Estructura, textos y prototipo navegable antes de escribir una línea de código.
Después, el motor.
Código limpio, rápido y accesible, probado en móvil y escritorio.
Y, al final, a producción.
Publicación, medición y ajustes con datos reales de uso.
11FORMULARIOS
Interruptor mensual y anual.
Los precios cambian con una animación que deja ver el ahorro.
Mensual
Anual −20 %
ESENCIAL
39 € / mes
Facturado cada mes
EQUIPO
89 € / mes
Facturado cada mes
Precios de ejemplo.
12MOVIMIENTO
Comparador antes y después.
Arrastra el tirador para enseñar una mejora: un retoque, un rediseño, una reforma.
AntesDespués
13NAVEGACIÓN
Carrusel con arrastre e inercia.
Se arrastra con el ratón o el dedo y sigue deslizándose con la fuerza del gesto, como una app.
Pieza 01
Pieza 02
Pieza 03
Pieza 04
Pieza 05
Pieza 06
Pieza 07
14FORMULARIOS
Campos con etiqueta flotante.
La etiqueta sube al escribir, el campo avisa si algo falla y el envío tiene su estado de carga.
15FORMULARIOS
Fecha y franja horaria.
Reservas en dos toques: el día y luego la hora libre. Sin desplegables eternos.
—
Elige un día para ver las horas libres.
16FEEDBACK
Notificaciones apiladas.
Avisos que entran, se apilan y se van solos. Sin tapar lo importante.
17FEEDBACK
Modal con escala.
Se abre creciendo desde el centro y el fondo se difumina. Se cierra con Esc o tocando fuera.
18MOVIMIENTO
Cursor personalizado.
Solo dentro de esta tarjeta: un punto y un anillo que crece sobre lo que se puede tocar.
Mueve el ratón aquí
19MOVIMIENTO
Imagen con revelado.
La foto se descubre de abajo arriba con un recorte animado al entrar en pantalla.
20NAVEGACIÓN
Progreso de lectura.
La barra fina de arriba marca lo que llevas leído, y un botón te devuelve al principio.
0% leído
Volver arriba21FEEDBACK
Esqueleto de carga.
Mientras llegan los datos, la forma del contenido ya está ahí. La espera se hace corta.
Informe semanal.
12 tareas cerradas y 3 nuevas esta semana.
Al día22NAVEGACIÓN
Interruptor de tema.
El de esta página: claro u oscuro, con transición suave y recordado para la próxima visita.
Modo oscuro
GAINKODE
¿Lo quieres en tu web?
Te ayudamos a elegir las piezas que encajan con tu marca y las montamos en tu web.
Hablemos