Reveal animated background for specified text spans on mouse hover

Question

Goal

• A hero section with text
• The hero text contains spans
• A circle follows the mouse position
• Where the circle overlaps the spans, an animated background is revealed
• All other text remains black, even if they are within the circle
• Ideally, I'd like to use a single animated background that is shared across all spans

Mockup

I can't figure out how to set up the HTML and CSS for this.

What I have So Far

I got a part of it working, though it's in a round-about way and I'm not sure the approach will let me continue on toward the desired goal.

1. The solution uses a background image applied to the heading text with background-clip: text;. If I'm not mistaken, this approach won't let me achieve the circle-reveal effect. I assume for that the image needs to be a separate layer below the text so I can mask it with the circle that follows the mouse.

2. Instead of revealing the background for the selected spans, I'm revealing the background for the entire h1, and using spans to define which text should remain black. For some reason I couldn't get it to work the other way around.

<h1 class="text-animated-bg">
  <span class="text-black">This is some</span> text <span class="text-black">that I wrote with</span> various words <span class="text-black">that reveal an animated </span>background
</h1>

.text-animated-bg {
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url("animation.gif");
    background-position: 0px 0px;
    background-size: cover;
    font-family: Ogg, sans-serif;
    color: #000;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-black {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
    background-image: linear-gradient(180deg, #000, #000);
    font-family: Inconsolata, monospace;
    font-style: normal;
    font-weight: 400;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

Ask

Any ideas on how to approach the HTML and CSS to achieve the desired effect?