Text animation · .sds-neon-flicker-in

Neon Flicker In

Flickers on like a neon sign. Add the class .sds-neon-flicker-in to any element — it plays once as soon as the class is applied, with no JavaScript.

Live demo

Neon Flicker In

Demo uses this site's neutral theme; override --sds-primary to match your brand.

Quick start

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/text.min.css" />

<h1 class="sds-neon-flicker-in">Neon Flicker In</h1>

Loads only the text bundle (core is included).Prefer one file? Use https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css (all 604 effects).

How it works

Plays once, as soon as the class is applied. It animates opacity, its text glow and movement and scale (transform). Timing is fixed for this effect, but you can still override animation-duration/timing-function on the element.

Technical details

Class	`.sds-neon-flicker-in`
Category	Text
Runs	plays once, as soon as the class is applied
Animated properties	opacity, text-shadow, transform
Compositor-only	No — also animates paint or layout properties
Needs child elements	No
Needs per-character spans	No
JavaScript	None required
Keyframes	sds-neonFlickerIn
Design tokens	n/a
Since	4.0.3

Copy-paste code

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css" />
  </head>
  <body>
    <h1 class="sds-neon-flicker-in">Neon Flicker In</h1>
  </body>
</html>

React / Next.js

import "@salkomdesignstudio/sds-motion-forge/dist/motion.min.css";

export default function Demo() {
  return (
    <h1 className="sds-neon-flicker-in">Neon Flicker In</h1>
  );
}

Angular

// angular.json → architect.build.options.styles:
//   "node_modules/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css"
import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `
    <h1 class="sds-neon-flicker-in">Neon Flicker In</h1>
  `,
})
export class DemoComponent {}

Tailwind CSS

/* app.css — Tailwind v4 */
@import "tailwindcss";
@import "@salkomdesignstudio/sds-motion-forge/dist/motion.min.css";

/* then use the class like any other: */
<h1 class="sds-neon-flicker-in">Neon Flicker In</h1>

Typed React, Angular, Tailwind and Web Components wrappers live in packages/ in the repository and are not yet published to npm; the snippets above need only the CSS.

Related animations

All 104 text animations · Installation & usage docs · Custom bundle builder