Scroll Charge-Up

How it works

Scroll Charge-Up is an animated neon & glow text effect rendered entirely in CSS. It is driven by a scroll-linked animation timeline.

Controls

Scroll Charge-Up exposes 3 dedicated controls — Hue, Glow and Core — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Scroll Charge-Up — made with TEXT-FX · https://text-fx.app
 * HTML: uses scroll-driven animation.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  color: hsl(37 50% 97%);
  text-shadow: 0 0 2px hsl(37 82% 89%), 0 0 7.6px hsl(37 95% 62%), 0 0 17.6px hsl(37 95% 62%), 0 0 35.3px hsl(53 95% 56% / 0.9), 0 0 63px hsl(53 95% 56% / 0.85);
}

@supports (animation-timeline: view()) {
  .text-effect {
    animation: text-effect-charge linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 54%;
  }
}

@keyframes text-effect-charge {
  0%   { color: hsl(37 28% 52%); text-shadow: 0 0 1px hsl(37 82% 89% / 0), 0 0 2px hsl(37 95% 62% / 0.15), 0 0 3px hsl(37 95% 62% / 0), 0 0 4px hsl(53 95% 56% / 0), 0 0 5px hsl(53 95% 56% / 0); }
  22%  { color: hsl(37 29.3% 54.7%); text-shadow: 0 0 1.1px hsl(37 82% 89% / 0.06), 0 0 2.3px hsl(37 95% 62% / 0.201), 0 0 3.9px hsl(37 95% 62% / 0.06), 0 0 5.9px hsl(53 95% 56% / 0.054), 0 0 8.5px hsl(53 95% 56% / 0.051); }
  38%  { color: hsl(37 32% 60.1%); text-shadow: 0 0 1.2px hsl(37 82% 89% / 0.18), 0 0 3px hsl(37 95% 62% / 0.303), 0 0 5.6px hsl(37 95% 62% / 0.18), 0 0 9.6px hsl(53 95% 56% / 0.162), 0 0 15.4px hsl(53 95% 56% / 0.153); }
  43%  { color: hsl(37 30% 56.1%); text-shadow: 0 0 1.1px hsl(37 82% 89% / 0.09), 0 0 2.5px hsl(37 95% 62% / 0.226), 0 0 4.3px hsl(37 95% 62% / 0.09), 0 0 6.8px hsl(53 95% 56% / 0.081), 0 0 10.2px hsl(53 95% 56% / 0.077); }
  50%  { color: hsl(37 43.8% 84.4%); text-shadow: 0 0 1.7px hsl(37 82% 89% / 0.72), 0 0 6px hsl(37 95% 62% / 0.762), 0 0 13.5px hsl(37 95% 62% / 0.72), 0 0 26.5px hsl(53 95% 56% / 0.648), 0 0 46.8px hsl(53 95% 56% / 0.612); }
  60%  { color: hsl(37 47.8% 92.5%); text-shadow: 0 0 1.9px hsl(37 82% 89% / 0.9), 0 0 7px hsl(37 95% 62% / 0.915), 0 0 16.2px hsl(37 95% 62% / 0.9), 0 0 32.2px hsl(53 95% 56% / 0.81), 0 0 57.2px hsl(53 95% 56% / 0.765); }
  72%  { color: hsl(37 50% 97%); text-shadow: 0 0 2px hsl(37 82% 89%), 0 0 7.6px hsl(37 95% 62%), 0 0 17.6px hsl(37 95% 62%), 0 0 35.3px hsl(53 95% 56% / 0.9), 0 0 63px hsl(53 95% 56% / 0.85); }
  100% { color: hsl(37 50% 97%); text-shadow: 0 0 2px hsl(37 82% 89%), 0 0 7.6px hsl(37 95% 62%), 0 0 17.6px hsl(37 95% 62%), 0 0 35.3px hsl(53 95% 56% / 0.9), 0 0 63px hsl(53 95% 56% / 0.85); }
}

Related Neon & Glow effects

• Dual Neon
• Neon Glow
• Pulse Glow
• Soft Glow
• Neon Sign