Instrumentalia - Flamingo Agency

Instrumentalia

Cómo empezó todo

¿Qué es Instrumentalia?

Instrumentalia es una empresa dedicada al equipamiento para laboratorios, trabajando con industrias, investigación y control de calidad. Un proyecto técnico, serio y muy específico, donde la claridad y la precisión no son opcionales.

Con Instrumentalia tenemos historia. Hace más de diez años hicimos la primera versión de su web. Después, por esas cosas de la vida (y un pésimo seguimiento de nuestra parte) perdimos el contacto durante un buen tiempo.

El problema

¿Por qué nos contrataron?

Años después, Vanesa, quien lideraba y sigue liderado el proyecto, volvió a contactarnos para darle una nueva vida a la web. Y tenía sentido: después de más de una década, la web ya no respondía a lo que el negocio necesitaba.

La estructura estaba desactualizada, la experiencia era lenta y encontrar productos complejos no era sencillo. La web cumplía, pero se notaba el paso del tiempo. Necesitaba una actualización profunda sin perder la esencia de Instrumentalia.

Cómo lo resolvimos

¿Cómo ayudamos a Vanesa?

Después de ponernos al día en una agradable videollamada, comenzamos a trabajar en una nueva propuesta: una versión más moderna, ágil y profesional, adaptada a los tiempos actuales. Rediseñamos la estética, reorganizamos la forma en que se presentan los productos y mejoramos notablemente la velocidad del sitio.

Todo el trabajo se hizo cuidando la identidad de Instrumentalia y su carácter técnico. El resultado fue una web capaz de gestionar cotizaciones de productos complejos de manera simple, manteniendo un nivel visual serio, claro y profesional. Exactamente lo que el proyecto necesitaba para seguir creciendo.

Diseño responsive

") O en un plugin tipo "Insert Headers and Footers" ============================================ */document.addEventListener('DOMContentLoaded', function () {/* 1. Crear los elementos del cursor una sola vez */ var glow = document.createElement('div'); glow.id = 'custom-cursor-glow'; document.body.appendChild(glow);var cursor = document.createElement('div'); cursor.id = 'custom-cursor'; cursor.innerHTML = ''; document.body.appendChild(cursor);var cursorIcon = cursor.querySelector('i'); var cursorText = cursor.querySelector('span');/* 2. Config por variante: tamaño del circulo y tamaño de fuente al activarse */ var VARIANT_SIZE = { 'cursor-solid': 72, 'cursor-gradient': 72, 'cursor-glass': 66, 'cursor-outline': 66, 'cursor-square': 80, 'cursor-blur': 74, 'cursor-glow': 60, 'cursor-icon': 76 }; var VARIANT_FONT = { 'cursor-solid': 11, 'cursor-gradient': 11, 'cursor-glass': 11, 'cursor-outline': 10, 'cursor-square': 11, 'cursor-blur': 10, 'cursor-glow': 11, 'cursor-icon': 9 }; var ALL_VARIANTS = Object.keys(VARIANT_SIZE);/* 3. Movimiento con retardo (lerp) */ var mouseX = 0, mouseY = 0; var curX = 0, curY = 0; var ease = 0.16; var currentSize = 0; var targetSize = 0; var glowExtra = 30;document.addEventListener('mousemove', function (e) { mouseX = e.clientX; mouseY = e.clientY; });function loop() { curX += (mouseX - curX) * ease; curY += (mouseY - curY) * ease; currentSize += (targetSize - currentSize) * ease;cursor.style.opacity = currentSize > 0.5 ? '1' : '0'; cursor.style.width = currentSize + 'px'; cursor.style.height = currentSize + 'px'; cursor.style.transform = 'translate(' + (curX - currentSize / 2) + 'px,' + (curY - currentSize / 2) + 'px)'; var glowSize = currentSize > 0 ? currentSize + glowExtra : 0; glow.style.width = glowSize + 'px'; glow.style.height = glowSize + 'px'; glow.style.transform = 'translate(' + (curX - glowSize / 2) + 'px,' + (curY - glowSize / 2) + 'px)';requestAnimationFrame(loop); } loop();/* 4. Detectar hover sobre cualquier elemento con alguna clase cursor-* */ var selector = ALL_VARIANTS.map(function (v) { return '.' + v; }).join(', ');document.addEventListener('mouseover', function (e) { var target = e.target.closest(selector); if (!target) return;var variant = ALL_VARIANTS.find(function (v) { return target.classList.contains(v); }); if (!variant) return;/* limpia variantes anteriores y aplica la actual */ ALL_VARIANTS.forEach(function (v) { cursor.classList.remove(v); }); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); cursor.classList.add(variant); document.body.classList.add(variant, '__active'); target.classList.add('__active');targetSize = VARIANT_SIZE[variant] || 70;var text = target.getAttribute('data-cursor-text') || ''; var iconClass = target.getAttribute('data-cursor-icon') || ''; cursorText.textContent = text; cursorText.style.fontSize = text ? (VARIANT_FONT[variant] || 11) + 'px' : '0px'; cursorIcon.className = iconClass; cursorIcon.style.fontSize = iconClass ? (variant === 'cursor-icon' ? 16 : 14) + 'px' : '0px'; });document.addEventListener('mouseout', function (e) { var target = e.target.closest(selector); if (!target) return; var related = e.relatedTarget; if (related && target.contains(related)) return;target.classList.remove('__active'); document.body.classList.remove('__active'); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); targetSize = 0; cursorText.style.fontSize = '0px'; cursorIcon.style.fontSize = '0px'; });});