DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Text Animation - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Text Animation
ankushsingh
Jan 11, 2026
12
1
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="wrapper"> <h1 id="shine-text">Ankush</h1> </div>
1
body { margin: 0; background: #05050a; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: "Poppins", sans-serif; } .wrapper { position: relative; display:flex; justify-content: center; align-items: center; } #shine-text { font-size: 60px; font-weight: 900; letter-spacing: 12px; color: #fff; position: relative; text-shadow: 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #00eaff, 0 0 80px #00eaff; /* smooth wave motion */ animation: wave 3s ease-in-out infinite alternate, glow 3s linear infinite; overflow: hidden; } /* Shine effect */ #shine-text::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 50%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.9), transparent ); animation: shine 2.5s infinite; } /* Wave Animation */ @keyframes wave { from { transform: translateY(-10px) rotateX(15deg); } to { transform: translateY(10px) rotateX(-15deg); } } /* Glow pulsing */ @keyframes glow { 0% { text-shadow: 0 0 10px #00eaff, 0 0 30px #00eaff; } 50% { text-shadow: 0 0 25px #00eaff, 0 0 80px #00eaff; } 100% { text-shadow: 0 0 10px #00eaff, 0 0 30px #00eaff; } } /* Shine */ @keyframes shine { 0% { left: -150%; } 100% { left: 150%; } }
1
const text = "Ankush"; const element = document.getElementById("shine-text"); let index = 0; function typeEffect() { if (index <= text.length) { element.textContent = text.slice(0, index); index++; setTimeout(typeEffect, 140); } } typeEffect();
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!