DaVinci
Red neuronal interactiva
Nodos que se conectan solos y se apartan del ratón. Dibujado en canvas con una rejilla espacial para no comparar todos con todos.
Fondo del héroe · canvas
Laboratorio
Esto es lo que sabemos hacer.
Cada pieza de aquí abajo está funcionando de verdad: tócalas, pásales el ratón, arrástralas. Son los mismos efectos que montamos en las webs de nuestros clientes. Si tu web puede parecerse a esto, ya sabes a quién preguntar.
Catálogo de efectos, uno a uno
Pásame el ratón
Giro y reflejo siguen tu cursor.
Tarjeta que se inclina en 3D
Perspectiva real más un reflejo que persigue al puntero. El suavizado evita que el giro vaya a tirones.
Tarjetas de servicioBotón magnético
El botón sale a buscar tu cursor. El alcance crece con su tamaño, así que uno grande atrae desde más lejos.
Llamada a la acción principal
La cara de delante
Y el precio, detrás
Tarjeta de dos caras
Gira sobre su eje y enseña lo de detrás. Sin 3D disponible, la cara trasera se muestra debajo: nunca se pierde la información.
Servicios de la portada
Gajo de luz girando
Borde de luz rotatorio
Un degradado cónico que da vueltas por el borde. Se anima una variable de ángulo, así que va en el compositor y no cuesta nada.
Plan destacado
Pulsa dentro
Rejilla con onda
Al pulsar, la luz se propaga en anillos desde la celda tocada. Tiene tope de celdas para no ahogar al móvil.
Fondo de la llamada finalCada palabra sale del desenfoque
Titular palabra a palabra
Salen de un desenfoque y un giro en 3D, escalonadas. El texto original se conserva íntegro para los lectores de pantalla.
Titulares de sección
34 NEGOCIOS ANALIZADOS
Cifra que se descifra
El dato aparece codificado y se resuelve de izquierda a derecha. Da sensación de información llegando en vivo.
Registro de la consolaHueco y lleno
Contorno que se rellena
El titular empieza solo dibujado y se pinta al entrar en pantalla.
Citas destacadasBarrido de color en la fila
Una placa recorre la fila recortada por una máscara. El recorte deja aire abajo para no cortar las colas de las letras.
Listas de serviciosCapta
Produce
Publica
Agenda
Rodillo de palabras en 3D
Cuatro caras montadas como un cilindro que gira. Con movimiento reducido se convierte en una lista normal.
Pasos del proceso
Desenfoque en degradado
Desenfoque progresivo
Seis capas apiladas, cada una con el doble de desenfoque y su propia máscara. Es la única forma de conseguir un degradado de desenfoque real.
Borde inferior del héroe
Comparador con tirador
Arrastra, o usa las flechas del teclado. Es un control deslizante de verdad, con su rol y sus valores, no dos imágenes con un truco encima.
Antes y después de una webArrastra →
Cada tarjeta se ancla sola.
Sin JavaScript
Solo CSS, con inercia nativa.
Y con teclado
Accesible de serie.
En móvil, igual
Es el gesto que la gente ya conoce.
Carrusel que se ancla solo
Cero JavaScript: el navegador aporta la inercia, el teclado y el anclaje. Menos código y más accesible que cualquier librería de carruseles.
Casos en móvilLienzo infinito con inercia
Las piezas se recolocan por módulo, así que con nueve se recorre un espacio sin fin. Al soltar conserva la velocidad.
Galerías y portfolios
Y en la portada
Estos hay que verlos en su sitio
Necesitan el recorrido completo del scroll, así que no caben en una tarjeta.
Secuencia atada al scroll
Sesenta fotogramas dibujados por código que avanzan conforme bajas. La cadena de trabajo contada como una película que tú controlas.
Escena que se queda fija
La sección se ancla mientras el contenido de dentro avanza. El recurso base de cualquier narrativa por scroll.
Tarjetas que se apilan
Se van amontonando conforme bajas, dejando ver el borde de todas. Sin una línea de JavaScript.
Cortinilla de entrada
El telón sube dejando ver la portada. Solo la primera visita de la sesión: en cada recarga sería un peaje.
Cursor con etiqueta
Un punto y un anillo que lo persigue, con una etiqueta que cambia según lo que tienes debajo. Solo con ratón.
Sobre copiar esto
Aquí no hay botón de «copiar código» ni se enseña el código, y la página no se indexa. Dicho esto, seamos claros: todo lo que llega a un navegador se puede copiar — el código fuente siempre está a la vista, y quien diga lo contrario te está engañando. Lo que no se copia es el criterio para saber cuál de estos efectos toca en cada sitio, cuál sobra y cuál está estorbando a la venta. Eso es lo que cobramos.
¿Tu web se parece a esto?
Si no, hablemos. Te decimos qué le falta, gratis y por escrito.
Pedir mi diagnóstico