Desbloqueando Visuales Dinámicos: Animando Propiedades CSS Personalizadas con Worklets de Houdini

            
:root {
  --progress: 0;
}

@keyframes animate-progress {
  to {
    --progress: 100;
  }
}

.progress-bar {
  width: var(--progress)%; /* Esto no se anima de forma fluida solo con CSS */
}

            

              
                Copy
              
            
          

            
// progress-animation.js

// Define una clase que extiende AnimationWorklet
class ProgressAnimation {
  constructor(delay, end, easing) {
    this.delay = delay;
    this.end = end;
    this.easing = easing;
  }

  // El método animate es llamado por el navegador en cada fotograma
  animate(currentTime, playState) {
    // playState puede ser 'running', 'paused', 'finished', etc.
    if (playState !== 'running') {
      return playState;
    }

    // Calcula el progreso basado en el tiempo y el easing
    // Por simplicidad, asumamos un easing lineal por ahora
    // En un escenario real, implementarías funciones de easing más sofisticadas
    let progress = Math.min(currentTime / 1000, 1); // Asumiendo una duración de 1 segundo
    progress = Math.max(0, progress); // Limita el valor entre 0 y 1

    // Aplica el easing (ejemplo: ease-in-out)
    progress = this.easing(progress);

    // Calcula el valor real basado en el valor final
    const currentValue = this.end * progress;

    // Devuelve el valor actual para la propiedad personalizada
    return currentValue;
  }
}

