Ana Tudor 🐯<p>Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.</p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/XJWxLWV" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJW</span><span class="invisible">xLWV</span></a></p><p>cc <span class="h-card" translate="no"><a href="https://front-end.social/@bramus" class="u-url mention">@<span>bramus</span></a></span> </p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="tag">#<span>scroll</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="tag">#<span>scrollAnimation</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="tag">#<span>coding</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="tag">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/gradientText" class="mention hashtag" rel="tag">#<span>gradientText</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="tag">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="tag">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="tag">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="tag">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="tag">#<span>code</span></a></p>