Lichtveeg over tekst

A narrow band of light sweeps over muted text in a loop; good for a badge or announcement that needs a little attention.

Nieuw: onderhoudsplan voor 2027 staat open

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Lichtveeg over tekst · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-shn"><span class="ei-shn__dot"></span><span class="ei-shn__t">Nieuw: onderhoudsplan voor 2027 staat open</span></div>
</div>

/* Lichtveeg over tekst · NedDev · eigen werk. */
.ei-shn{display:inline-flex;align-items:center;gap:10px;background:#0a0a0a;border-radius:999px;padding:11px 18px;max-width:88%;box-sizing:border-box}
.ei-shn__dot{width:7px;height:7px;border-radius:50%;background:#F5480F;flex:none}
.ei-shn__t{font-family:'Switzer',sans-serif;font-weight:500;font-size:14px;color:transparent;background:linear-gradient(100deg,#8a8a8a 0%,#8a8a8a 40%,#fff 50%,#8a8a8a 60%,#8a8a8a 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:ei-shn-sweep 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ei-shn-sweep{0%{background-position:100% 0}70%,100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.ei-shn__t{animation:none;color:#d6d6d6;background:none}}

More text animations

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →