CSS08 · ברק חולף על טקסט

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.center{text-align:center}

/* CSS08 · ברק חולף על טקסט */
.shine{font-size:var(--fs-demo, clamp(36px, 3vw + 0.5rem, 76px));font-weight:800;
background:linear-gradient(110deg,var(--ink, #16182b) 40%,#8f97ff 50%,var(--ink, #16182b) 60%);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:shine 3.2s linear infinite}
@keyframes shine{from{background-position:130% 0}to{background-position:-130% 0}}
@media(prefers-reduced-motion:reduce){.shine{animation:none;color:var(--ink, #16182b);background:none}}

HTML

<div class="stage tight center"><h2 class="shine">ברק שחולף על הכותרת</h2></div>