Draaiend verloop in kop

A large heading with a two-tone gradient whose angle rotates very slowly, so the colour wanders through the lines; restrained and refined.

Architectenbureau Lindeman · Delft

Ruimte die je
pas mist als
hij er niet is.

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.

<!-- Draaiend verloop in kop · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-gsh"><span class="ei-gsh__k">Architectenbureau Lindeman · Delft</span><h3 class="ei-gsh__h">Ruimte die je<br>pas mist als<br>hij er niet is.</h3></div>
</div>

/* Draaiend verloop in kop · NedDev · eigen werk. */
@property --ei-gsh-a{syntax:'<angle>';inherits:false;initial-value:20deg}
.ei-gsh{padding:0 26px;width:100%;box-sizing:border-box}
.ei-gsh__k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.5);margin-bottom:12px}
.ei-gsh__h{margin:0;font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(24px,4.6vw,34px);line-height:1.02;letter-spacing:-.035em;color:transparent;background:linear-gradient(var(--ei-gsh-a),#0a0a0a 0%,#0a0a0a 38%,#F5480F 62%,#0a0a0a 92%);-webkit-background-clip:text;background-clip:text;animation:ei-gsh-turn 14s linear infinite}
@keyframes ei-gsh-turn{to{--ei-gsh-a:380deg}}
@media(prefers-reduced-motion:reduce){.ei-gsh__h{animation: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 →