Cómo personalizar la velocidad de las animaciones en Brave.

Introducción

Brave es un navegador basado en Chromium que ofrece gran rapidez y privacidad. En ocasiones, querrás ajustar la velocidad de las animaciones de páginas web para mejorar la legibilidad, acelerar pruebas de desarrollo o simplemente para adaptar la experiencia a tus preferencias. A continuación encontrarás varias opciones detalladas, desde soluciones temporales en las herramientas de desarrollo hasta métodos más permanentes mediante extensiones de estilo.

Opciones para personalizar la velocidad de las animaciones

• Herramientas de desarrollador (DevTools): Ideal para pruebas puntuales y depuración.
• Uso de CSS personalizado con extensiones: Para aplicar cambios permanentes a todos los sitios o a dominios específicos.
• Flags de Chromium: Para reducir el movimiento en todo el navegador.

1. Ajustar la velocidad en DevTools

Brave, al ser compatible con las herramientas de Chrome, permite modificar la velocidad de las animaciones en tiempo real.

Paso 1: Abrir DevTools

• Presiona Ctrl Shift I (Windows/Linux) o Cmd Option I (macOS).
• También puedes hacer clic derecho en la página y seleccionar Inspeccionar.

Paso 2: Activar el panel de Animaciones

• En la parte superior de DevTools, haz clic en el icono de “»” para ver más herramientas.
• Selecciona Animations (Animaciones).

Paso 3: Controlar la velocidad

• En el panel de Animations, encontrarás un control deslizante o menú desplegable con opciones como 0.25x, 0.5x, 1x, 2x, 5x.
• Selecciona la velocidad deseada. Por ejemplo, 2x para duplicar la duración o 0.5x para acelerar al doble.

2. Forzar velocidad con CSS personalizado

Si deseas que todas las páginas cargadas en Brave apliquen una velocidad de animación específica, puedes recurrir a una extensión como Stylus o Stylebot.

Paso 1: Instalar Stylus

• Abre Chrome Web Store en Brave.
• Busca “Stylus” y haz clic en Añadir a Brave.

Paso 2: Crear un nuevo estilo global

• Haz clic en el icono de Stylus junto a la barra de direcciones.
• Selecciona Manage (Administrar) y luego Write new style (Escribir nuevo estilo).
• Pon un nombre descriptivo, por ejemplo: Animaciones Lentas.

Paso 3: Agregar reglas CSS

Para ralentizar animaciones y transiciones a la mitad de su velocidad:

 {
  animation-duration: calc(var(--animation-duration, 1s)  2) !important
  transition-duration: calc(var(--transition-duration, 0.3s)  2) !important
}

O bien, para duplicar la velocidad:

 {
  animation-duration: calc(var(--animation-duration, 1s) / 2) !important
  transition-duration: calc(var(--transition-duration, 0.3s) / 2) !important
}

Paso 4: Guardar y activar

• Haz clic en Save (Guardar).
• Activa el estilo global para que se aplique en todas las páginas.

3. Reducir animaciones desde Flags de Chromium

Chromium incluye una opción para preferir movimientos reducidos, que algunos navegadores respetan automáticamente.

Instrucciones

• Escribe en la barra de direcciones: brave://flags/#reduce-motion.
• Localiza la entrada Reduce Motion o similar.
• En el desplegable, selecciona Enabled (Habilitado).
• Reinicia Brave para aplicar los cambios.

Nota

Este ajuste depende de que los sitios web respeten la preferencia prefers-reduced-motion de CSS. Si no la implementan, no surtirá efecto.

Comparativa de métodos

Conclusión

Personalizar la velocidad de las animaciones en Brave puede mejorar la productividad y la accesibilidad. Elige la opción que mejor se adapte a tus necesidades: DevTools para pruebas rápidas, extensiones CSS para una solución a largo plazo o flags de Chromium para un enfoque nativo. ¡Experimenta y disfruta de un navegador más a tu medida!

Invitación de 10 dólares u 8 euros en Coinbase.