A KINETIC TYPOGRAPHY STAGE

WORDS IN MOTION

Design, choreograph, and export stunning kinetic type for the web — no code required.

Take the Stage See How It Works
timer120+Presets
speed60fpsSmooth
download4KExport
KINETIC TYPEANIMATED TEXTWEB EXPORT

FEATURES

Powerful Tools for Motion Type

library_books

Preset Library

Jumpstart with curated animations ranging from subtle flicks to explosive bursts.

tune

Variable‑Font Axes

Control weight, width, slant and custom axes in real time.

download

One‑Click Export

Generate self‑contained HTML/CSS/JS or a lightweight video.

HOW IT WORKS

From Idea to Stage

01

WRITE

Type your message and choose a base font.

02

CHOREOGRAPH

Drag keyframes on the timeline to animate each letter.

03

PERFORM & EXPORT

Preview, then export to the web or as a video.

TESTIMONIALS

What Creators Say

format_quote

“Words in Motion turned our promo into a living headline. The export was flawless.”

Alex Jordan Motion Designer
format_quote

“The variable‑font controls let us sync type to music beats effortlessly.”

Maya Gupta UI Animator
format_quote

“One‑click export saved us hours of tedious packaging.”

PRICING

Choose Your Plan

BACKSTAGE

$12/mo

  • check_circleUnlimited presets
  • check_circleVariable‑font axes
  • check_circleStandard export
  • cancelPriority support
Choose

STAGE

$24/mo

MOST POPULAR
  • check_circleEverything in Backstage
  • check_circleCustom font upload
  • check_circle4K video export
  • check_circlePriority support
Choose

TOUR

$48/mo

  • check_circleEverything in Stage
  • check_circleTeam seats (5)
  • check_circleAPI access
  • check_circleDedicated manager
Choose

All plans include free updates and cancel anytime.

FAQ

Frequently Asked Questions

START YOUR STAGE

Ready to bring your words to life? Enter your email and we’ll send you a free starter kit.

We respect your privacy. Unsubscribe anytime.

