Aula privada
Conecta CSS con eventos MindAR para crear estados visuales, panel glass, transiciones y scanner nativo personalizado.
Nivel intermedio
El intermedio parte del básico, pero ahora CSS responde a eventos reales de MindAR. Cuando aparece el target, JavaScript agrega target-found al body; CSS usa esa clase para ocultar el scanner nativo y mostrar un panel con transición.
El básico enseña el mínimo: cámara, scanner nativo y estilos simples.
Descargar template básicoHTML intermedio
El HTML nuevo es pequeño. No agregamos botones comerciales. Solo agregamos un panel didáctico para ver cómo CSS puede reaccionar cuando MindAR detecta el target.
<section class="css-state-panel">
<h2>Target detectado</h2>
<p>Este panel aparece con body.target-found.</p>
</section>css-state-panel es la clase que CSS usará para ocultar, posicionar y animar el panel.body.JavaScript + CSS
JavaScript solo cambia clases. CSS hace el trabajo visual. Esa separación es importante: JavaScript decide el estado; CSS decide cómo se ve ese estado.
target.addEventListener("targetFound", () => {
document.body.classList.add("target-found");
document.body.classList.remove("target-lost");
statusMessage.textContent = "Target detectado.";
});
target.addEventListener("targetLost", () => {
document.body.classList.remove("target-found");
document.body.classList.add("target-lost");
statusMessage.textContent = "Vuelve a enfocar la imagen.";
});body. Esa clase permite escribir CSS como body.target-found .css-state-panel.CSS de estados
.css-state-panel {
position: fixed;
left: max(16px, env(safe-area-inset-left));
right: max(16px, env(safe-area-inset-right));
bottom: calc(72px + env(safe-area-inset-bottom));
z-index: 44;
opacity: 0;
transform: translateY(120%);
transition: transform .34s ease, opacity .34s ease;
}
body.target-found .css-state-panel {
opacity: 1;
transform: translateY(0);
}position: fixed: mantiene el panel pegado a la pantalla, no al documento.env(safe-area-inset-bottom): evita que el panel choque con la barra inferior del móvil.opacity: 0 y translateY(120%): dejan el panel oculto abajo.transition: anima solo propiedades eficientes para WebAR.body.target-found: cambia el estado visual cuando JavaScript agrega esa clase.Glass UI
El glass UI se ve bien sobre cámara, pero debe tener contraste. En WebAR el fondo cambia todo el tiempo, así que no basta con poner transparencia.
.css-state-panel {
color: white;
background: rgba(15, 23, 42, .72);
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 24px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
}rgba(): crea un color semitransparente.backdrop-filter: desenfoca lo que está detrás del panel.border: separa el panel de la cámara.box-shadow: mejora la lectura sobre fondos claros.Scanner nativo
.mindar-ui-scanning .scanning .inner .scanline {
height: 4px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, transparent, #38bdf8, white, #38bdf8, transparent) !important;
box-shadow: 0 0 24px rgba(56, 189, 248, .9) !important;
}linear-gradient crea una línea con brillo central.box-shadow refuerza la sensación de luz sin crear otro elemento HTML.!important se usa para sobrescribir estilos internos de MindAR.Responsive
.css-state-panel {
left: max(16px, env(safe-area-inset-left));
right: max(16px, env(safe-area-inset-right));
bottom: calc(72px + env(safe-area-inset-bottom));
max-width: 560px;
margin: auto;
}Este bloque evita que el panel se pegue a los bordes, respeta notch/barra inferior y mantiene un ancho razonable en escritorio.
Template
Este ZIP incluye el proyecto intermedio: scanner MindAR personalizado, estados targetFound/targetLost, panel glass, safe area y target de práctica.
Diferencia frente al básico: aquí CSS ya responde a estados reales de MindAR.
Descargar template intermedioPrueba de cámara
Cuando MindAR reconozca el target, verás un panel sobre la imagen.