// Registra la animación personalizada
CSS.registerAnimation({
  name: 'animateProgress',
  // Usaremos una función de easing personalizada, por ejemplo:
  // Esta es una versión simplificada de una función ease-in-out
  easingFunction: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
  // Define la duración de la animación. En un escenario real, esto sería dinámico.
  // Para este ejemplo, lo codificaremos por simplicidad, pero podría pasarse como parámetro.
  // Asumamos que el método animate de nuestro worklet de animación está diseñado para ejecutarse durante 1 segundo.
  // El valor `end` se proporcionará cuando se aplique la animación.
  // La duración real es manejada por el método `animate` del Worklet.
  // Este `duration` en `registerAnimation` es más para los @keyframes de CSS.
  // Para la animación directa de propiedades personalizadas con Worklet, el método `animate` controla el tiempo.
  // Sin embargo, para integrarlo con la propiedad `animation` de CSS, se necesita algún concepto de duración.
  // Consideremos que el método `animate` maneja el tiempo, y nos centraremos en eso.
  // Si quisiéramos usar esto con la propiedad `animation` de CSS como `animation: 1s ease-in-out my-animation;`,
  // necesitaríamos exponer la duración y el easing a CSS también.
  // Para la animación directa de propiedades personalizadas de CSS, podríamos usar una API o un enfoque diferente.
  // Refinemos esto para animar directamente el valor de una propiedad personalizada a lo largo del tiempo.
  // `CSS.paintWorklet.addModule` o `CSS.animationWorklet.addModule` se usan para cargar worklets.
  // Para animar propiedades personalizadas, usualmente usamos el método `animate()` en un objeto Animation.

  // Reconsideremos la estructura para alinearla con la animación de propiedades personalizadas.
  // El `AnimationWorklet` se usa para crear instancias `KeyframeEffect` personalizadas.
  // Cuando aplicamos una animación a una propiedad personalizada, esencialmente estamos creando una secuencia de valores.
  // El método `animate` del Worklet es responsable de generar estos valores.

  // Una forma más directa de lograr la animación de propiedades personalizadas usando Houdini es a través de la API de Animación.
  // Podemos definir una clase de animación personalizada que produce valores para una propiedad personalizada.

  // Simplifiquemos por claridad y centrémonos en el concepto central: impulsar los valores de las propiedades personalizadas.
  // Usaremos un easing personalizado simple y una duración implícita manejada por el planificador de animación del navegador cuando se vincula a CSS.
  // El método `animate` en un objeto `CSSAnimation` (que crearíamos a partir de un Worklet) recibiría el tiempo.
  // Por simplicidad, consideremos un enfoque más simple para la demostración que se centre en el método `animate`.

  // Repensando el registro para la animación de propiedades personalizadas. `CSS.registerAnimation` es para @keyframes de CSS.
  // Para animar propiedades personalizadas directamente, a menudo usamos la API de Animación.
  // Sin embargo, los Worklets pueden definir tipos de animación personalizados. La propiedad `animation-timeline` también es relevante.

  // Asumamos un escenario donde queremos impulsar una propiedad personalizada usando la línea de tiempo de animación del navegador.
  // El método `animate` en un Worklet es, de hecho, el lugar para definir cómo cambian los valores con el tiempo.

  // Probemos un enfoque más concreto con la API de Animación impulsando directamente la propiedad personalizada.
  // El enfoque `animation-worklet.js` es típicamente para registrar animaciones personalizadas para la propiedad `animation` de CSS.
  // Para animar propiedades personalizadas, a menudo usamos la API de Animación de JavaScript.

  // La idea inicial podría ser registrar una animación personalizada para ser usada con `animation-name`.
  // Sin embargo, para las propiedades personalizadas, a menudo queremos controlar directamente sus valores.
  // Houdini proporciona la API de Animación para esto:
  // const anim = new Animation(effect, timing); anim.play();
  // El `effect` puede ser un `KeyframeEffect` que apunta a una propiedad personalizada.

  // Centrémonos en el concepto de una línea de tiempo o secuencia de animación personalizada.
  // El `AnimationWorklet` está diseñado para proporcionar definiciones `KeyframeEffect` personalizadas o lógica de animación personalizada.
  // Consideremos que este ejemplo trata sobre crear una secuencia de animación personalizada que se puede aplicar.

  // `CSS.registerAnimation` es, de hecho, para animaciones personalizadas basadas en keyframes que se pueden aplicar mediante `animation-name`.
  // Al usar una propiedad personalizada como `--progress`, querríamos que su valor fuera interpolado.
  // El método `animate` en el Worklet debería devolver el valor para la propiedad.

  // Creemos un Worklet simple que se pueda usar para impulsar una propiedad personalizada.
  // La idea central es la firma de la función `animate`: `animate(currentTime, playState)`.

  // Enfoque correcto para registrar una secuencia de animación personalizada:
  // El método `animate` necesita ser parte de una estructura que la API de Animación entienda.
  // Un patrón común es crear un objeto que la API de Animación pueda consumir.

  // Asumamos que `CSS.animationWorklet.addModule()` se usa para cargar esto.
  // El propio método `animate` es lo que generará los valores interpolados.

  // Para animar propiedades personalizadas, la API `Animation` es clave. Ilustremos cómo podría funcionar un *generador* de animación personalizado.
  // `CSS.registerAnimation` es para animaciones a nivel de CSS.
  // Para la animación de propiedades personalizadas impulsada por JavaScript, la API `Animation` es más directa.

  // Giremos hacia un ejemplo más claro centrado en la API de Animación.
  // Simularemos una lógica de animación personalizada que genera valores para `--progress`.

  // El método `animate` dentro del Worklet está diseñado para ser invocado por el planificador de animación del navegador.
  // Si estamos usando `CSS.registerAnimation`, es para animaciones impulsadas por `@keyframes` de CSS.
  // Cuando se anima una propiedad personalizada, a menudo se desea el control de JS.

  // Consideremos un Worklet que *genera* valores de interpolación.
  // La firma de la función `animate` proporcionada por la API AnimationWorklet es:
  // `animate(element, propertyName, currentTime, playbackRate, animationDefinition)`
  // Esto parece ser más para animar propiedades directamente a través de la API.

  // Re-alineémonos con el objetivo: animar una propiedad CSS personalizada.
  // La forma más directa en que Houdini lo permite es permitiendo que las propiedades personalizadas sean el objetivo de la API de Animación, y los Worklets pueden definir easing o secuencias de animación personalizadas.

  // `CSS.registerAnimation` es de hecho la API correcta si queremos usar una animación con nombre en CSS que impulse propiedades personalizadas.
  // Refinemos el método `animate` para que esté más alineado con la generación de un valor para una propiedad personalizada.

  // `animate(currentTime, playState)` devuelve el valor para un keyframe dado.
  // Este método es parte de una clase `AnimationWorklet`.
  // `CSS.registerAnimation` registra una fábrica para `KeyframeEffect`.

  // Asumamos que la función `animate` dentro del Worklet está diseñada para producir valores para una propiedad.
  // `CSS.registerAnimation` registra una secuencia de animación con nombre.
  // Cuando esta secuencia se aplica a una propiedad personalizada, se usará la lógica del Worklet.

  // Función `animate` simplificada para una animación de propiedad personalizada:
  animate(currentTime, playState) {
    if (playState !== 'running') return playState;

    // Asumiendo una duración de 1000ms para este ejemplo.
    const duration = 1000;
    let progress = currentTime / duration;

    // Limita el progreso entre 0 y 1
    progress = Math.max(0, Math.min(progress, 1));

    // Aplica easing personalizado (ease-in-out)
    const easedProgress = this.easingFunction(progress);

    // Calcula el valor objetivo (por ejemplo, 100 para el progreso)
    const targetValue = this.end;
    const animatedValue = targetValue * easedProgress;

    return animatedValue;
  }
}

// Registra la animación personalizada. Esto registra una secuencia de animación con nombre.
// Los `params` en la propiedad `animation` de CSS se pueden usar para pasar valores como 'end'.
CSS.registerAnimation({
  name: 'animateProgress',
  // Podemos pasar funciones de easing personalizadas aquí que el Worklet usará.
  // Por simplicidad, usemos una predefinida o pasémosla como parámetro.
  // Un patrón común es hacer que la fábrica del Worklet acepte parámetros.
  // `CSS.registerAnimation` toma un `keyframeGenerator` o una `definition`.
  // Por simplicidad, asumamos que la clase del Worklet maneja la lógica.
  // La API `CSS.registerAnimation` es más para la integración con `@keyframes` de CSS.

  // El rol principal del `AnimationWorklet` es definir la lógica de animación personalizada que el navegador puede ejecutar.
  // El método `animate` es clave. Es llamado por el navegador.
  // Asumamos que estamos usando la API de Animación directamente con un efecto personalizado.

  // Re-evaluando el uso de `CSS.registerAnimation`:
  // Registra una animación que se puede usar con `animation-name`.
  // Para animar una propiedad personalizada, aún necesitaríamos vincularla.
  // Ejemplo: `animation: 1s cubic-bezier(0.42, 0, 0.58, 1) animateProgress;`
  // `animateProgress` necesita saber cómo mapear esto a la propiedad `--progress`.

  // Un enfoque más directo de Houdini para la animación de propiedades personalizadas a menudo implica la API de Animación y potencialmente efectos personalizados.
  // Sin embargo, el `AnimationWorklet` está de hecho diseñado para proporcionar secuencias de animación personalizadas.
  // Asumamos que el método `animate` es parte de una definición `KeyframeEffect` personalizada.

  // La función `animate` en `AnimationWorklet` está diseñada para producir valores para una propiedad dada.
  // Al usar `CSS.registerAnimation`, el `name` se expone a CSS.
  // La `definition` puede describir cómo crear la secuencia de animación.

  // Proporcionemos un ejemplo concreto del método `animate` como la lógica central.
  // `CSS.registerAnimation` está destinado a registrar *secuencias* de animación personalizadas que se pueden aplicar a través de `animation-name` de CSS.

  // Usemos conceptualmente un enfoque más directo:
  // El `AnimationWorklet` define una función `resolve` o un método `animate`.
  // El método `animate` toma `currentTime` y `playState` y debe devolver el valor.

  // Registro simplificado centrado en el rol del método `animate`:
  // El método `animate` dentro del Worklet es llamado por el navegador.
  // Asumamos que el Worklet se carga a través de `CSS.animationWorklet.addModule()`.
  // Luego, en JS, podemos crear una instancia de Animation.

  // Ejemplo de un Worklet que define una función `animate` personalizada:
  class CustomProgressAnimation {
    constructor(targetValue, duration = 1000, easing = t => t) {
      this.targetValue = targetValue;
      this.duration = duration;
      this.easing = easing;
    }

    animate(currentTime, playState) {
      if (playState !== 'running') {
        return playState; // Devuelve el estado actual si no se está ejecutando
      }

      let progress = currentTime / this.duration;
      progress = Math.max(0, Math.min(progress, 1)); // Limita el progreso
      const easedProgress = this.easing(progress);
      return this.targetValue * easedProgress;
    }
  }

  // Registrando esto como una secuencia de animación personalizada:
  CSS.registerAnimation({
    name: 'customProgress',
    // La definición puede ser un `KeyframeEffect` o un objeto de animación personalizado.
    // Asumamos que el Worklet define la lógica central de `animate`.
    // `CSS.registerAnimation` es para registrar secuencias de animación personalizadas que CSS puede usar.
    // El método `animate` devuelve el valor para una propiedad.
    // Necesitamos vincular esto a una propiedad personalizada específica.

    // El método `animate` de un Worklet es llamado por el navegador para los fotogramas de animación.
    // Asumamos que queremos crear una animación que impulse `--progress`.

    // `CSS.registerAnimation` registra una animación con nombre que se puede usar en `animation-name` de CSS.
    // Cuando se usa con una propiedad personalizada, el navegador necesita saber cómo aplicarla.

    // Centrémonos en la `API de Animación` para la animación directa de propiedades personalizadas.
    // Crearemos un `KeyframeEffect` que apunte a `--progress`.
    // El método `animate` dentro de un Worklet puede definir un tiempo o easing personalizado.

    // Ejemplo conceptual simplificado de un Worklet que se puede usar para generar valores de animación:
    // El método `animate` es clave.
    // Asumamos que este worklet está cargado y creamos un objeto Animation a partir de él.
    // `CSS.registerAnimation` es más para la integración con `@keyframes` de CSS.

    // Foco en la firma y propósito del método `animate`:
    // Toma `currentTime` y `playState` y devuelve el valor interpolado.

    // Asumamos que tenemos una clase `ProgressAnimator` con un método `animate`.
    // Registraríamos esta clase o su instancia.

    // Intento final en `CSS.registerAnimation` para mayor claridad:
    // Esto registra una secuencia de animación reutilizable.
    // Se llamará al método `animate` en el Worklet asociado.
    // El `name` es lo que se usa en `animation-name`.

    // Asumamos que existe una clase de Worklet llamada `ProgressAnimationWorklet` y está cargada.
    // `CSS.registerAnimation` requiere una `definition` que el navegador pueda usar para crear una animación.
    // Esta definición podría hacer referencia a un `KeyframeEffect` personalizado proporcionado por el Worklet.

    // Simplifiquemos y centrémonos en la funcionalidad principal: el método `animate` que devuelve valores.
    // El motor de animación del navegador llamará a este método.

    // Necesitamos vincular el Worklet a CSS.
    // `CSS.animationWorklet.addModule()` es la forma de cargar Worklets.
    // Después de cargar, podemos usar la API `Animation`.

    // Preparemos un Worklet que se pueda cargar.
    // El método `animate` es el corazón de la lógica de animación del Worklet.

    // Consideremos el `AnimationWorklet` como una forma de definir `KeyframeEffect`s personalizados o funciones de animación.
    // `CSS.registerAnimation` registra una secuencia de animación con nombre que se puede usar en CSS.

    // Definamos un método conceptual `animate` que el navegador llama.
    // Este método `animate` debe devolver el valor de la propiedad que se está animando.

    // La API `CSS.registerAnimation` es más para definir el comportamiento de `@keyframes` personalizados.
    // Para la animación de propiedades personalizadas a través de la API de Animación de JavaScript:
    // Creamos un `KeyframeEffect` que apunta a la propiedad personalizada.
    // El Worklet puede proporcionar un easing o comportamiento de línea de tiempo personalizado.

    // Asumamos que `animate` es el método que calcula el valor de la propiedad.
    // `CSS.registerAnimation` creará una secuencia de animación a partir de esto.

    // Asumamos que una clase `ProgressAnimation` está definida en `progress-animation.js` con un método `animate`.
    // La API `CSS.registerAnimation` se utiliza para registrar una animación con nombre.
    // El parámetro `definition` puede ser un `KeyframeEffect` o una fábrica para él.

    // Para animar propiedades personalizadas, la API de Animación se usa a menudo en conjunto.
    // El Worklet define la lógica de animación personalizada.

    // Presentemos un ejemplo más refinado del script del Worklet:
  },
  // El argumento `params` en `CSS.registerAnimation` no es estándar. El tiempo y el easing generalmente se controlan a través de la propiedad `animation` de CSS o la API de Animación.
  // La firma de la función `animate` es `(currentTime, playState)` devolviendo un valor.
  // Necesitamos cargar este Worklet y luego usarlo.
});

// En un script separado (por ejemplo, main.js):
/*
  // Carga el módulo Animation Worklet
  CSS.animationWorklet.addModule('progress-animation.js')
    .then(() => {
      const progressBarStyle = getComputedStyle(document.querySelector('.progress-bar'));
      const animationDuration = 2000; // ms
      const targetProgress = 80;

      // Define los keyframes para la propiedad personalizada
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Define el tiempo de la animación
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out',
        fill: 'forwards' // Mantiene el valor final
      };

      // Crea un KeyframeEffect que apunta al elemento
      // Necesitamos apuntar al elemento que tiene la propiedad --progress establecida.
      // Asumamos que se aplica al body o a un elemento específico.
      const progressBarElement = document.querySelector('.progress-bar');

      // Crea un KeyframeEffect para la propiedad personalizada
      // El nombre de la propiedad personalizada es '--progress'.
      const effect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Crea un objeto Animation
      // Si registramos 'customProgress', podríamos usarlo aquí.
      // O podemos usar el constructor de Animation por defecto, que implícitamente usa la lógica del navegador.
      // El método `animate` en el Worklet es lo que personaliza la interpolación.

      // Para animar propiedades personalizadas, la API `Animation` es la interfaz principal.
      // El Worklet proporciona un comportamiento personalizado a esta API.

      // Simulemos la creación de una animación que usa lógica personalizada.
      // `CSS.registerAnimation` es para animaciones CSS con nombre.
      // Para el control directo de JS sobre propiedades personalizadas, creamos `KeyframeEffect`.
      // El método `animate` del Worklet es invocado por el navegador cuando se usa la API `Animation`.

      // Usemos la API `Animation` directamente con nuestra propiedad personalizada.
      // Crearemos un `KeyframeEffect` que apunte a `--progress`.
      // El navegador usará la lógica del Worklet registrado si es aplicable.

      // Ejemplo: Animando directamente `--progress` usando la API de Animación.
      const progressAnimation = new Animation(
        new KeyframeEffect(
          progressBarElement,
          [{ '--progress': 0 }, { '--progress': targetProgress }],
          {
            duration: animationDuration,
            easing: 'ease-in-out',
            fill: 'forwards'
          }
        )
      );

      // Reproduce la animación
      progressAnimation.play();
    })
    .catch(error => {
      console.error('No se pudo cargar el Animation Worklet:', error);
    });
*/


// Ejemplo conceptual corregido centrado en el método `animate` dentro de un Worklet,
// que influye en cómo el navegador interpola los valores.

// Asume que este script `progress-animation.js` es cargado por `CSS.animationWorklet.addModule()`.

// Este es un ejemplo simplificado de cómo un Worklet puede definir lógica de animación personalizada.
// El método `animate` será llamado por el motor de animación del navegador.
// El valor de retorno es el valor interpolado para la propiedad que se está animando.

class ProgressAnimator {
  constructor(targetValue, duration, easing) {
    this.targetValue = targetValue;
    this.duration = duration;
    this.easing = easing;
  }

  animate(currentTime, playState) {
    if (playState !== 'running') {
      return playState;
    }

    let progress = currentTime / this.duration;
    progress = Math.max(0, Math.min(progress, 1)); // Limita el progreso
    const easedProgress = this.easing(progress);
    return this.targetValue * easedProgress;
  }
}

// Para hacer esto utilizable a través de `CSS.registerAnimation`, típicamente lo envolverías
// en una estructura que define un `KeyframeEffect` o una animación personalizada.

// Para animar propiedades personalizadas, la API `Animation` es la interfaz principal,
// y los Worklets proporcionan un comportamiento personalizado que la API `Animation` puede aprovechar.

// Demostremos el concepto central: el método `animate` genera valores.

// Esta es una representación conceptual de la capacidad de un Worklet.
// La implementación real para `CSS.registerAnimation` es más compleja,
// involucrando definiciones de `KeyframeEffect`.

// La forma más directa de animar propiedades personalizadas con Houdini es usando la API de Animación,
// y permitiendo que los Worklets influyan en la interpolación.

// Asumamos que el Worklet define cómo *generar* valores para una animación.
// `CSS.registerAnimation` es para nombrar estas secuencias de animación personalizadas.

// El rol del método `animate` es calcular el valor en un `currentTime` dado.
// `playState` indica el estado actual de la animación.

// Una forma práctica de integrar es creando un `KeyframeEffect` que apunte a la propiedad personalizada.
// El navegador luego usa su motor de animación, que puede ser extendido por los Worklets.

// Para que un Worklet sea verdaderamente reutilizable con `CSS.registerAnimation` para propiedades personalizadas,
// el Worklet definiría una fábrica de `KeyframeEffect` personalizada.

// Sin embargo, el principio fundamental es que los Worklets pueden proporcionar una lógica `animate` personalizada.

// Estructuremos un ejemplo más completo de carga y uso de un Worklet
// para la animación de propiedades personalizadas.

// --- `progress-animation.js` Conceptual ---
// class CustomProgressAnimation {
//   constructor(options) {
//     this.options = options;
//   }
//   animate(currentTime, playState) {
//     if (playState !== 'running') return playState;
//     const { targetValue, duration, easing } = this.options;
//     let progress = currentTime / duration;
//     progress = Math.max(0, Math.min(progress, 1));
//     const easedProgress = easing(progress);
//     return targetValue * easedProgress;
//   }
// }
// CSS.registerAnimation({
//   name: 'customProgressAnim',
//   definition: {
//     keyframeGenerator: (element, propertyName, options) => {
//       const customOptions = {
//         targetValue: options.params.targetValue || 100,
//         duration: options.duration,
//         easing: (() => {
//           // Resuelve la función de easing a partir de una cadena o función
//           if (typeof options.easing === 'function') return options.easing;
//           if (options.easing === 'ease-in-out') return t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
//           return t => t;
//         })()
//       };
//       return new KeyframeEffect(element, propertyName, {
//         '*': {
//           [`${propertyName}`]: {
//             customAnimator: new CustomProgressAnimation(customOptions)
//           }
//         }
//       }, options.duration, options.delay, options.endDelay, options.iterations, options.direction, options.fill);
//     }
//   }
// });
// --- Fin de `progress-animation.js` Conceptual ---

// El concepto de `keyframeGenerator` anterior es un poco avanzado. El método `animate`
// se trata más de definir la lógica de interpolación.

// Centrémonos en la capacidad de los Worklets para influir en la interpolación de la animación.
// Cuando se anima una propiedad personalizada, el navegador necesita saber cómo interpolar su valor.
// Los Worklets pueden proporcionar una lógica de interpolación personalizada.

// La clave es que `AnimationWorklet` permite funciones `animate` personalizadas.


El Rol del Método animate

El corazón de un Animation Worklet para la animación de propiedades personalizadas reside en su método animate. Este método es llamado por el motor de animación del navegador en cada fotograma de la animación. Recibe dos argumentos principales:

  
currentTime: El tiempo actual de la animación, típicamente en milisegundos, relativo al inicio de la animación.
  
playState: Una cadena de texto que indica el estado actual de la animación (por ejemplo, 'running', 'paused', 'finished').


Se espera que el método animate devuelva el valor calculado para la propiedad que se está animando en ese momento específico. Para las propiedades personalizadas, este valor se utilizará para actualizar la propiedad dinámicamente.

Paso 2: Cargando y Aplicando el Worklet

Una vez que tu script de Worklet está listo, necesitas cargarlo en el contexto de animación del navegador. Esto se hace usando CSS.animationWorklet.addModule(). Después de que el módulo se carga, puedes usar la API de Animación del navegador para crear y reproducir animaciones que apunten a tus propiedades personalizadas. Cuando el navegador anima una propiedad personalizada, aprovechará la lógica definida en tu Worklet.

Así es como podrías cargar el Worklet y aplicar una animación en tu archivo principal de JavaScript:


// main.js

// Asegurarse de que el navegador soporta Animation Worklets de Houdini
if ('animationWorklet' in CSS) {
  // Carga el módulo del Worklet
  CSS.animationWorklet.addModule('/path/to/progress-animation.js') // Asegúrate de que la ruta sea correcta
    .then(() => {
      console.log('¡Animation Worklet cargado con éxito!');

      const progressBarElement = document.querySelector('.progress-bar');
      const animationDuration = 1500; // milisegundos
      const targetProgress = 75; // El valor objetivo para --progress

      // Define los keyframes. Estamos apuntando a la propiedad personalizada '--progress'.
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Define los parámetros de tiempo
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out', // Easing de CSS estándar o personalizado
        fill: 'forwards' // Mantiene el estado final
      };

      // Crea un KeyframeEffect que apunta a nuestro elemento y la propiedad personalizada
      // El navegador usará la lógica del Worklet registrado para interpolar '--progress'.
      const progressEffect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Crea un objeto Animation a partir del efecto
      const progressAnimation = new Animation(progressEffect);

      // Opcionalmente, vincúlalo a un nombre de animación personalizado si se registró
      // Para la animación directa de propiedades personalizadas, la API de Animación se usa a menudo directamente.

      // Reproduce la animación
      progressAnimation.play();
    })
    .catch(error => {
      console.error('No se pudo cargar o registrar el Animation Worklet:', error);
      // Fallback o manejo de errores para navegadores que no lo soportan
    });
} else {
  console.warn('Los CSS Animation Worklets no son compatibles en este navegador.');
  // Proporciona un fallback para navegadores más antiguos
}


            

              
                Copy