Thanks @zbrah the zebra
So yes, there are tons of CSS possibilities for that.
You can use clip-path with a SVG mask for example. Read everything about clipping and masking here (the SVG mask part is around the middle)
But you can also use CSS clip-text, and then use just a font for the clipping. So you could even make that work with the CMS.
For example the title of this site: http://wars.webflow.io/ works with background-clip.
<style>
/* textured text using clip */
.clipped {
/* -webkit-background-clip clips the background of the element to the text */
-webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
-webkit-background-clip: text;
}
</style>
To use this to make your header, first design a large box with the animated background. Duplicate it and make the duplicate exactly on top of the original. In the duplicate, position your text and apply the bg-clip.