``` style.css /* style.css */ :root { /* Color tokens */ --bg-primary: #F4F1EA; --bg-secondary: #fefefe; --primary: #FF3B00; --secondary: #141210; --text-primary: #141210; --text-secondary: #57504A; --text-success: #0E7A3C; --text-error: #C81E1E; --border-default: #141210; /* Radius */ --radius-sm: 0px; --radius-md: 4px; --radius-lg: 20px; /* Shadows (hard offset) */ --shadow-sm: 3px 3px 0 var(--border-default); --shadow-md: 6px 6px 0 var(--border-default); /* Spacing & transitions */ --spacing-gap: 1.5rem; --transition-fast: 120ms; --transition-normal: 240ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Glass */ --glass-bg: rgba(254,254,254,0.55); --glass-border: rgba(20,18,16,0.65); --glass-blur: 14px; /* Gradient accent */ --gradient-accent: linear-gradient(100deg, #FF3B00 0%, #FF9A3D 100%); /* Fonts */ --font-display: 'Archivo Black', sans-serif; --font-base: 'Space Grotesk', sans-serif; --font-mono: 'Space Mono', monospace; } .theme-dark { --bg-primary: #141210; --bg-secondary: #1E1B17; --primary: #FF4D1A; --secondary: #F4F1EA; --text-primary: #F4F1EA; --text-secondary: #B3ABA1; --text-success: #4ADE80; --text-error: #FF6B6B; --border-default: #F4F1EA; --glass-bg: rgba(20,18,16,0.6); --glass-border: rgba(244,241,234,0.25); } @media (prefers-color-scheme: dark) { :root { --bg-primary: #141210; --bg-secondary: #1E1B17; --primary: #FF4D1A; --secondary: #F4F1EA; --text-primary: #F4F1EA; --text-secondary: #B3ABA1; --text-success: #4ADE80; --text-error: #FF6B6B; --border-default: #F4F1EA; --glass-bg: rgba(20,18,16,0.6); --glass-border: rgba(244,241,234,0.25); } } *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; } body { margin: 0; font-family: var(--font-base); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button { cursor: pointer; } img { max-width: 100%; display: block; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } @layer base, layout, components, utilities; @layer base { h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; margin: 0; } h1 { font-size: clamp(2.75rem, 9vw, 7.5rem); } h2 { font-size: clamp(2rem, 6vw, 3.5rem); } h3 { font-size: clamp(1.5rem, 4vw, 2.25rem); } p { margin: 0 0 1rem; } } @layer layout { .section { padding: 4rem 1.5rem; } .section__eyebrow { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.5rem; } .section__heading { margin-bottom: 2rem; } .header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: 4.5rem; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-bottom: 2px solid var(--border-default); } .header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 1.5rem; } .header__logo { font-family: var(--font-display); font-size: 1.25rem; } .header__nav { display: flex; gap: 2rem; } .header__link { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; position: relative; } .header__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--primary); transition: width var(--transition-normal) var(--ease-standard); } .header__link:hover::after, .header__link:focus-visible::after { width: 100%; } .header__menu-btn, .header__theme-toggle, .footer__theme-btn { background: transparent; border: 2px solid var(--border-default); color: var(--text-primary); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal) var(--ease-standard), box-shadow var(--transition-normal) var(--ease-standard); } .header__menu-btn:hover, .header__menu-btn:focus-visible, .header__theme-toggle:hover, .header__theme-toggle:focus-visible, .footer__theme-btn:hover, .footer__theme-btn:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); } .header__menu-btn:active, .header__theme-toggle:active, .footer__theme-btn:active { transform: scale(0.97); } .header__menu-btn[aria-expanded="true"] .material-symbols-outlined { content: "close"; } .header__mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-top: 2px solid var(--border-default); padding: 1.5rem; display: none; flex-direction: column; gap: 1rem; } .header__mobile-nav[aria-expanded="true"] { display: flex; } .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 0 1.5rem; } .hero__blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.6; } .blob-1 { width: 30rem; height: 30rem; background: var(--gradient-accent); top: -10rem; left: -10rem; } .blob-2 { width: 20rem; height: 20rem; background: var(--secondary); top: 10rem; right: -5rem; } .blob-3 { width: 25rem; height: 25rem; background: var(--primary); bottom: -5rem; left: 15rem; } .hero__content { text-align: center; position: relative; z-index: 2; max-width: 38rem; } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.5rem; } .hero__headline { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 5rem); line-height: 1; margin-bottom: 1rem; display: inline-flex; gap: 0; } .hero__letter { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(20px) rotate(4deg); } .hero__accent { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__subcopy { font-size: 1.125rem; margin-bottom: 1.5rem; max-width: 28rem; margin-left: auto; margin-right: auto; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 1.5rem; font-family: var(--font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.025em; border: 2px solid var(--border-default); color: var(--text-primary); background: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); transition: transform var(--transition-normal) var(--ease-standard), box-shadow var(--transition-normal) var(--ease-standard), background-color var(--transition-normal) var(--ease-standard), color var(--transition-normal) var(--ease-standard); } .btn--primary { background: var(--primary); color: var(--secondary); } .btn--primary:hover, .btn--primary:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); } .btn--primary:active { transform: scale(0.97); } .btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-default); } .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--secondary); color: var(--primary); transform: translate(-2px, -2px); box-shadow: var(--shadow-md); } .btn--secondary:active { transform: scale(0.97); } .btn--danger { background: var(--text-error); color: var(--secondary); } .btn--danger:hover, .btn--danger:focus-visible { background: var(--text-error); transform: translate(-2px, -2px); box-shadow: var(--shadow-md); } .btn--danger:active { transform: scale(0.97); } .btn--block { width: 100%; justify-content: center; } .btn.is-loading { pointer-events: none; opacity: 0.7; } .btn.is-loading::after { content: ""; display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .btn.is-success { background: var(--text-success); color: var(--secondary); } .features__grid, .testimonials__grid, .pricing__grid { display: flex; gap: var(--spacing-gap); flex-wrap: wrap; justify-content: center; } .feature-card, .testimonial, .pricing-tier { flex: 1 1 200px; max-width: 280px; display: flex; flex-direction: column; align-items: center; text-align: center; } .feature-icon, .quote-icon { font-size: 2rem; color: var(--primary); margin-bottom: 1rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .feature-title, .tier__name { margin: 0.5rem 0; } .feature-desc, .testimonial__text { font-size: 0.95rem; line-height: 1.4; margin: 0.5rem 0; } .testimonial__footer { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.875rem; } .testimonial__avatar { width: 1.75rem; height: 1.75rem; background: var(--gradient-accent); color: var(--secondary); display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 50%; } .tier__price { font-family: var(--font-display); font-size: 2rem; margin: 0.5rem 0; } .tier__currency { font-size: 0.6em; vertical-align: top; } .tier__billing { font-family: var(--font-mono); font-size: 0.75em; opacity: 0.7; } .tier__badge { position: absolute; top: -1.5rem; right: -1.5rem; background: var(--primary); color: var(--secondary); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .tier__features { list-style: none; padding: 0; margin: 1rem 0; text-align: left; } .tier__features li { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-size: 0.9rem; } .tier__features li .material-symbols-outlined { font-size: 1rem; } .pricing-tier--featured { border: 3px solid var(--primary); box-shadow: var(--shadow-md); position: relative; } .steps { display: flex; gap: var(--spacing-gap); align-items: center; justify-content: center; } .step { text-align: center; } .step__num { font-family: var(--font-display); font-size: 3.5rem; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; } .step__title { font-family: var(--font-display); margin-bottom: 0.25rem; } .step__copy { font-size: 0.9rem; } .hero__stats { display: flex; gap: 1.5rem; align-items: center; } .hero__stat { display: flex; flex-direction: column; align-items: center; } .hero__stat-number { font-family: var(--font-display); font-size: 2rem; } .hero__stat-label { font-family: var(--font-mono); font-size: 0.875rem; opacity: 0.8; } .hero__marquee { position: absolute; bottom: 0; left: 0; right: 0; height: 3rem; overflow: hidden; background: rgba(0,0,0,0.05); } .hero__marquee-track { display: flex; gap: 2rem; height: 100%; align-items: center; white-space: nowrap; } .hero__marquee-track span { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; color: var(--text-secondary); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero__marquee-track { animation: marquee 20s linear infinite; } .hero__marquee:hover .hero__marquee-track { animation-play-state: paused; } .card--brutal { background: var(--bg-secondary); border: 2px solid var(--border-default); box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); overflow: hidden; } .card--glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border: 2px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .faq__accordion { border-top: 2px solid var(--border-default); } .faq__item { border-bottom: 1px solid var(--border-default); } .faq__question { width: 100%; text-align: left; padding: 1rem; background: transparent; border: none; font-family: var(--font-display); font-size: 1rem; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); } .faq__panel { padding: 0 1rem; overflow: hidden; max-height: 0; transition: max-height var(--transition-normal) var(--ease-standard); } .faq__panel[hidden] { display: none; } .faq__answer { margin: 1rem 0; line-height: 1.5; } .cta-section { position: relative; overflow: hidden; padding: 4rem 1.5rem; text-align: center; background: var(--bg-primary); color: var(--text-primary); } .cta-section.theme-dark, .theme-dark .cta-section { background: var(--primary); color: var(--secondary); } .cta__title { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 5rem); margin-bottom: 1rem; display: inline-flex; gap: 0; } .cta__letter { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(20px) rotate(4deg); } .cta__accent { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta__copy { max-width: 28rem; margin: 0 auto 1.5rem; font-size: 1.125rem; } .cta__form { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; max-width: 22rem; margin: 0 auto; } .cta__label { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; align-self: flex-start; } .cta__input { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-base); background: var(--bg-secondary); color: var(--text-primary); transition: border-color var(--transition-normal) var(--ease-standard), box-shadow var(--transition-normal) var(--ease-standard); } .cta__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255,59,0,0.2); } .cta__input.valid { border-color: var(--text-success); } .cta__input.invalid { border-color: var(--text-error); } .cta__error { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-error); min-height: 1.25rem; } .cta__note { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.7; } .footer { background: var(--bg-primary); color: var(--text-primary); border-top: 2px solid var(--border-default); padding: 2.5rem 1.5rem; } .theme-dark .footer, .footer.theme-dark { background: var(--secondary); color: var(--text-primary); border-top-color: var(--border-default); } .footer__content { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; } .footer__logo { font-family: var(--font-display); font-size: 2rem; } .footer__nav { display: flex; gap: 2rem; } .footer__col { display: flex; flex-direction: column; gap: 0.5rem; } .footer__heading { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .footer__link { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; } .footer__link:hover, .footer__link:focus-visible { text-decoration: underline; } .footer__theme-btn { background: transparent; border: 2px solid var(--border-default); color: var(--text-primary); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal) var(--ease-standard), box-shadow var(--transition-normal) var(--ease-standard); } .footer__theme-btn:hover, .footer__theme-btn:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); } .footer__theme-btn:active { transform: scale(0.97); } .footer__back-top { margin-top: auto; } .footer__copyright { font-family: var(--font-mono); font-size: 0.75rem; text-align: center; margin-top: 2rem; opacity: 0.7; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .hero__marquee-track { animation: none; } .hero__letter, .cta__letter { opacity: 1; filter: none; transform: none; } .feature-card, .testimonial, .pricing-tier, .step { transform: none !important; } } } ``` script.js /* script.js */ (() => { const htmlEl = document.documentElement; const themeToggleBtn = document.querySelector('.header__theme-toggle'); const footerThemeBtn = document.querySelector('.footer__theme-btn'); const menuBtn = document.querySelector('.header__menu-btn'); const mobileNav = document.getElementById('header-menu'); const ctaForm = document.getElementById('cta-form'); const ctaInput = document.getElementById('cta-email'); const ctaError = ctaForm.querySelector('.cta__error'); const ctaSubmit = ctaForm.querySelector('.cta__submit'); // Theme handling const getStoredTheme = () => localStorage.getItem('theme'); const setTheme = (theme) => { htmlEl.classList.remove('theme-light', 'theme-dark'); htmlEl.classList.add(theme === 'dark' ? 'theme-dark' : 'theme-light'); localStorage.setItem('theme', theme); updateToggleAria(theme); }; const updateToggleAria = (theme) => { const isDark = theme === 'dark'; themeToggleBtn.setAttribute('aria-pressed', isDark); themeToggleBtn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode'); const icon = themeToggleBtn.querySelector('.material-symbols-outlined'); icon.textContent = isDark ? 'light_mode' : 'dark_mode'; if (footerThemeBtn) { footerThemeBtn.setAttribute('aria-pressed', isDark); footerThemeBtn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode'); const ficon = footerThemeBtn.querySelector('.material-symbols-outlined'); ficon.textContent = isDark ? 'light_mode' : 'dark_mode'; } }; const initTheme = () => { const stored = getStoredTheme(); if (stored) { setTheme(stored); } else { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; setTheme(prefersDark ? 'dark' : 'light'); } }; const toggleTheme = () => { const isDark = htmlEl.classList.contains('theme-dark'); setTheme(isDark ? 'light' : 'dark'); }; themeToggleBtn.addEventListener('click', toggleTheme); if (footerThemeBtn) footerThemeBtn.addEventListener('click', toggleTheme); initTheme(); // Mobile menu menuBtn.addEventListener('click', () => { const expanded = menuBtn.getAttribute('aria-expanded') === 'true' || false; menuBtn.setAttribute('aria-expanded', !expanded); mobileNav.setAttribute('aria-expanded', !expanded); }); // FAQ accordion document.querySelectorAll('.faq__question').forEach(btn => { btn.addEventListener('click', () => { const expanded = btn.getAttribute('aria-expanded') === 'true'; // Close all document.querySelectorAll('.faq__question').forEach(b => { b.setAttribute('aria-expanded', 'false'); const panel = document.getElementById(b.getAttribute('aria-controls')); if (panel) panel.hidden = true; }); // Open clicked btn.setAttribute('aria-expanded', !expanded); const panel = document.getElementById(btn.getAttribute('aria-controls')); if (panel) panel.hidden = !expanded; }); }); // IntersectionObserver reveal const revealElements = document.querySelectorAll('.feature-card, .testimonial, .pricing-tier, .step, .hero__content > *'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); } }); }, { threshold: 0.1 }); revealElements.forEach(el => observer.observe(el)); // Hero letter stagger const staggerLetters = (elements, delay = 60) => { elements.forEach((el, i) => { el.style.setProperty('--stagger-delay', `${i * delay}ms`); }); }; const heroLetters = document.querySelectorAll('.hero__letter'); const ctaLetters = document.querySelectorAll('.cta__letter'); if (heroLetters.length) staggerLetters(Array.from(heroLetters), 50); if (ctaLetters.length) staggerLetters(Array.from(ctaLetters), 50); // Blob drift animation const blobs = document.querySelectorAll('.hero__blob'); let lastTime = 0; function animateBlobs(time) { if (!lastTime) lastTime = time; const delta = (time - lastTime) * 0.001; lastTime = time; blobs.forEach((blob, idx) => { const speed = 0.2 + idx * 0.1; const x = Math.sin(time * 0.0002 + idx) * speed * 10; const y = Math.cos(time * 0.00015 + idx) * speed * 10; blob.style.transform = `translate(${x}px, ${y}px)`; }); requestAnimationFrame(animateBlobs); } requestAnimationFrame(animateBlobs); // Parallax (simple) let ticking = false; function onScroll() { if (!ticking) { window.requestAnimationFrame(() => { const scrolled = window.pageYOffset; document.querySelectorAll('[data-parallax]').forEach(el => { const speed = el.getAttribute('data-parallax') || 0.05; const y = scrolled * speed; el.style.transform = `translate3d(0, ${y}px, 0)`; }); ticking = false; }); ticking = true; } } window.addEventListener('scroll', onScroll); // CTA form validation ctaForm.addEventListener('submit', e => { e.preventDefault(); const email = ctaInput.value.trim(); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!email) { showError('Please enter your email address'); return; } if (!emailPattern.test(email)) { showError('Please enter a valid email address'); return; } // Simulate loading ctaSubmit.classList.add('is-loading'); ctaSubmit.disabled = true; setTimeout(() => { ctaSubmit.classList.remove('is-loading'); ctaSubmit.classList.add('is-success'); ctaSubmit.textContent = 'Sent!'; ctaError.textContent = ''; ctaInput.value = ''; setTimeout(() => { ctaSubmit.classList.remove('is-success'); ctaSubmit.textContent = 'Send Kit'; ctaSubmit.disabled = false; }, 2000); }, 1200); }); function showError(msg) { ctaError.textContent = msg; ctaInput.classList.add('invalid'); ctaInput.classList.remove('valid'); } ctaInput.addEventListener('input', () => { if (ctaInput.value.trim() !== '') { ctaInput.classList.remove('invalid'); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (emailPattern.test(ctaInput.value.trim())) { ctaInput.classList.add('valid'); } else { ctaInput.classList.remove('valid'); } } else { ctaInput.classList.remove('valid', 'invalid'); } }); })();