# Animated Text Shimmer > Headline text with a flowing shimmer highlight driven by character length — elegant loading and hero accents. **Definition:** Animated Text Shimmer is a text UI animation from collections.html. It is built with HTML, CSS, and JavaScript, ships with a live preview, and is free to copy into personal and commercial projects. ## Facts - Category: Text - Stack: HTML, CSS, and JavaScript - Added: 2026-08-03 - Canonical page: https://html.bosconvertpro.com/collection/animated-text-shimmer - Full-page preview: https://html.bosconvertpro.com/collection/animated-text-shimmer/full - Live demo: https://html.bosconvertpro.com/demos/animated-text-shimmer/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/animated-text-shimmer/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/animated-text-shimmer/full to preview the animation in full screen. 2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/animated-text-shimmer. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Animated Text Shimmer? Animated Text Shimmer is a text UI animation from collections.html. Headline text with a flowing shimmer highlight driven by character length — elegant loading and hero accents. ### What is Animated Text Shimmer built with? Animated Text Shimmer is built with HTML, CSS, and JavaScript. The source for every file is shown on the animation page and can be copied straight into your project. ### How do I use Animated Text Shimmer in my project? Open the animation page (https://html.bosconvertpro.com/collection/animated-text-shimmer), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/animated-text-shimmer/index.html. ### Is Animated Text Shimmer free to use? Yes. The Animated Text Shimmer demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms. ## Source — index.html ````html Animated Text Shimmer

CSS is so cool

Just pure clean CSS

Nice soft text shimmer

```` ## Source — styles.css ````css /* Animated Text Shimmer — professional polish */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0c0c0e; --grid: rgba(255, 255, 255, 0.04); --font: "Inter", system-ui, -apple-system, sans-serif; /* Soft metallic band — tight highlight, smooth falloff */ --gradient: linear-gradient( 105deg, hsl(220 6% 38%) 0%, hsl(220 6% 38%) 38%, hsl(220 8% 58%) 45%, hsl(0 0% 96%) 50%, hsl(220 8% 58%) 55%, hsl(220 6% 38%) 62%, hsl(220 6% 38%) 100% ); } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow: hidden; } /* Film grain */ .grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; } .stage { position: relative; isolation: isolate; width: 100%; min-height: 100svh; display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3.5rem); background: var(--bg); } /* Graph grid with soft falloff */ .grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 52px 52px; background-position: center center; mask-image: radial-gradient( ellipse 62% 58% at 50% 50%, #000 15%, transparent 72% ); -webkit-mask-image: radial-gradient( ellipse 62% 58% at 50% 50%, #000 15%, transparent 72% ); } .lines { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55em; } /* Core technique (jh3yy): background-clip: text + transparent color + wide gradient + position sweep */ .txt { --duration: calc(var(--text-length, 12) * 0.12s); --delay: 0s; margin: 0; font-size: clamp(1.35rem, 3.2vw, 1.85rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; white-space: nowrap; font-feature-settings: "ss01" on, "cv11" on; color: #0000; -webkit-text-fill-color: transparent; background: var(--gradient) 0 0 / 280% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; animation: shim var(--duration) linear infinite; animation-delay: var(--delay); /* Soft lift so type reads off the grid */ filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); } /* Staggered phases — lines don’t pulse in lockstep */ .lines .txt:nth-child(1) { --delay: 0s; } .lines .txt:nth-child(2) { --delay: 0.35s; } .lines .txt:nth-child(3) { --delay: 0.7s; } @keyframes shim { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { .txt { animation: none; background-position: 42% 0; } } @media (max-width: 480px) { .txt { font-size: clamp(1.15rem, 5.5vw, 1.4rem); } } ```` ## Source — script.js ````javascript document.querySelectorAll(".txt").forEach((el) => { const len = (el.textContent || "").trim().length; if (len) el.style.setProperty("--text-length", String(len)); }); ````