Respaldo energético
UPS, inversores, generadores y bancos de baterías dimensionados con estudio de carga real.
CAPÍTULO 05 · MOTION
El capítuloque el PDFno puede tener
El movimiento es parte de la marca desde la versión 4 del sitio. Explica cómo encajan las piezas, da llegada a la primera visita y hace respirar las fotos. Aquí cada regla corre en vivo, con los mismos tiempos y curvas del sitio.
Seis principios
Todo movimiento de la marca cumple estas seis reglas. Una animación que rompe una de ellas se quita, aunque se vea bien.
Explica, no decoraCada animación muestra estructura: cómo llega, cómo encaja, qué es dato.
Solo transform y opacityNada de animar layout. Propiedades individuales translate, scale, rotate para no pisar los hovers.
Un protagonista por vistaSi el hero se mueve, lo que lo rodea entra y se queda quieto.
Contenido primeroEl HTML está completo antes de animar. Si el JS falla, todo se ve.
Pausa fuera de pantallaVideo, portal, ken burns y carruseles se detienen fuera del viewport.
Reducir movimiento mandaCon prefers-reduced-motion no hay intro, ni loops, ni parallax.
Intro de llegada «INGELMEC loading»
La primera visita de cada sesión abre con el portal hexagonal, el isotipo que se dibuja y las letras que atraviesan el portal. Dura 2.48 s y se omite con un clic o cualquier tecla. Aquí puede reproducirla las veces que quiera.
R 5.2.1 · NUEVO EN 2.0
Reglas de la intro
- Solo en la primera visita por sesión (
sessionStorage). - Duración máxima 2.5 s; medida: 2.48 s hasta
ix:intro-done. - Omitible con clic o tecla (≈ 0.5 s de salida).
- Capa
aria-hiddensobre HTML ya renderizado; red de seguridad a los 4.5 s. - El carrusel del hero no corre su reloj hasta que la intro termina.
Clic o tecla para omitirla
Movimiento reducido activo: la intro no se reproduce, igual que en el sitio.
Isotipo · trazo
Hexágono · relleno
Nodo ámbar
INGELMEC · letras
Filetes
Meta y contador
Barra 000 → 100
Salida · paneles
0 s0.51.01.52.02.5 s
La línea roja recorre la línea de tiempo mientras la intro se reproduce.
R 5.2.2 · NUEVO EN 2.0
El portal por sí solo
Fuera de la intro, el portal gira a velocidad de crucero (35 % de la intro). Es el mismo código de la intro: canvas 2D, 14 anillos, sin dependencias.
INGELMECCANVAS 2D · 60 FPS · 0 DEPENDENCIAS
Loop del hero
Fondo del primer slide del sitio: una placa sin texto renderizada con HyperFrames. Papel, retícula y hexágonos con fotos duotono, con una cámara que deriva y regresa exacta al punto de partida.
R 5.3.1 · NUEVO EN 2.0
Un video detrás de un titular no lleva tipografía
- Archivo
- hero-loop.mp4 · 4.08 MB
- Duración
- 12 s, empalme sin corte (PSNR 40.7 dB)
- Codificación
- H.264, CRF 23, GOP 60, faststart
- Carga
- preload none, muted, loop, playsinline
- Integración
- velo de papel a la izquierda, máscara arriba y abajo, filete azul y marcas de corte
El loop de v3 traía su propio titular y chocaba con la h1. Regla: el video es atmósfera; el texto vive en HTML.
Se reproduce solo cuando está en pantalla
Vista explosionada
Port del bloque exploded-stack: las capas llegan separadas en isométrico y se asientan. En el sitio cuenta cómo encajan equipos, etapas y contratos. Aquí, la promesa «No vendemos cajas».
R 5.4.1 · NUEVO EN 2.0
Cuándo explotar
- Para mostrar que algo está hecho de partes: etapas de servicio, contratos, equipos de una solución.
- Entrada de 1.1 s con
cubic-bezier(.16,1,.3,1), capas desfasadas 60 ms. - Al terminar, la pila queda plana y legible; nunca se queda explotada como estado final.
04MantenimientoCONTRATOS · NOC 24×7×365
03InstalaciónOBRA · PUESTA EN MARCHA
02Diseño de ingenieríaCÁLCULO · PLANOS · SELECCIÓN
01DiagnósticoLEVANTAMIENTO · ESTUDIO DE CARGA
Carrusel cuboide
Port de cuboid-carousel: las tarjetas giran como caras de un cubo. En el sitio entra el slide de soluciones; aquí puede girarlo usted.
R 5.5.1 · NUEVO EN 2.0
Giro con profundidad, sin mareo
- Giro de 90° por cara en 1 s con
cubic-bezier(.2,.9,.25,1). - Automático cada 3.2 s solo si está en pantalla; botón de pausa siempre visible.
- Las caras ocultas salen del árbol de accesibilidad.
Climatización comercial
Sistemas VRF, unidades paquete y chillers para torres, restaurantes, call centers y plantas.
Centro de datos
Energía, enfriamiento de precisión, racks y distribución, con supervisión de punta a punta.
Sistemas contra incendios
Detección temprana y supresión con agentes limpios Fike para salas de datos y archivos.
Curvas y tiempos
Cuatro curvas cubren todo el sistema. Reproduzca el laboratorio para comparar cómo llega cada una con su duración real.
R 5.6.1 · NUEVO EN 2.0
Laboratorio de curvas
La curva de reveal frena largo: el contenido «se asienta». La de paneles acelera y frena simétrica: es una cortina. La lineal solo se usa en giros continuos (hexágonos, marquee), nunca en desplazamientos.
R 5.6.2 · NUEVO EN 2.0
Reveal con escalonado
Al entrar en pantalla, los bloques suben 28 px y aparecen. Cada uno espera 75 ms más que el anterior, con tope de 7 (525 ms).
Diagnóstico+0 ms
Diseño+75 ms
Instalación+150 ms
Mantenimiento+225 ms
| Elemento | Duración | Curva / detalle |
|---|---|---|
| Hover de tarjetas y botones | .2–.25 s | --ease-out · elevación de 4 px y borde azul |
| Reveal de bloques | .8 s opacidad · 1 s desplazamiento | --ease-reveal · 28 px · stagger 75 ms, tope 7 |
| Intro de llegada | 2.48 s total | 1.76 s de contenido + .72 s de paneles |
| Entrada del titular por láminas | ≈ 1.8 s la secuencia | code-slice-hero · giro en X con barrido de profundidad |
| Cuboide | .9 s por tarjeta | retardo de .09 s entre tarjetas |
| Vista explosionada | 1.1 s | capas desfasadas .06 s |
| Carrusel showcase | 7 s por slide · 11 s el primero | no corre durante la intro |
| Ken burns | 11 s (A) · 9.5 s (B) | ease-in-out alternate |
| Hexágono decorativo | 120 s / 90 s por vuelta | lineal |
| Marquee de marcas | 26 s | acelera con la velocidad de scroll y vuelve suave |
| Parallax de heroes | continuo | sello −0.13 contra foto +0.04, tope ±52 px |
Movimiento reducido
Si el sistema operativo del visitante pide reducir el movimiento, el sitio y este manual lo obedecen sin excepciones. La clase motion-ok solo existe cuando el movimiento está permitido y el JavaScript arrancó.
| Pieza | Con movimiento | Con movimiento reducido |
|---|---|---|
| Intro de llegada | 2.48 s en la primera visita | No existe |
| Loop del hero | Reproduce en pantalla | Póster fijo |
| Reveals | Suben y aparecen | Todo visible desde el inicio |
| Ken burns y parallax | Activos en viewport | Fotos quietas |
| Carruseles | Avance automático | Solo manual |
| Portal, cuboide, explosión | Animados | Fotograma final; sliders y botones siguen funcionando |