Animated Text

jitesh208

Jan 17, 2026 3

Live Preview

Live Editor

<h1 class="text-center font-semibold leading-none">
  <span style="font-size: 6rem" class="block">One API</span>
  <span style="font-size: 12rem" class="dotted">to rule them all.</span>
</h1>
body{
  background:#000;
}

.dotted {
    background-position: 0px 4px;
    background-size: 8px 8px;
    background-clip: text;
    background-image: radial-gradient(
        circle at 2px 2px,
        var(--animated-color) 1px,
        transparent 0
    );
    color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    @property --animated-color {
        syntax: "<color>";
        initial-value: oklch(from lime l c 0deg);
        inherits: false;
    }

    @keyframes scrollBg {
        50% {
            --animated-color: oklch(from lime l c 240deg);
        }
        100% {
            background-position: -32px 4px;
        }
    }

    .dotted {
        animation: scrollBg 10s linear infinite forwards;
    }
}

Categories

Animated Text

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet