animtext

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GlyphFX - Amazing Text & Letter Animations</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { 'custom-dark-blue': '#0a0a0a', /* Base background */ 'custom-light-blue': '#1c1c1c', /* Section backgrounds */ 'custom-purple': '#8e44ad', 'custom-gold': '#ffb703', 'custom-teal': '#1abc9c', /* Based on demo's button/highlight color */ }, fontFamily: { sans: ['Inter', 'sans-serif'], }, boxShadow: { 'custom-glow': '0 0 15px rgba(255, 183, 3, 0.4), 0 0 30px rgba(255, 183, 3, 0.2)', /* For glowing elements */ } } } } </script> <style> /* Base styles from demo inspiration */ body { background-color: #0a0a0a; /* Dark background from demo */ color: #e0e0e0; /* Light text for dark background */ } /* Specific styles for GlyphFX containers to ensure they have height before animation */ /* This is critical for the visual presentation as elements are split */ .preview-example p, .preview-example h2, .preview-example h3, .preview-example div { min-height: 2.5em; /* Adjust as needed for specific font sizes */ display: flex; /* Flexbox for centering content within min-height */ align-items: center; justify-content: center; text-align: center; /* Add transition to prevent jumpiness on initial load if not animated */ transition: all 0.05s ease-out; } /* Customize scrollbar to match dark theme */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #2c2c2c; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #555; } /* For code blocks */ pre { @apply bg-gray-900 text-gray-50 p-6 rounded-lg overflow-x-auto text-base; border: 1px solid #333; } code { @apply font-mono; } /* Specific adjustments to match demo's glow effect on elements if needed */ .glow-text { text-shadow: 0 0 8px rgba(255, 183, 3, 0.6), 0 0 20px rgba(255, 183, 3, 0.3); } </style> </head> <body class="font-sans antialiased text-gray-200"> <header class="relative overflow-hidden py-32 text-center bg-gradient-to-br from-custom-dark-blue to-black border-b border-gray-800"> <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#222 1px, transparent 1px), radial-gradient(#222 1px, transparent 1px); background-size: 40px 40px; background-position: -19px -19px, 1px 1px;"></div> <div class="relative z-10 container mx-auto px-6"> <h1 class="text-7xl font-extrabold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-custom-gold to-yellow-300 cssanimation glow-text" gf__sequence="ca__fx-rollIn" gf__delay="20"> GlyphFX </h1> <p class="text-4xl font-light mb-16 cssanimation" gf__delay="200" gf__word="ca__fx-fadeInUp"> Amazing Text & Letter Animations </p> <div class="flex flex-col sm:flex-row justify-center items-center space-y-6 sm:space-y-0 sm:space-x-8"> <a href="https://github.com/yesiamrocks/GlyphFX" target="_blank" class="inline-flex items-center px-10 py-4 rounded-full text-xl font-semibold bg-custom-teal text-gray-900 hover:bg-opacity-90 transition-all duration-300 transform hover:-translate-y-1 shadow-lg border border-custom-teal hover:shadow-custom-glow"> <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.471.085.678-.231.678-.518 0-.256-.007-1.002-.011-1.978-2.775.602-3.361-1.33-3.361-1.33-.45-.927-1.091-1.178-1.091-1.178-.73-.497.054-.488.054-.488.803.056 1.222.827 1.222.827.715 1.221 1.873.87 2.332.665.072-.51.278-.87.508-1.07-1.778-.202-3.64-.884-3.64-3.953 0-.877.31-1.598.823-2.164-.083-.202-.357-1.017.07-2.129 0 0 .67-.215 2.2.82.644-.18 1.325-.27 2.008-.27.683 0 1.365.09 2.008.27 1.53-1.035 2.2-.82 2.2-.82.428 1.112.155 1.927.07 2.129.513.566.823 1.287.823 2.164 0 3.079-1.865 3.748-3.645 3.949.28.24.538.736.538 1.481 0 1.07-.01 1.933-.01 2.195 0 .285.206.607.683.501C19.135 20.2 22 16.447 22 12.017 22 6.484 17.522 2 12 2z" clip-rule="evenodd" /></svg> Star on GitHub </a> <a href="#live-preview" class="inline-flex items-center px-10 py-4 rounded-full text-xl font-semibold bg-transparent text-white border-2 border-white hover:border-custom-teal hover:text-custom-teal transition-all duration-300 transform hover:-translate-y-1 shadow-lg"> See Live Demos </a> </div> </div> </header> <section id="features" class="py-24 bg-custom-dark-blue border-b border-gray-800"> <div class="container mx-auto px-6 text-center"> <h2 class="text-5xl font-bold text-gray-50 mb-16">Key Features</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-gold mb-4">Highly Customizable</h3> <p class="text-lg text-gray-300">Control animations directly with HTML attributes for precise effects.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-gold mb-4">Letters, Words & Lines</h3> <p class="text-lg text-gray-300">Animate text unit by unit: letter-by-letter, word-by-word, or line-by-line.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-gold mb-4">Custom CSS Animation Classes</h3> <p class="text-lg text-gray-300">Utilize any `cssanimation` class for robust and versatile text effects.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-gold mb-4">Sequential Logic</h3> <p class="text-lg text-gray-300">Units wait for the previous one to complete, creating smooth flows.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-gold mb-4">Random & Reverse Effects</h3> <p class="text-lg text-gray-300">Get creative with animation order, including randomized and reverse sequences.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-gold mb-4">Smart Handling</h3> <p class="text-lg text-gray-300">Safely handles whitespace and provides animation class fallbacks.</p> </div> </div> </div> </section> <section id="live-preview" class="py-24 bg-custom-dark-blue border-b border-gray-800"> <div class="container mx-auto px-6 text-center"> <h2 class="text-5xl font-bold text-gray-50 mb-16">Live Preview</h2> <p class="text-xl text-gray-300 mb-12">Experience the magic of GlyphFX in action!</p> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg mb-10 border border-gray-700"> <h3 class="text-2xl font-semibold text-gray-100 mb-6 border-b pb-4 border-gray-700">Letter-by-Letter (Sequence)</h3> <p class="text-4xl font-extrabold text-custom-teal cssanimation" gf__sequence="ca__fx-fadeIn" gf__delay="50" gf__base-duration="500"> Hello GlyphFX! </p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg mb-10 border border-gray-700"> <h3 class="text-2xl font-semibold text-gray-100 mb-6 border-b pb-4 border-gray-700">Word-by-Word Animation</h3> <h2 class="text-4xl font-extrabold text-custom-gold cssanimation" gf__word="ca__fx-bounceInTop ca__fx-fadeInBottom ca__fx-slideInLeft" gf__delay="100 200 300" gf__base-duration="600"> Each word animates uniquely </h2> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg mb-10 border border-gray-700"> <h3 class="text-2xl font-semibold text-gray-100 mb-6 border-b pb-4 border-gray-700">Line-by-Line Animation</h3> <p class="text-4xl font-extrabold text-custom-purple cssanimation" gf__line="ca__fx-fadeIn ca__fx-flipX" gf__delay="150 250" gf__base-duration="700"> First line animates beautifully.<br> Second line follows with style. </p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg mb-10 border border-gray-700"> <h3 class="text-2xl font-semibold text-gray-100 mb-6 border-b pb-4 border-gray-700">Randomized Letter Entry</h3> <p class="text-4xl font-extrabold text-custom-teal cssanimation" gf__random="ca__fx-rubberBand" gf__delay="70" gf__base-duration="550"> Randomized text! </p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg mb-10 border border-gray-700"> <h3 class="text-2xl font-semibold text-gray-100 mb-6 border-b pb-4 border-gray-700">Reverse Letter Animation</h3> <p class="text-4xl font-extrabold text-custom-gold cssanimation" gf__reverse="ca__fx-moveFromBottom" gf__delay="80" gf__base-duration="600"> Flowing backwards </p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg mb-10 border border-gray-700"> <h3 class="text-2xl font-semibold text-gray-100 mb-6 border-b pb-4 border-gray-700">Dot Separated Lines</h3> <p class="text-4xl font-extrabold text-custom-purple cssanimation" gf__line="ca__fx-lightSpeedIn" gf__separator="dot" gf__delay="100" gf__base-duration="750"> Step 1. Step 2. Step 3. </p> </div> <div class="mt-20"> <p class="text-2xl text-gray-300 mb-8"> Want to generate animation code for your own text? </p> <a href="https://glyphfx-text-sparkle.lovable.app/preview-tool.html" target="_blank" class="inline-flex items-center px-10 py-4 rounded-full text-xl font-semibold bg-custom-teal text-gray-900 hover:bg-opacity-90 transition-all duration-300 transform hover:-translate-y-1 shadow-lg border border-custom-teal hover:shadow-custom-glow"> Try the Live Preview Tool </a> </div> </div> </section> <section class="py-20 bg-gradient-to-br from-black to-custom-dark-blue text-white text-center border-b border-gray-800"> <div class="container mx-auto px-6"> <h3 class="text-5xl font-bold mb-6 text-gray-50">Powered by CSSAnimation</h3> <p class="text-2xl mb-8 text-gray-300"> GlyphFX leverages the robust animation classes from <a href="https://github.com/yesiamrocks/cssanimation" target="_blank" class="text-custom-gold hover:text-yellow-300 font-semibold underline transition duration-300">@hellouxpavel/cssanimation</a> to deliver stunning text effects. </p> <p class="text-xl mb-12 text-gray-400"> Make sure to include CSSAnimation in your project for GlyphFX to work its magic! </p> <a href="https://github.com/yesiamrocks/cssanimation" target="_blank" class="inline-flex items-center px-10 py-4 rounded-full text-xl font-semibold bg-gray-700 text-gray-50 hover:bg-gray-600 transition-all duration-300 transform hover:-translate-y-1 shadow-lg border border-gray-600"> Explore CSSAnimation </a> </div> </section> <section id="developer-benefits" class="py-24 bg-custom-dark-blue border-b border-gray-800"> <div class="container mx-auto px-6 text-center"> <h2 class="text-5xl font-bold text-gray-50 mb-16">Why Developers Love GlyphFX</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg text-left border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-purple mb-4">Simplicity & Speed</h3> <p class="text-lg text-gray-300">Achieve complex text animations with minimal code and no external dependencies (besides CSSAnimation).</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg text-left border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-purple mb-4">Granular Control</h3> <p class="text-lg text-gray-300">Fine-tune animation delays, durations, and effects directly within your HTML attributes.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg text-left border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-purple mb-4">Seamless Integration</h3> <p class="text-lg text-gray-300">Works effortlessly with your existing projects, whether using NPM or plain HTML.</p> </div> <div class="bg-custom-light-blue p-8 rounded-xl shadow-lg text-left border border-gray-700 transition duration-300 transform hover:-translate-y-2 hover:shadow-xl"> <h3 class="text-3xl font-semibold text-custom-purple mb-4">Creative Freedom</h3> <p class="text-lg text-gray-300">Combine various animation classes and delays to craft unique, eye-catching text effects.</p> </div> </div> </div> </section> <section id="how-to-use" class="py-24 bg-custom-dark-blue border-b border-gray-800"> <div class="container mx-auto px-6 text-left"> <h2 class="text-5xl font-bold text-gray-50 mb-16 text-center">How to Use</h2> <h3 class="text-3xl font-semibold text-custom-gold mb-6">1. Installation</h3> <p class="text-lg text-gray-300 mb-4">Via NPM:</p> <pre><code>npm install glyphfx @hellouxpavel/cssanimation</code></pre> <p class="text-lg text-gray-300 mb-4">For plain HTML (include just before your closing <code class="font-mono"></body></code> tag):</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/@hellouxpavel/cssanimation@latest/dist/cssanimation.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/glyphfx@latest/dist/glyphfx.min.js"></script></code></pre> <h3 class="text-3xl font-semibold text-custom-gold mt-16 mb-6">2. JS Initialization</h3> <p class="text-lg text-gray-300 mb-4">In your JavaScript file (if using NPM):</p> <pre><code>import glyphfx from "glyphfx"; glyphfx.init(); // or with debug mode glyphfx.init({ dev: true });</code></pre> <p class="text-lg text-gray-300 mb-4">If using plain HTML, the <code class="font-mono">glyphfx.init()</code> call will automatically run after the script loads.</p> <h3 class="text-3xl font-semibold text-custom-gold mt-16 mb-6">3. HTML Usage</h3> <p class="text-lg text-gray-300 mb-6">Every animated text block needs the <code class="font-mono">.cssanimation</code> class along with a <code class="font-mono">gf__*</code> attribute to define how it animates.</p> <h4 class="text-2xl font-semibold text-gray-100 mb-4">Letter-by-Letter Animation (<code class="font-mono">gf__sequence</code>, <code class="font-mono">gf__random</code>, <code class="font-mono">gf__reverse</code>)</h4> <pre><code><h1 class="cssanimation" gf__sequence="ca__fx-fadeIn">Letters Animate</h1> <p class="cssanimation" gf__random="ca__fx-bounceInTop">Randomized entry!</p> <h3 class="cssanimation" gf__reverse="ca__fx-moveFromTop">Backwards Flow</h3></code></pre> <h4 class="text-2xl font-semibold text-gray-100 mb-4">Word-by-Word Animation (<code class="font-mono">gf__word</code>)</h4> <pre><code><h2 class="cssanimation" gf__word="ca__fx-fadeIn"> Each word animates uniquely </h2></code></pre> <h4 class="text-2xl font-semibold text-gray-100 mb-4">Line-by-Line Animation (<code class="font-mono">gf__line</code>)</h4> <pre><code><p class="cssanimation" gf__line="ca__fx-fadeIn"> First line<br /> Second line<br /> Third line </p> <p class="cssanimation" gf__line="ca__fx-fadeIn" gf__separator="dot"> Step 1. Step 2. Step 3. </p></code></pre> <h4 class="text-2xl font-semibold text-gray-100 mb-4">Custom Classes & Delays</h4> <pre><code><h2 class="cssanimation" gf__word="ca__fx-fadeIn ca__fx-moveFromTop ca__fx-moveFromBottom ca__fx-moveFromRight" gf__delay="0 200 400"> Each word animates uniquely </h2></code></pre> <h4 class="text-2xl font-semibold text-gray-100 mb-4">Base Duration (<code class="font-mono">gf__base-duration</code>)</h4> <pre><code><h3 class="cssanimation" gf__sequence="ca__fx-fadeIn" gf__base-duration="750"> Global base duration </h3></code></pre> </div> </section> <section id="developer-tips" class="py-24 bg-custom-dark-blue border-b border-gray-800"> <div class="container mx-auto px-6 text-left"> <h2 class="text-5xl font-bold text-gray-50 mb-16 text-center">Developer Tips</h2> <ul class="space-y-6"> <li class="bg-custom-light-blue p-8 rounded-lg shadow-md border-l-4 border-custom-teal"> <p class="text-xl text-gray-300"><strong class="text-gray-50">Required Class:</strong> The <code class="font-mono">.cssanimation</code> class is always necessary for baseline styling and to activate text animations.</p> </li> <li class="bg-custom-light-blue p-8 rounded-lg shadow-md border-l-4 border-custom-teal"> <p class="text-xl text-gray-300"><strong class="text-gray-50">Repeating Values:</strong> You can provide fewer classes or delay values than units; the last value will simply repeat for the remaining units, making it easy to apply a pattern.</p> </li> <li class="bg-custom-light-blue p-8 rounded-lg shadow-md border-l-4 border-custom-teal"> <p class="text-xl text-gray-300"><strong class="text-gray-50">Skipped Elements:</strong> If you pass more classes or values than needed, the extra elements are skipped, and a warning might be logged to your console to help with debugging.</p> </li> <li class="bg-custom-light-blue p-8 rounded-lg shadow-md border-l-4 border-custom-teal"> <p class="text-xl text-gray-300"><strong class="text-gray-50">Safe Parsing:</strong> Delay and duration values are parsed safely; non-numeric strings will fall back to default behaviors to prevent errors.</p> </li> <li class="bg-custom-light-blue p-8 rounded-lg shadow-md border-l-4 border-custom-teal"> <p class="text-xl text-gray-300"><strong class="text-gray-50">Animation Duration Precedence:</strong> Duration is determined in this order: <code class="font-mono">gf__base-duration</code> > CSS-detected duration > internal default.</p> </li> </ul> </div> </section> <footer class="bg-gray-950 text-gray-400 py-12 text-center border-t border-gray-800"> <div class="container mx-auto px-6"> <p class="mb-6 text-lg">© 2025 GlyphFX. All rights reserved. Made with <span class="text-red-500">&hearts;</span> by yesiamrocks.</p> <div class="flex justify-center space-x-8 text-xl"> <a href="https://github.com/yesiamrocks/GlyphFX" target="_blank" class="hover:text-blue-400 transition duration-300">GitHub</a> <a href="https://www.npmjs.com/package/glyphfx" target="_blank" class="hover:text-blue-400 transition duration-300">NPM</a> <a href="https://github.com/yesiamrocks/cssanimation" target="_blank" class="hover:text-blue-400 transition duration-300">CSSAnimation</a> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/@hellouxpavel/cssanimation@latest/dist/cssanimation.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/glyphfx@latest/dist/glyphfx.min.js"></script> <script> // Initialize GlyphFX after the page loads document.addEventListener('DOMContentLoaded', () => { glyphfx.init(); }); </script> </body> </html>