{"id":534,"date":"2026-03-25T00:00:14","date_gmt":"2026-03-25T00:00:14","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=534"},"modified":"2026-04-06T08:40:21","modified_gmt":"2026-04-06T08:40:21","slug":"animated-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/bn\/animated-text-generator\/","title":{"rendered":"Animated Text Generator \u2013 Animate Instantly"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<!-- START OF FILE Animated Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .at-tool-wrapper {\r\n        \/* TYPOGRAPHY *\/\r\n        --primary-font: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* THEME PALETTE - ANIMATION \/ KINETIC *\/\r\n        --theme-panel: rgba(10, 8, 18, 0.95); \r\n        --theme-panel-hover: rgba(15, 12, 25, 0.98);\r\n        --theme-border: rgba(139, 92, 246, 0.4); \r\n        \r\n        \/* ANIMATION ACCENTS *\/\r\n        --anim-cyan: #00f0ff;\r\n        --anim-purple: #8b5cf6;\r\n        --anim-pink: #ec4899;\r\n        --anim-blue: #3b82f6;\r\n        --void-dark: #05030a;\r\n        --text-bright: #e8e6ff;\r\n        --text-muted: #9b8fb5;\r\n        \r\n        \/* GRADIENTS *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-anim: linear-gradient(135deg, #00f0ff 0%, #8b5cf6 50%, #ec4899 100%);\r\n        --grad-motion: linear-gradient(90deg, #ec4899, #8b5cf6, #00f0ff);\r\n        --grad-dark: linear-gradient(180deg, rgba(10,8,18,0.9) 0%, rgba(5,3,10,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-anim: 0 0 25px rgba(139, 92, 246, 0.5);\r\n        --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.4);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.85);\r\n        --shadow-card: 0 10px 35px rgba(0,0,0,0.6);\r\n        --glass-blur: blur(16px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        \r\n        \/* MAINTAINED MASTER BACKGROUND *\/\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .at-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES *\/\r\n    .at-container {\r\n        max-width: 1250px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 45px 24px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .at-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* TITLE STYLES - MOTION KINETIC *\/\r\n    .at-main-title {\r\n        font-family: var(--body-font);\r\n        font-size: 3.3rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 12px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: 3px 3px 0px rgba(0,0,0,0.8), 0 0 20px rgba(139, 92, 246, 0.5);\r\n        max-width: 950px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 14px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .at-main-title i {\r\n        color: var(--anim-cyan);\r\n        text-shadow: var(--glow-cyan);\r\n        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;\r\n        animation: at-float 3s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes at-float {\r\n        0%, 100% { transform: translateY(0) rotate(0deg); }\r\n        25% { transform: translateY(-4px) rotate(-8deg); }\r\n        75% { transform: translateY(2px) rotate(5deg); }\r\n    }\r\n    \r\n    .at-main-title:hover i {\r\n        transform: scale(1.3) rotate(360deg);\r\n        filter: drop-shadow(0 0 15px var(--anim-cyan));\r\n        animation: none;\r\n        color: var(--anim-pink);\r\n    }\r\n\r\n    .at-main-title:hover {\r\n        letter-spacing: 8px;\r\n        text-shadow: 3px 3px 0 #000, 0 0 30px var(--anim-purple), 0 0 50px rgba(0, 240, 255, 0.4);\r\n    }\r\n    \r\n    .at-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -16px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 100px;\r\n        height: 4px;\r\n        background: var(--grad-anim);\r\n        box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);\r\n        border-radius: 2px;\r\n        transition: width 0.5s ease, opacity 0.3s;\r\n        background-size: 200% 100%;\r\n        animation: at-gradient-flow 3s ease infinite;\r\n    }\r\n    \r\n    @keyframes at-gradient-flow {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n    \r\n    .at-main-title:hover::after { width: 50%; opacity: 1; }\r\n    \r\n    .at-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.15rem;\r\n        color: rgba(232, 230, 255, 0.8);\r\n        max-width: 800px;\r\n        margin: 35px auto 40px auto;\r\n        padding: 0 15px;\r\n        font-weight: 500;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 6px rgba(0,0,0,0.7);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .at-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--theme-border); \r\n        border-top-width: 5px;\r\n        border-top-color: var(--anim-cyan);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 40px rgba(139, 92, 246, 0.06); \r\n        border-radius: 20px;\r\n        position: relative;\r\n        overflow: visible;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .at-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -1px; left: 25%; right: 25%; height: 2px;\r\n        background: var(--grad-motion);\r\n        border-radius: 2px;\r\n        box-shadow: var(--glow-cyan);\r\n        transition: all 0.6s ease;\r\n    }\r\n    \r\n    .at-generator-card:hover::before { left: 10%; right: 10%; }\r\n\r\n    \/* ASYMMETRIC CONTROLS LAYOUT - NEW DESIGN *\/\r\n    .at-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 2px solid rgba(139, 92, 246, 0.2);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* ENHANCED INPUT SECTION - FULL BOX *\/\r\n    .at-input-section {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .at-enhanced-input-wrapper {\r\n        background: rgba(8, 5, 15, 0.7);\r\n        border: 2px solid rgba(139, 92, 246, 0.3);\r\n        border-radius: 14px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(0, 240, 255, 0.15);\r\n        position: relative;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .at-enhanced-input-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139, 92, 246, 0.04) 3px, rgba(139, 92, 246, 0.04) 6px);\r\n        pointer-events: none;\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .at-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--anim-purple);\r\n        box-shadow: inset 0 0 25px rgba(139, 92, 246, 0.15), 0 0 18px rgba(0, 240, 255, 0.3);\r\n    }\r\n    \r\n    .at-text-input {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-height: 150px !important;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: 400 !important;\r\n        font-size: 1.6rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.8);\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n        line-height: 1.6;\r\n        position: relative;\r\n        z-index: 2;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .at-text-input::placeholder {\r\n        color: rgba(0, 240, 255, 0.35);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* TOOLBAR *\/\r\n    .at-input-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        background: rgba(8, 5, 15, 0.85);\r\n        padding: 16px 20px;\r\n        border-top: 1px solid rgba(139, 92, 246, 0.2);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .at-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.04);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 10px 15px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.72rem;\r\n        font-weight: 700;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .at-toolbar-btn:hover {\r\n        background: rgba(0, 240, 255, 0.15);\r\n        color: var(--anim-cyan);\r\n        border-color: var(--anim-cyan);\r\n        box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .at-toolbar-btn:hover i { transform: translateY(-3px); }\r\n    .at-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .at-preset-select {\r\n        background: rgba(236, 72, 153, 0.08);\r\n        color: var(--anim-pink);\r\n        border: 1px solid rgba(236, 72, 153, 0.3);\r\n        padding: 10px 15px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.72rem;\r\n        font-weight: 800;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        max-width: 240px;\r\n        width: 100%;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' fill='%23ec4899' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 14px center;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .at-preset-select:hover, .at-preset-select:focus {\r\n        background-color: rgba(236, 72, 153, 0.2);\r\n        border-color: var(--anim-pink);\r\n        box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);\r\n    }\r\n    \r\n    .at-preset-select option { background: var(--void-dark); color: #e8e6ff; }\r\n\r\n    \/* SETTINGS SECTION *\/\r\n    .at-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 20px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .at-settings-section > div {\r\n        background: rgba(8, 5, 15, 0.65);\r\n        border: 1px solid rgba(139, 92, 246, 0.2);\r\n        border-radius: 14px;\r\n        padding: 22px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .at-settings-section > div:hover {\r\n        border-color: rgba(0, 240, 255, 0.3);\r\n        background: rgba(10, 6, 20, 0.8);\r\n    }\r\n\r\n    .at-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: rgba(255,255,255,0.85);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        margin-bottom: 14px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px dashed rgba(255,255,255,0.1);\r\n    }\r\n    \r\n    .at-panel-label i {\r\n        color: var(--anim-purple);\r\n        margin-right: 10px;\r\n        font-size: 1rem;\r\n        text-shadow: var(--glow-anim);\r\n    }\r\n\r\n    .at-grid-options {\r\n        display: grid;\r\n        gap: 10px;\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .at-option-btn {\r\n        background: rgba(15, 10, 25, 0.5);\r\n        border: 1px solid rgba(139, 92, 246, 0.15);\r\n        padding: 14px 8px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 10px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .at-option-btn i { font-size: 1.2rem; transition: var(--transition-ui); }\r\n\r\n    .at-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(139,92,246,0.15), transparent);\r\n        transform: skewX(-15deg);\r\n        transition: left 0.5s ease;\r\n    }\r\n\r\n    .at-option-btn:hover {\r\n        background: rgba(139, 92, 246, 0.12);\r\n        border-color: rgba(139, 92, 246, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 6px 15px rgba(0,0,0,0.3), 0 0 10px rgba(0, 240, 255, 0.2);\r\n    }\r\n    \r\n    .at-option-btn:hover::before { left: 100%; }\r\n\r\n    .at-option-btn:hover i { transform: scale(1.2) rotate(8deg); color: var(--anim-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); }\r\n\r\n    .at-option-btn.active { \r\n        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.1));\r\n        color: #fff; \r\n        border-color: var(--anim-cyan);\r\n        box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 12px rgba(139, 92, 246, 0.15);\r\n    }\r\n    \r\n    .at-option-btn.active i {\r\n        color: var(--anim-cyan);\r\n        text-shadow: 0 0 12px rgba(0, 240, 255, 0.8);\r\n        animation: at-pulse 2s infinite;\r\n    }\r\n    \r\n    @keyframes at-pulse {\r\n        0%, 100% { transform: scale(1); }\r\n        50% { transform: scale(1.15); }\r\n    }\r\n\r\n    \/* RESULTS AREA - 3 CARDS PER ROW *\/\r\n    .at-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n        background: linear-gradient(180deg, var(--theme-panel) 0%, rgba(5,3,10,0.98) 100%);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .at-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* CARD REDESIGN - MOTION KINETIC *\/\r\n    .at-result-card {\r\n        background: rgba(12, 8, 22, 0.9);\r\n        border: 1px solid rgba(139, 92, 246, 0.25);\r\n        border-radius: 14px;\r\n        padding: 20px 24px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        min-height: 135px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .at-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: var(--grad-motion);\r\n        transition: width 0.35s ease;\r\n        opacity: 0.85;\r\n    }\r\n    \r\n    .at-result-card:hover {\r\n        transform: translateY(-6px) scale(1.01);\r\n        box-shadow: -6px 18px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(139, 92, 246, 0.2);\r\n        border-color: var(--anim-cyan);\r\n        background: rgba(15, 10, 28, 0.95);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .at-result-card:hover::after { width: 4px; }\r\n\r\n    .at-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 10px;\r\n        padding-bottom: 8px;\r\n    }\r\n    \r\n    .at-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.8rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .at-card-title i {\r\n        color: var(--anim-pink);\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    }\r\n\r\n    .at-result-card:hover .at-card-title {\r\n        color: #fff;\r\n        text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);\r\n    }\r\n    \r\n    .at-result-card:hover .at-card-title i {\r\n        transform: rotate(180deg) scale(1.2);\r\n        color: var(--anim-cyan);\r\n        text-shadow: 0 0 12px rgba(0, 240, 255, 0.7);\r\n    }\r\n\r\n    .at-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.04);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        color: var(--text-bright);\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .at-card-copy-btn i { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }\r\n    \r\n    .at-card-copy-btn:hover {\r\n        background: rgba(0, 240, 255, 0.2);\r\n        border-color: var(--anim-cyan);\r\n        color: var(--anim-cyan);\r\n        box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);\r\n        transform: rotate(-5deg) scale(1.05);\r\n    }\r\n    \r\n    .at-card-copy-btn:hover i { transform: scale(1.2) translateY(-3px); }\r\n    .at-card-copy-btn:active { transform: scale(0.9) rotate(0deg); }\r\n\r\n    .at-card-preview {\r\n        font-size: 1.45rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 2;\r\n        padding: 6px 0; \r\n        transition: var(--transition-fast);\r\n        flex-grow: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        \r\n        \/* CRITICAL FIX FOR LARGE TEXT *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 1px 1px 3px rgba(0,0,0,0.7);\r\n        line-height: 1.5;\r\n        max-height: 160px;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .at-result-card:hover .at-card-preview {\r\n        color: var(--text-bright);\r\n        text-shadow: 0 0 12px rgba(139, 92, 246, 0.5);\r\n    }\r\n\r\n    \/* LOAD MORE - MOTION BUTTON *\/\r\n    .at-btn-load {\r\n        background: transparent;\r\n        color: var(--text-bright);\r\n        border: 2px solid var(--anim-purple);\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 10px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 1.5px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        overflow: hidden;\r\n        box-shadow: 0 6px 15px rgba(0,0,0,0.6);\r\n        animation: at-cta-pulse 3s infinite;\r\n    }\r\n    \r\n    @keyframes at-cta-pulse {\r\n        0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5), 0 6px 15px rgba(0,0,0,0.6); }\r\n        70% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0), 0 6px 15px rgba(0,0,0,0.6); }\r\n        100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0), 0 6px 15px rgba(0,0,0,0.6); }\r\n    }\r\n    \r\n    .at-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.25), transparent);\r\n        transition: left 0.6s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .at-btn-load:hover { \r\n        background: rgba(139, 92, 246, 0.15); \r\n        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3), var(--glow-cyan);\r\n        transform: translateY(-4px);\r\n        border-color: var(--anim-cyan);\r\n    }\r\n    \r\n    .at-btn-load:hover::before { left: 100%; }\r\n    \r\n    .at-btn-load:hover i { transform: translateY(6px); color: var(--anim-cyan); }\r\n    .at-btn-load:active { transform: translateY(0) scale(0.98); }\r\n\r\n    \/* TOAST *\/\r\n    .at-toast {\r\n        visibility: hidden;\r\n        background: rgba(5, 3, 10, 0.98);\r\n        backdrop-filter: var(--glass-blur);\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(15px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 10px;\r\n        border: 1px solid var(--anim-purple);\r\n        border-left: 4px solid var(--anim-cyan);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), 0 0 20px rgba(0, 240, 255, 0.3);\r\n        letter-spacing: 0.8px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .at-toast i { color: var(--anim-cyan); font-size: 1.2rem; text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); }\r\n    .at-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    \/* RESPONSIVE DESIGN *\/\r\n    @media (max-width: 950px) {\r\n        .at-main-title { font-size: 2.8rem; } \r\n        .at-result-list { grid-template-columns: repeat(2, 1fr); }\r\n        .at-settings-section { flex-direction: column; }\r\n        .at-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .at-result-list { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .at-container { padding: 30px 15px !important; }\r\n        .at-results-area { padding: 30px 15px; }\r\n        .at-controls-wrapper { padding: 20px; gap: 15px; }\r\n        .at-text-input { min-height: 110px !important; font-size: 1.3rem !important; }\r\n        .at-input-toolbar { flex-direction: column; align-items: stretch; }\r\n        .at-preset-select { max-width: 100%; }\r\n        .at-result-list { grid-template-columns: 1fr; gap: 15px; }\r\n        .at-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; }\r\n        .at-main-title { font-size: 2.1rem; letter-spacing: 1px; }\r\n        .at-subtitle { font-size: 0.95rem; }\r\n        .at-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"at-tool-wrapper\" id=\"at-anim-text-tool\">\r\n    <div class=\"at-container at-hero-content-wrapper\">\r\n        <h1 class=\"at-main-title\"><i class=\"fa-solid fa-film\"><\/i> Animated Text Generator \u2013 Animate Instantly<\/h1>\r\n        <p class=\"at-subtitle\">Bring your words to life with frame-based Unicode animations, symbol motion effects, and flowing text patterns. Create kinetic typography that moves, bounces, and flows in any chat or platform.<\/p>\r\n        \r\n        <div class=\"at-generator-card\">\r\n            <div class=\"at-controls-wrapper\">\r\n                \r\n                <!-- INPUT SECTION - FULL BOX -->\r\n                <div class=\"at-input-section\">\r\n                    <div class=\"at-enhanced-input-wrapper\">\r\n                        <textarea class=\"at-text-input\" id=\"atInputText\" placeholder=\"Type your text to animate...\"><\/textarea>\r\n                        \r\n                        <div class=\"at-input-toolbar\">\r\n                            <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\r\n                                <button class=\"at-toolbar-btn\" id=\"atBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"at-toolbar-btn\" id=\"atBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                                <button class=\"at-toolbar-btn\" id=\"atBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            \r\n                            <select class=\"at-preset-select\" id=\"atPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Motion Presets<\/option>\r\n                                <option value=\"Loading... Please Wait\">Loading State<\/option>\r\n                                <option value=\">>> Processing Request <<<\">Processing<\/option>\r\n                                <option value=\">>> Uploading File...\">File Upload<\/option>\r\n                                <option value=\"Syncing Data... 100%\">Data Sync<\/option>\r\n                                <option value=\">>> CONNECTED SUCCESSFULLY <<<\">Connected<\/option>\r\n                                <option value=\"Status: ONLINE | Ping: 2ms\">System Status<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- SETTINGS SECTION -->\r\n                <div class=\"at-settings-section\">\r\n                    <div>\r\n                        <div class=\"at-panel-label\"><i class=\"fa-solid fa-play\"><\/i> Animation Mode<\/div>\r\n                        <div class=\"at-grid-options\">\r\n                            <button class=\"at-option-btn mode-btn active\" data-val=\"FrameAnim\">\r\n                                <i class=\"fa-solid fa-film\"><\/i> Frame Anim\r\n                            <\/button>\r\n                            <button class=\"at-option-btn mode-btn\" data-val=\"SymbolMotion\">\r\n                                <i class=\"fa-solid fa-arrows-rotate\"><\/i> Symbol Motion\r\n                            <\/button>\r\n                            <button class=\"at-option-btn mode-btn\" data-val=\"WaveFlow\">\r\n                                <i class=\"fa-solid fa-water\"><\/i> Wave Flow\r\n                            <\/button>\r\n                            <button class=\"at-option-btn mode-btn\" data-val=\"GothicAnim\">\r\n                                <i class=\"fa-solid fa-church\"><\/i> Gothic Anim\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"at-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Motion Style<\/div>\r\n                        <div class=\"at-grid-options\">\r\n                            <button class=\"at-option-btn style-btn active\" data-val=\"Bounce\">\r\n                                <i class=\"fa-solid fa-basketball\"><\/i> Bounce\r\n                            <\/button>\r\n                            <button class=\"at-option-btn style-btn\" data-val=\"Blink\">\r\n                                <i class=\"fa-solid fa-eye\"><\/i> Blink\r\n                            <\/button>\r\n                            <button class=\"at-option-btn style-btn\" data-val=\"Flow\">\r\n                                <i class=\"fa-solid fa-wind\"><\/i> Flow\r\n                            <\/button>\r\n                            <button class=\"at-option-btn style-btn\" data-val=\"Loop\">\r\n                                <i class=\"fa-solid fa-repeat\"><\/i> Loop\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"at-results-area\">\r\n                <div class=\"at-result-list\" id=\"atResultList\"><\/div>\r\n                <!-- LOAD MORE BELOW 9 CARDS -->\r\n                <button class=\"at-btn-load\" id=\"atLoadMoreBtn\"><span>Generate More Frames<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"atToast\" class=\"at-toast\"><i class=\"fa-solid fa-film\"><\/i> Animation Frame Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Scoped container\r\n    const wrapper = document.getElementById('at-anim-text-tool');\r\n    const inputEl = wrapper.querySelector('#atInputText');\r\n    const resultList = wrapper.querySelector('#atResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#atLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#atToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#atBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#atBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#atBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#atPresetSelect');\r\n\r\n    let currentMode = 'FrameAnim';\r\n    let currentStyle = 'Bounce';\r\n    let limit = 9;\r\n    const LOAD_INCREMENT = 9;\r\n\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const gothicArr = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\";\r\n    const boldArr = \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\";\r\n    const wideArr = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\";\r\n\r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    \/\/ Frame animations - arrays of frames\r\n    const frameAnim = {\r\n        arrow: ['\u2192', '\u2198', '\u2193', '\u2199', '\u2190', '\u2196', '\u2191', '\u2197'],\r\n        wave: ['~', '\u2248', '~', '\u2248', '~', '\u2248', '~', '\u2248'],\r\n        spin: ['\u25e2', '\u25e3', '\u25e4', '\u25e5'],\r\n        dots: ['\u28fe', '\u28fd', '\u28fb', '\u28bf', '\u287f', '\u28df', '\u28ef', '\u28f7'],\r\n        bounce: ['\u25b2', '\u25bc'],\r\n        pulse: ['\u25cf', '\u25cb', '\u25c9', '\u25ce'],\r\n        flow: ['\u224b', '\u224a', '\u2249', '\u2248'],\r\n        blink: ['\u25a0', '\u25a1', '\u25aa', '\u25ab']\r\n    };\r\n\r\n    const symbols = {\r\n        wave: ['\u3030\ufe0f', '\u3030\ufe0f', '\u224b', '\u2248', '~'],\r\n        arrow: ['\u2192', '\u2190', '\u2191', '\u2193', '\u2194', '\u2195'],\r\n        flow: ['\u00bb', '\u00ab', '\u203a', '\u2039', '\u00bb\u00bb', '\u00ab\u00ab'],\r\n        bounce: ['\u25b2', '\u25bc', '\u25c4', '\u25ba'],\r\n        spin: ['\u27f3', '\u27f2', '\u21bb', '\u21ba', '\u21bc', '\u21bd'],\r\n        pulse: ['\u25c9', '\u25ce', '\u25cf', '\u25cb', '\u25d0', '\u25d1']\r\n    };\r\n\r\n    \/\/ Copy Function\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\";\r\n        textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\";\r\n        textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea);\r\n        textArea.focus();\r\n        textArea.select();\r\n        \r\n        try {\r\n            document.execCommand('copy');\r\n            showToast(btnElement);\r\n        } catch (err) {\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(text).then(() => showToast(btnElement));\r\n            }\r\n        }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            const originalHTML = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--anim-cyan)';\r\n            btn.style.borderColor = 'var(--anim-cyan)';\r\n            btn.style.color = '#000';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = originalHTML;\r\n                btn.style.background = '';\r\n                btn.style.borderColor = '';\r\n                btn.style.color = '';\r\n            }, 2000);\r\n        }\r\n        \r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 2000);\r\n    };\r\n\r\n    \/\/ Generate 120 configurations\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Frame Loader', 'Bounce Wave', 'Flow Pulse', 'Spin Cycle', \r\n            'Arrow Stream', 'Dots Matrix', 'Kinetic Type', 'Motion Blur',\r\n            'Glide Effect', 'Shift Loop', 'Ripple Frame', 'Slide Show',\r\n            'Zoom Pulse', 'Flash Cycle', 'Rotate Flow', 'Warp Text',\r\n            'Bounce Loop', 'Spin Flow', 'Wave Frame', 'Pulse Motion'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `anim-${i}`,\r\n                name: names[i % names.length] + ` [F${Math.floor(Math.random()*90)+10}]`,\r\n                icon: ['film', 'play', 'circle-nodes', 'rotate', 'arrows-spin', 'wand-sparkles', 'bars-staggered', 'infinite'][i % 8]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    \/\/ Animation Logic\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let result = \"\";\r\n        const chars = Array.from(text);\r\n        const frames = Object.values(frameAnim);\r\n        const frameSet = frames[variationIndex % frames.length];\r\n        const symbolSet = Object.values(symbols)[variationIndex % 6];\r\n\r\n        if (mode === 'FrameAnim') {\r\n            \/\/ Create frame-based animation sequence\r\n            const frame1 = Array.from(chars).map(c => frameSet[0] + ' ' + c).join('');\r\n            const frame2 = Array.from(chars).map(c => frameSet[1] + ' ' + c).join('');\r\n            const frame3 = Array.from(chars).map(c => frameSet[2] + ' ' + c).join('');\r\n            \r\n            result = `[${frame1}] \u25b6 [${frame2}] \u25b6 [${frame3}]`;\r\n        } \r\n        else if (mode === 'SymbolMotion') {\r\n            \/\/ Symbol motion with arrows and waves\r\n            const sym = symbolSet[variationIndex % symbolSet.length];\r\n            if (style === 'Bounce') {\r\n                result = Array.from(chars).map((c, i) => i % 2 === 0 ? sym + c : c + sym).join(' ');\r\n            } else if (style === 'Blink') {\r\n                result = Array.from(chars).map(c => `${sym} ${c} ${sym}`).join('  ');\r\n            } else if (style === 'Flow') {\r\n                result = Array.from(chars).join(` ${sym} `);\r\n            } else {\r\n                result = `${sym}${sym}${sym} ` + Array.from(chars).join(` ${sym} `) + ` ${sym}${sym}${sym}`;\r\n            }\r\n        }\r\n        else if (mode === 'WaveFlow') {\r\n            \/\/ Wave pattern\r\n            const wave = ['~', '\u2248', '~', '\u2248', '~'];\r\n            const waveChar = wave[variationIndex % wave.length];\r\n            result = chars.map((c, i) => i % 2 === 0 ? waveChar + c + waveChar : c).join('');\r\n        }\r\n        else if (mode === 'GothicAnim') {\r\n            \/\/ Gothic with animation frames\r\n            const gothicChars = Array.from(gothicArr);\r\n            const transformed = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? gothicChars[idx] : c;\r\n            }).join('');\r\n            result = `${frameSet[0]} ${transformed} ${frameSet[2]}`;\r\n        }\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Type your text to animate...\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'at-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"at-card-header\">\r\n                    <div class=\"at-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"at-card-copy-btn\" title=\"Copy Animation Frame\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"at-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.at-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyToClipboard(out, copyBtn);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Generate More Frames (${remaining})`;\r\n        }\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            inputEl.focus();\r\n            document.execCommand('paste');\r\n            render();\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) {\r\n            copyToClipboard(inputEl.value, null);\r\n            toast.querySelector('i').className = 'fa-solid fa-copy';\r\n            toast.querySelector('i').nextSibling.textContent = ' Base Text Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-film';\r\n                toast.querySelector('i').nextSibling.textContent = ' Animation Frame Copied';\r\n            }, 2000);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 9;\r\n            render(); \r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentStyle = btn.getAttribute('data-val');\r\n            limit = 9;\r\n            render();\r\n        });\r\n    });\r\n\r\n    \/\/ Init\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Animated Text Generator -->\r\n\r\n<!-- <content sectio is starting -->\r\n\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n\r\n<section class=\"pg-cutg-section pg-cutg-sec1\">\r\n        <div class=\"pg-cutg-wrap\">\r\n\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-cutg-section pg-cutg-sec1\">\r\n        <div class=\"pg-cutg-wrap\">\r\n            <h2 class=\"pg-cutg-heading\">What Makes This <span class=\"pg-cutg-kw\">Cute Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-cutg-sub\">Most font converters produce clunky, broken characters. Our cute text generator uses precise Unicode mappings to create flawless kawaii bubble text, aesthetic scripts, and tiny text that actually renders beautifully everywhere.<\/p>\r\n            <div class=\"pg-cutg-grid\">\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(233,30,99,0.12);color:#e91e63;\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Authentic Kawaii Bubble Text<\/div>\r\n                    <p class=\"pg-cutg-desc\">Our cute text generator uses real Unicode double-struck and enclosed character blocks \u2014 not fake bold tricks \u2014 so your bubble letters render as perfectly round, adorable characters on any device.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Multiple Aesthetic Styles<\/div>\r\n                    <p class=\"pg-cutg-desc\">Choose from bubble text, tiny superscript, script aesthetic, bold cursive, and wide fullwidth \u2014 our cute text generator gives you five distinct soft-girl approved formatting styles for any vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-star\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Built-In Cute Decorations<\/div>\r\n                    <p class=\"pg-cutg-desc\">Instantly wrap your text in sparkles, hearts, stars, and bows \u2014 our cute text generator adds decorative borders that take hours to type by hand, available in a single click.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-cutg-desc\">Found the perfect cute style? One click copies the formatted text with all its sparkles and symbols intact \u2014 no missing hearts, no broken layouts, just clean kawaii text ready to paste.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-display\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Flawless on Mobile Screens<\/div>\r\n                    <p class=\"pg-cutg-desc\">Cute text often breaks on iOS or Android keyboards \u2014 our cute text generator uses optimized Unicode combinations so your aesthetic text displays perfectly on iPhones, Androids, and desktops.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Unlimited and Completely Free<\/div>\r\n                    <p class=\"pg-cutg-desc\">No usage caps, no premium tiers, no sign-up walls. Generate as much bubble text as you want with our cute text generator \u2014 it's free forever, with zero ads blocking your creative flow.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-cutg-section pg-cutg-sec2\">\r\n        <div class=\"pg-cutg-wrap\">\r\n            <h2 class=\"pg-cutg-heading pg-cutg-sec2-heading\">How to Use Our <span class=\"pg-cutg-kw pg-cutg-sec2-kw\">Cute Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-cutg-sub pg-cutg-sec2-sub\">Creating aesthetic, kawaii text takes exactly seconds. No design skills needed \u2014 just follow these simple steps and get your adorable formatted text ready to copy and paste anywhere.<\/p>\r\n            <div class=\"pg-cutg-grid\">\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 1: Type Your Normal Text<\/div>\r\n                    <p class=\"pg-cutg-desc\">Enter any word, phrase, or quote into the input box \u2014 our cute text generator accepts regular text, emojis, and numbers as the base for your kawaii transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 2: Browse Cute Styles<\/div>\r\n                    <p class=\"pg-cutg-desc\">Scroll through the different aesthetic options generated below \u2014 from soft bubble letters to delicate tiny text, each style in our cute text generator creates a unique romantic or playful vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(233,30,99,0.12);color:#e91e63;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 3: Add Kawaii Decorations<\/div>\r\n                    <p class=\"pg-cutg-desc\">Select from pre-made sparkle frames, heart borders, or star wrappers \u2014 our cute text generator lets you add aesthetic symbols around your text without manually searching for special characters.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 4: Preview the Aesthetic Look<\/div>\r\n                    <p class=\"pg-cutg-desc\">See exactly how your text looks in cute formatting before copying \u2014 our cute text generator shows a live preview that mirrors exactly what it will look like when pasted on Instagram or TikTok.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 5: Copy the Cute Output<\/div>\r\n                    <p class=\"pg-cutg-desc\">Click the copy button next to your favorite style \u2014 the kawaii text transfers to your clipboard as pure Unicode, maintaining every sparkle and heart symbol perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 6: Paste and Adore<\/div>\r\n                    <p class=\"pg-cutg-desc\">Drop your cute text into bios, captions, or messages \u2014 our cute text generator output renders natively anywhere that supports standard Unicode, spreading kawaii energy everywhere you go.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-cutg-section pg-cutg-sec3\">\r\n        <div class=\"pg-cutg-wrap\">\r\n            <h2 class=\"pg-cutg-heading\">Best Places to Use <span class=\"pg-cutg-kw\">Cute Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-cutg-sub\">Cute text isn't just a trend \u2014 it's a proven way to boost engagement, build an aesthetic brand, and make your digital presence feel warm and approachable. Here's where our cute text generator output shines brightest.<\/p>\r\n            <div class=\"pg-cutg-grid\">\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Soft Girl and Coquette Aesthetic Bios<\/div>\r\n                    <p class=\"pg-cutg-desc\">Bubble text and sparkle decorations are the backbone of the soft girl, coquette, and pastel aesthetics on Instagram \u2014 our cute text generator gives your bio that polished, curated look in seconds.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">TikTok Captions and Comment Sections<\/div>\r\n                    <p class=\"pg-cutg-desc\">Cute text in TikTok captions matches the platform's aesthetic-driven culture perfectly \u2014 formatted text stands out in comment sections and signals that your video fits the trending cute vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Friendly Discord Usernames<\/div>\r\n                    <p class=\"pg-cutg-desc\">A cute Discord username with bubble letters or tiny text instantly makes you appear more approachable and friendly \u2014 our cute text generator creates names that welcome conversation instead of intimidating other users.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(230,0,35,0.12);color:#e60023;\"><i class=\"fa-brands fa-pinterest\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Pinterest Board Titles and Descriptions<\/div>\r\n                    <p class=\"pg-cutg-desc\">Pinterest's aesthetic culture rewards pretty formatting \u2014 use our cute text generator for board titles and pin descriptions to create a cohesive, visually pleasing profile that attracts followers.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(0,200,83,0.12);color:#00c853;\"><i class=\"fa-solid fa-store\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Etsy and Small Business Branding<\/div>\r\n                    <p class=\"pg-cutg-desc\">Small business owners use our cute text generator for shop announcements, product tags, and thank-you messages \u2014 kawaii text adds a handmade, personal touch that builds customer loyalty.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-comment-dots\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">WhatsApp and iMessage Chats<\/div>\r\n                    <p class=\"pg-cutg-desc\">Send adorable formatted good morning texts, love notes, or casual messages to friends and partners \u2014 our cute text generator makes everyday digital conversations feel infinitely more thoughtful and special.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --cutg-pink: #e91e63;\r\n            --cutg-grad: linear-gradient(135deg, #e91e63, #ea00ff, #ff9100);\r\n            --cutg-shadow: 0 12px 30px rgba(233, 30, 99, 0.16);\r\n            --cutg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --cutg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --cutg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-cutg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--cutg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-cutg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-cutg-heading {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-cutg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-cutg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--cutg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--cutg-ease);\r\n        }\r\n\r\n        .pg-cutg-section:hover .pg-cutg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-cutg-sub {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-cutg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-cutg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--cutg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-cutg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--cutg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--cutg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-cutg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(233,30,99,0.10) 0%, rgba(234,0,255,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-cutg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-cutg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--cutg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-cutg-card:hover .pg-cutg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-down .pg-cutg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-cutg-title {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-cutg-desc {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-cutg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-cutg-sec1 .pg-cutg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-cutg-sec1 .pg-cutg-card:hover {\r\n            border-color: var(--cutg-pink);\r\n            box-shadow: var(--cutg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 purple gradient \/ white cards\r\n           ============================== *\/\r\n        .pg-cutg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-heading.pg-cutg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-kw.pg-cutg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-kw.pg-cutg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ffd700, #ff6b6b, #ffffff);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-sub.pg-cutg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 soft pink bg \/ white cards\r\n           ============================== *\/\r\n        .pg-cutg-sec3 {\r\n            background: #fff5f8;\r\n        }\r\n\r\n        .pg-cutg-sec3 .pg-cutg-card.pg-cutg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #f0dce3;\r\n            box-shadow: 0 2px 8px rgba(233,30,99,0.04);\r\n        }\r\n\r\n        .pg-cutg-sec3 .pg-cutg-card.pg-cutg-sec3-card::before {\r\n            background: linear-gradient(90deg, #e91e63, #ea00ff, #ff9100);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-cutg-sec3 .pg-cutg-card.pg-cutg-sec3-card:hover {\r\n            border-color: var(--cutg-pink);\r\n            box-shadow: var(--cutg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-cutg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-cutg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-cutg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-cutg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-cutg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-cutg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-cutg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-cutg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-cutg-glow', 'pg-cutg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-cutg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-cutg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-cutg-glow', 'pg-cutg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-cutg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-cutg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-cutg-down', 'pg-cutg-glow', 'pg-cutg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-cutg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-cutg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-cutg-down', 'pg-cutg-glow', 'pg-cutg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\r\n[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!-- START OF FILE Animated Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .at-tool-wrapper {\r\n        \/* TYPOGRAPHY *\/\r\n        --primary-font: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* THEME PALETTE - ANIMATION \/ KINETIC *\/\r\n        --theme-panel: rgba(10, 8, 18, 0.95); \r\n        --theme-panel-hover: rgba(15, 12, 25, 0.98);\r\n        --theme-border: rgba(139, 92, 246, 0.4); \r\n        \r\n        \/* ANIMATION ACCENTS *\/\r\n        --anim-cyan: #00f0ff;\r\n        --anim-purple: #8b5cf6;\r\n        --anim-pink: #ec4899;\r\n        --anim-blue: #3b82f6;\r\n        --void-dark: #05030a;\r\n        --text-bright: #e8e6ff;\r\n        --text-muted: #9b8fb5;\r\n        \r\n        \/* GRADIENTS *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-anim: linear-gradient(135deg, #00f0ff 0%, #8b5cf6 50%, #ec4899 100%);\r\n        --grad-motion: linear-gradient(90deg, #ec4899, #8b5cf6, #00f0ff);\r\n        --grad-dark: linear-gradient(180deg, rgba(10,8,18,0.9) 0%, rgba(5,3,10,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-anim: 0 0 25px rgba(139, 92, 246, 0.5);\r\n        --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.4);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.85);\r\n        --shadow-card: 0 10px 35px rgba(0,0,0,0.6);\r\n        --glass-blur: blur(16px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        \r\n        \/* MAINTAINED MASTER BACKGROUND *\/\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .at-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES *\/\r\n    .at-container {\r\n        max-width: 1250px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 45px 24px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .at-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* TITLE STYLES - MOTION KINETIC *\/\r\n    .at-main-title {\r\n        font-family: var(--body-font);\r\n        font-size: 3.3rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 12px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: 3px 3px 0px rgba(0,0,0,0.8), 0 0 20px rgba(139, 92, 246, 0.5);\r\n        max-width: 950px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 14px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .at-main-title i {\r\n        color: var(--anim-cyan);\r\n        text-shadow: var(--glow-cyan);\r\n        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;\r\n        animation: at-float 3s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes at-float {\r\n        0%, 100% { transform: translateY(0) rotate(0deg); }\r\n        25% { transform: translateY(-4px) rotate(-8deg); }\r\n        75% { transform: translateY(2px) rotate(5deg); }\r\n    }\r\n    \r\n    .at-main-title:hover i {\r\n        transform: scale(1.3) rotate(360deg);\r\n        filter: drop-shadow(0 0 15px var(--anim-cyan));\r\n        animation: none;\r\n        color: var(--anim-pink);\r\n    }\r\n\r\n    .at-main-title:hover {\r\n        letter-spacing: 8px;\r\n        text-shadow: 3px 3px 0 #000, 0 0 30px var(--anim-purple), 0 0 50px rgba(0, 240, 255, 0.4);\r\n    }\r\n    \r\n    .at-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -16px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 100px;\r\n        height: 4px;\r\n        background: var(--grad-anim);\r\n        box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);\r\n        border-radius: 2px;\r\n        transition: width 0.5s ease, opacity 0.3s;\r\n        background-size: 200% 100%;\r\n        animation: at-gradient-flow 3s ease infinite;\r\n    }\r\n    \r\n    @keyframes at-gradient-flow {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n    \r\n    .at-main-title:hover::after { width: 50%; opacity: 1; }\r\n    \r\n    .at-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.15rem;\r\n        color: rgba(232, 230, 255, 0.8);\r\n        max-width: 800px;\r\n        margin: 35px auto 40px auto;\r\n        padding: 0 15px;\r\n        font-weight: 500;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 6px rgba(0,0,0,0.7);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .at-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--theme-border); \r\n        border-top-width: 5px;\r\n        border-top-color: var(--anim-cyan);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 40px rgba(139, 92, 246, 0.06); \r\n        border-radius: 20px;\r\n        position: relative;\r\n        overflow: visible;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .at-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -1px; left: 25%; right: 25%; height: 2px;\r\n        background: var(--grad-motion);\r\n        border-radius: 2px;\r\n        box-shadow: var(--glow-cyan);\r\n        transition: all 0.6s ease;\r\n    }\r\n    \r\n    .at-generator-card:hover::before { left: 10%; right: 10%; }\r\n\r\n    \/* ASYMMETRIC CONTROLS LAYOUT - NEW DESIGN *\/\r\n    .at-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 2px solid rgba(139, 92, 246, 0.2);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* ENHANCED INPUT SECTION - FULL BOX *\/\r\n    .at-input-section {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .at-enhanced-input-wrapper {\r\n        background: rgba(8, 5, 15, 0.7);\r\n        border: 2px solid rgba(139, 92, 246, 0.3);\r\n        border-radius: 14px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(0, 240, 255, 0.15);\r\n        position: relative;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .at-enhanced-input-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139, 92, 246, 0.04) 3px, rgba(139, 92, 246, 0.04) 6px);\r\n        pointer-events: none;\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .at-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--anim-purple);\r\n        box-shadow: inset 0 0 25px rgba(139, 92, 246, 0.15), 0 0 18px rgba(0, 240, 255, 0.3);\r\n    }\r\n    \r\n    .at-text-input {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-height: 150px !important;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: 400 !important;\r\n        font-size: 1.6rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.8);\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n        line-height: 1.6;\r\n        position: relative;\r\n        z-index: 2;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .at-text-input::placeholder {\r\n        color: rgba(0, 240, 255, 0.35);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* TOOLBAR *\/\r\n    .at-input-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        background: rgba(8, 5, 15, 0.85);\r\n        padding: 16px 20px;\r\n        border-top: 1px solid rgba(139, 92, 246, 0.2);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .at-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.04);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 10px 15px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.72rem;\r\n        font-weight: 700;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .at-toolbar-btn:hover {\r\n        background: rgba(0, 240, 255, 0.15);\r\n        color: var(--anim-cyan);\r\n        border-color: var(--anim-cyan);\r\n        box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .at-toolbar-btn:hover i { transform: translateY(-3px); }\r\n    .at-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .at-preset-select {\r\n        background: rgba(236, 72, 153, 0.08);\r\n        color: var(--anim-pink);\r\n        border: 1px solid rgba(236, 72, 153, 0.3);\r\n        padding: 10px 15px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.72rem;\r\n        font-weight: 800;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        max-width: 240px;\r\n        width: 100%;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' fill='%23ec4899' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 14px center;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .at-preset-select:hover, .at-preset-select:focus {\r\n        background-color: rgba(236, 72, 153, 0.2);\r\n        border-color: var(--anim-pink);\r\n        box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);\r\n    }\r\n    \r\n    .at-preset-select option { background: var(--void-dark); color: #e8e6ff; }\r\n\r\n    \/* SETTINGS SECTION *\/\r\n    .at-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 20px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .at-settings-section > div {\r\n        background: rgba(8, 5, 15, 0.65);\r\n        border: 1px solid rgba(139, 92, 246, 0.2);\r\n        border-radius: 14px;\r\n        padding: 22px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .at-settings-section > div:hover {\r\n        border-color: rgba(0, 240, 255, 0.3);\r\n        background: rgba(10, 6, 20, 0.8);\r\n    }\r\n\r\n    .at-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: rgba(255,255,255,0.85);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        margin-bottom: 14px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px dashed rgba(255,255,255,0.1);\r\n    }\r\n    \r\n    .at-panel-label i {\r\n        color: var(--anim-purple);\r\n        margin-right: 10px;\r\n        font-size: 1rem;\r\n        text-shadow: var(--glow-anim);\r\n    }\r\n\r\n    .at-grid-options {\r\n        display: grid;\r\n        gap: 10px;\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .at-option-btn {\r\n        background: rgba(15, 10, 25, 0.5);\r\n        border: 1px solid rgba(139, 92, 246, 0.15);\r\n        padding: 14px 8px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 10px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .at-option-btn i { font-size: 1.2rem; transition: var(--transition-ui); }\r\n\r\n    .at-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(139,92,246,0.15), transparent);\r\n        transform: skewX(-15deg);\r\n        transition: left 0.5s ease;\r\n    }\r\n\r\n    .at-option-btn:hover {\r\n        background: rgba(139, 92, 246, 0.12);\r\n        border-color: rgba(139, 92, 246, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 6px 15px rgba(0,0,0,0.3), 0 0 10px rgba(0, 240, 255, 0.2);\r\n    }\r\n    \r\n    .at-option-btn:hover::before { left: 100%; }\r\n\r\n    .at-option-btn:hover i { transform: scale(1.2) rotate(8deg); color: var(--anim-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); }\r\n\r\n    .at-option-btn.active { \r\n        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.1));\r\n        color: #fff; \r\n        border-color: var(--anim-cyan);\r\n        box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 12px rgba(139, 92, 246, 0.15);\r\n    }\r\n    \r\n    .at-option-btn.active i {\r\n        color: var(--anim-cyan);\r\n        text-shadow: 0 0 12px rgba(0, 240, 255, 0.8);\r\n        animation: at-pulse 2s infinite;\r\n    }\r\n    \r\n    @keyframes at-pulse {\r\n        0%, 100% { transform: scale(1); }\r\n        50% { transform: scale(1.15); }\r\n    }\r\n\r\n    \/* RESULTS AREA - 3 CARDS PER ROW *\/\r\n    .at-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n        background: linear-gradient(180deg, var(--theme-panel) 0%, rgba(5,3,10,0.98) 100%);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .at-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* CARD REDESIGN - MOTION KINETIC *\/\r\n    .at-result-card {\r\n        background: rgba(12, 8, 22, 0.9);\r\n        border: 1px solid rgba(139, 92, 246, 0.25);\r\n        border-radius: 14px;\r\n        padding: 20px 24px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        min-height: 135px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .at-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: var(--grad-motion);\r\n        transition: width 0.35s ease;\r\n        opacity: 0.85;\r\n    }\r\n    \r\n    .at-result-card:hover {\r\n        transform: translateY(-6px) scale(1.01);\r\n        box-shadow: -6px 18px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(139, 92, 246, 0.2);\r\n        border-color: var(--anim-cyan);\r\n        background: rgba(15, 10, 28, 0.95);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .at-result-card:hover::after { width: 4px; }\r\n\r\n    .at-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 10px;\r\n        padding-bottom: 8px;\r\n    }\r\n    \r\n    .at-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.8rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .at-card-title i {\r\n        color: var(--anim-pink);\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    }\r\n\r\n    .at-result-card:hover .at-card-title {\r\n        color: #fff;\r\n        text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);\r\n    }\r\n    \r\n    .at-result-card:hover .at-card-title i {\r\n        transform: rotate(180deg) scale(1.2);\r\n        color: var(--anim-cyan);\r\n        text-shadow: 0 0 12px rgba(0, 240, 255, 0.7);\r\n    }\r\n\r\n    .at-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.04);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        color: var(--text-bright);\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .at-card-copy-btn i { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }\r\n    \r\n    .at-card-copy-btn:hover {\r\n        background: rgba(0, 240, 255, 0.2);\r\n        border-color: var(--anim-cyan);\r\n        color: var(--anim-cyan);\r\n        box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);\r\n        transform: rotate(-5deg) scale(1.05);\r\n    }\r\n    \r\n    .at-card-copy-btn:hover i { transform: scale(1.2) translateY(-3px); }\r\n    .at-card-copy-btn:active { transform: scale(0.9) rotate(0deg); }\r\n\r\n    .at-card-preview {\r\n        font-size: 1.45rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 2;\r\n        padding: 6px 0; \r\n        transition: var(--transition-fast);\r\n        flex-grow: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        \r\n        \/* CRITICAL FIX FOR LARGE TEXT *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 1px 1px 3px rgba(0,0,0,0.7);\r\n        line-height: 1.5;\r\n        max-height: 160px;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .at-result-card:hover .at-card-preview {\r\n        color: var(--text-bright);\r\n        text-shadow: 0 0 12px rgba(139, 92, 246, 0.5);\r\n    }\r\n\r\n    \/* LOAD MORE - MOTION BUTTON *\/\r\n    .at-btn-load {\r\n        background: transparent;\r\n        color: var(--text-bright);\r\n        border: 2px solid var(--anim-purple);\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 10px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 1.5px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        overflow: hidden;\r\n        box-shadow: 0 6px 15px rgba(0,0,0,0.6);\r\n        animation: at-cta-pulse 3s infinite;\r\n    }\r\n    \r\n    @keyframes at-cta-pulse {\r\n        0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5), 0 6px 15px rgba(0,0,0,0.6); }\r\n        70% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0), 0 6px 15px rgba(0,0,0,0.6); }\r\n        100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0), 0 6px 15px rgba(0,0,0,0.6); }\r\n    }\r\n    \r\n    .at-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.25), transparent);\r\n        transition: left 0.6s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .at-btn-load:hover { \r\n        background: rgba(139, 92, 246, 0.15); \r\n        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3), var(--glow-cyan);\r\n        transform: translateY(-4px);\r\n        border-color: var(--anim-cyan);\r\n    }\r\n    \r\n    .at-btn-load:hover::before { left: 100%; }\r\n    \r\n    .at-btn-load:hover i { transform: translateY(6px); color: var(--anim-cyan); }\r\n    .at-btn-load:active { transform: translateY(0) scale(0.98); }\r\n\r\n    \/* TOAST *\/\r\n    .at-toast {\r\n        visibility: hidden;\r\n        background: rgba(5, 3, 10, 0.98);\r\n        backdrop-filter: var(--glass-blur);\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(15px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 10px;\r\n        border: 1px solid var(--anim-purple);\r\n        border-left: 4px solid var(--anim-cyan);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), 0 0 20px rgba(0, 240, 255, 0.3);\r\n        letter-spacing: 0.8px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .at-toast i { color: var(--anim-cyan); font-size: 1.2rem; text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); }\r\n    .at-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    \/* RESPONSIVE DESIGN *\/\r\n    @media (max-width: 950px) {\r\n        .at-main-title { font-size: 2.8rem; } \r\n        .at-result-list { grid-template-columns: repeat(2, 1fr); }\r\n        .at-settings-section { flex-direction: column; }\r\n        .at-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .at-result-list { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .at-container { padding: 30px 15px !important; }\r\n        .at-results-area { padding: 30px 15px; }\r\n        .at-controls-wrapper { padding: 20px; gap: 15px; }\r\n        .at-text-input { min-height: 110px !important; font-size: 1.3rem !important; }\r\n        .at-input-toolbar { flex-direction: column; align-items: stretch; }\r\n        .at-preset-select { max-width: 100%; }\r\n        .at-result-list { grid-template-columns: 1fr; gap: 15px; }\r\n        .at-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; }\r\n        .at-main-title { font-size: 2.1rem; letter-spacing: 1px; }\r\n        .at-subtitle { font-size: 0.95rem; }\r\n        .at-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"at-tool-wrapper\" id=\"at-anim-text-tool\">\r\n    <div class=\"at-container at-hero-content-wrapper\">\r\n        <h1 class=\"at-main-title\"><i class=\"fa-solid fa-film\"><\/i> Animated Text Generator \u2013 Animate Instantly<\/h1>\r\n        <p class=\"at-subtitle\">Bring your words to life with frame-based Unicode animations, symbol motion effects, and flowing text patterns. Create kinetic typography that moves, bounces, and flows in any chat or platform.<\/p>\r\n        \r\n        <div class=\"at-generator-card\">\r\n            <div class=\"at-controls-wrapper\">\r\n                \r\n                <!-- INPUT SECTION - FULL BOX -->\r\n                <div class=\"at-input-section\">\r\n                    <div class=\"at-enhanced-input-wrapper\">\r\n                        <textarea class=\"at-text-input\" id=\"atInputText\" placeholder=\"Type your text to animate...\"><\/textarea>\r\n                        \r\n                        <div class=\"at-input-toolbar\">\r\n                            <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\r\n                                <button class=\"at-toolbar-btn\" id=\"atBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"at-toolbar-btn\" id=\"atBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                                <button class=\"at-toolbar-btn\" id=\"atBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            \r\n                            <select class=\"at-preset-select\" id=\"atPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Motion Presets<\/option>\r\n                                <option value=\"Loading... Please Wait\">Loading State<\/option>\r\n                                <option value=\">>> Processing Request <<<\">Processing<\/option>\r\n                                <option value=\">>> Uploading File...\">File Upload<\/option>\r\n                                <option value=\"Syncing Data... 100%\">Data Sync<\/option>\r\n                                <option value=\">>> CONNECTED SUCCESSFULLY <<<\">Connected<\/option>\r\n                                <option value=\"Status: ONLINE | Ping: 2ms\">System Status<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- SETTINGS SECTION -->\r\n                <div class=\"at-settings-section\">\r\n                    <div>\r\n                        <div class=\"at-panel-label\"><i class=\"fa-solid fa-play\"><\/i> Animation Mode<\/div>\r\n                        <div class=\"at-grid-options\">\r\n                            <button class=\"at-option-btn mode-btn active\" data-val=\"FrameAnim\">\r\n                                <i class=\"fa-solid fa-film\"><\/i> Frame Anim\r\n                            <\/button>\r\n                            <button class=\"at-option-btn mode-btn\" data-val=\"SymbolMotion\">\r\n                                <i class=\"fa-solid fa-arrows-rotate\"><\/i> Symbol Motion\r\n                            <\/button>\r\n                            <button class=\"at-option-btn mode-btn\" data-val=\"WaveFlow\">\r\n                                <i class=\"fa-solid fa-water\"><\/i> Wave Flow\r\n                            <\/button>\r\n                            <button class=\"at-option-btn mode-btn\" data-val=\"GothicAnim\">\r\n                                <i class=\"fa-solid fa-church\"><\/i> Gothic Anim\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"at-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Motion Style<\/div>\r\n                        <div class=\"at-grid-options\">\r\n                            <button class=\"at-option-btn style-btn active\" data-val=\"Bounce\">\r\n                                <i class=\"fa-solid fa-basketball\"><\/i> Bounce\r\n                            <\/button>\r\n                            <button class=\"at-option-btn style-btn\" data-val=\"Blink\">\r\n                                <i class=\"fa-solid fa-eye\"><\/i> Blink\r\n                            <\/button>\r\n                            <button class=\"at-option-btn style-btn\" data-val=\"Flow\">\r\n                                <i class=\"fa-solid fa-wind\"><\/i> Flow\r\n                            <\/button>\r\n                            <button class=\"at-option-btn style-btn\" data-val=\"Loop\">\r\n                                <i class=\"fa-solid fa-repeat\"><\/i> Loop\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"at-results-area\">\r\n                <div class=\"at-result-list\" id=\"atResultList\"><\/div>\r\n                <!-- LOAD MORE BELOW 9 CARDS -->\r\n                <button class=\"at-btn-load\" id=\"atLoadMoreBtn\"><span>Generate More Frames<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"atToast\" class=\"at-toast\"><i class=\"fa-solid fa-film\"><\/i> Animation Frame Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Scoped container\r\n    const wrapper = document.getElementById('at-anim-text-tool');\r\n    const inputEl = wrapper.querySelector('#atInputText');\r\n    const resultList = wrapper.querySelector('#atResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#atLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#atToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#atBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#atBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#atBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#atPresetSelect');\r\n\r\n    let currentMode = 'FrameAnim';\r\n    let currentStyle = 'Bounce';\r\n    let limit = 9;\r\n    const LOAD_INCREMENT = 9;\r\n\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const gothicArr = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\";\r\n    const boldArr = \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\";\r\n    const wideArr = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\";\r\n\r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    \/\/ Frame animations - arrays of frames\r\n    const frameAnim = {\r\n        arrow: ['\u2192', '\u2198', '\u2193', '\u2199', '\u2190', '\u2196', '\u2191', '\u2197'],\r\n        wave: ['~', '\u2248', '~', '\u2248', '~', '\u2248', '~', '\u2248'],\r\n        spin: ['\u25e2', '\u25e3', '\u25e4', '\u25e5'],\r\n        dots: ['\u28fe', '\u28fd', '\u28fb', '\u28bf', '\u287f', '\u28df', '\u28ef', '\u28f7'],\r\n        bounce: ['\u25b2', '\u25bc'],\r\n        pulse: ['\u25cf', '\u25cb', '\u25c9', '\u25ce'],\r\n        flow: ['\u224b', '\u224a', '\u2249', '\u2248'],\r\n        blink: ['\u25a0', '\u25a1', '\u25aa', '\u25ab']\r\n    };\r\n\r\n    const symbols = {\r\n        wave: ['\u3030\ufe0f', '\u3030\ufe0f', '\u224b', '\u2248', '~'],\r\n        arrow: ['\u2192', '\u2190', '\u2191', '\u2193', '\u2194', '\u2195'],\r\n        flow: ['\u00bb', '\u00ab', '\u203a', '\u2039', '\u00bb\u00bb', '\u00ab\u00ab'],\r\n        bounce: ['\u25b2', '\u25bc', '\u25c4', '\u25ba'],\r\n        spin: ['\u27f3', '\u27f2', '\u21bb', '\u21ba', '\u21bc', '\u21bd'],\r\n        pulse: ['\u25c9', '\u25ce', '\u25cf', '\u25cb', '\u25d0', '\u25d1']\r\n    };\r\n\r\n    \/\/ Copy Function\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\";\r\n        textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\";\r\n        textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea);\r\n        textArea.focus();\r\n        textArea.select();\r\n        \r\n        try {\r\n            document.execCommand('copy');\r\n            showToast(btnElement);\r\n        } catch (err) {\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(text).then(() => showToast(btnElement));\r\n            }\r\n        }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            const originalHTML = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--anim-cyan)';\r\n            btn.style.borderColor = 'var(--anim-cyan)';\r\n            btn.style.color = '#000';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = originalHTML;\r\n                btn.style.background = '';\r\n                btn.style.borderColor = '';\r\n                btn.style.color = '';\r\n            }, 2000);\r\n        }\r\n        \r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 2000);\r\n    };\r\n\r\n    \/\/ Generate 120 configurations\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Frame Loader', 'Bounce Wave', 'Flow Pulse', 'Spin Cycle', \r\n            'Arrow Stream', 'Dots Matrix', 'Kinetic Type', 'Motion Blur',\r\n            'Glide Effect', 'Shift Loop', 'Ripple Frame', 'Slide Show',\r\n            'Zoom Pulse', 'Flash Cycle', 'Rotate Flow', 'Warp Text',\r\n            'Bounce Loop', 'Spin Flow', 'Wave Frame', 'Pulse Motion'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `anim-${i}`,\r\n                name: names[i % names.length] + ` [F${Math.floor(Math.random()*90)+10}]`,\r\n                icon: ['film', 'play', 'circle-nodes', 'rotate', 'arrows-spin', 'wand-sparkles', 'bars-staggered', 'infinite'][i % 8]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    \/\/ Animation Logic\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let result = \"\";\r\n        const chars = Array.from(text);\r\n        const frames = Object.values(frameAnim);\r\n        const frameSet = frames[variationIndex % frames.length];\r\n        const symbolSet = Object.values(symbols)[variationIndex % 6];\r\n\r\n        if (mode === 'FrameAnim') {\r\n            \/\/ Create frame-based animation sequence\r\n            const frame1 = Array.from(chars).map(c => frameSet[0] + ' ' + c).join('');\r\n            const frame2 = Array.from(chars).map(c => frameSet[1] + ' ' + c).join('');\r\n            const frame3 = Array.from(chars).map(c => frameSet[2] + ' ' + c).join('');\r\n            \r\n            result = `[${frame1}] \u25b6 [${frame2}] \u25b6 [${frame3}]`;\r\n        } \r\n        else if (mode === 'SymbolMotion') {\r\n            \/\/ Symbol motion with arrows and waves\r\n            const sym = symbolSet[variationIndex % symbolSet.length];\r\n            if (style === 'Bounce') {\r\n                result = Array.from(chars).map((c, i) => i % 2 === 0 ? sym + c : c + sym).join(' ');\r\n            } else if (style === 'Blink') {\r\n                result = Array.from(chars).map(c => `${sym} ${c} ${sym}`).join('  ');\r\n            } else if (style === 'Flow') {\r\n                result = Array.from(chars).join(` ${sym} `);\r\n            } else {\r\n                result = `${sym}${sym}${sym} ` + Array.from(chars).join(` ${sym} `) + ` ${sym}${sym}${sym}`;\r\n            }\r\n        }\r\n        else if (mode === 'WaveFlow') {\r\n            \/\/ Wave pattern\r\n            const wave = ['~', '\u2248', '~', '\u2248', '~'];\r\n            const waveChar = wave[variationIndex % wave.length];\r\n            result = chars.map((c, i) => i % 2 === 0 ? waveChar + c + waveChar : c).join('');\r\n        }\r\n        else if (mode === 'GothicAnim') {\r\n            \/\/ Gothic with animation frames\r\n            const gothicChars = Array.from(gothicArr);\r\n            const transformed = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? gothicChars[idx] : c;\r\n            }).join('');\r\n            result = `${frameSet[0]} ${transformed} ${frameSet[2]}`;\r\n        }\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Type your text to animate...\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'at-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"at-card-header\">\r\n                    <div class=\"at-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"at-card-copy-btn\" title=\"Copy Animation Frame\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"at-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.at-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyToClipboard(out, copyBtn);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Generate More Frames (${remaining})`;\r\n        }\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            inputEl.focus();\r\n            document.execCommand('paste');\r\n            render();\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) {\r\n            copyToClipboard(inputEl.value, null);\r\n            toast.querySelector('i').className = 'fa-solid fa-copy';\r\n            toast.querySelector('i').nextSibling.textContent = ' Base Text Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-film';\r\n                toast.querySelector('i').nextSibling.textContent = ' Animation Frame Copied';\r\n            }, 2000);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 9;\r\n            render(); \r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentStyle = btn.getAttribute('data-val');\r\n            limit = 9;\r\n            render();\r\n        });\r\n    });\r\n\r\n    \/\/ Init\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Animated Text Generator -->\r\n\r\n<!-- <content sectio is starting -->\r\n\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n\r\n<section class=\"pg-cutg-section pg-cutg-sec1\">\r\n        <div class=\"pg-cutg-wrap\">\r\n\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-cutg-section pg-cutg-sec1\">\r\n        <div class=\"pg-cutg-wrap\">\r\n            <h2 class=\"pg-cutg-heading\">What Makes This <span class=\"pg-cutg-kw\">Cute Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-cutg-sub\">Most font converters produce clunky, broken characters. Our cute text generator uses precise Unicode mappings to create flawless kawaii bubble text, aesthetic scripts, and tiny text that actually renders beautifully everywhere.<\/p>\r\n            <div class=\"pg-cutg-grid\">\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(233,30,99,0.12);color:#e91e63;\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Authentic Kawaii Bubble Text<\/div>\r\n                    <p class=\"pg-cutg-desc\">Our cute text generator uses real Unicode double-struck and enclosed character blocks \u2014 not fake bold tricks \u2014 so your bubble letters render as perfectly round, adorable characters on any device.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Multiple Aesthetic Styles<\/div>\r\n                    <p class=\"pg-cutg-desc\">Choose from bubble text, tiny superscript, script aesthetic, bold cursive, and wide fullwidth \u2014 our cute text generator gives you five distinct soft-girl approved formatting styles for any vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-star\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Built-In Cute Decorations<\/div>\r\n                    <p class=\"pg-cutg-desc\">Instantly wrap your text in sparkles, hearts, stars, and bows \u2014 our cute text generator adds decorative borders that take hours to type by hand, available in a single click.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-cutg-desc\">Found the perfect cute style? One click copies the formatted text with all its sparkles and symbols intact \u2014 no missing hearts, no broken layouts, just clean kawaii text ready to paste.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-display\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Flawless on Mobile Screens<\/div>\r\n                    <p class=\"pg-cutg-desc\">Cute text often breaks on iOS or Android keyboards \u2014 our cute text generator uses optimized Unicode combinations so your aesthetic text displays perfectly on iPhones, Androids, and desktops.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Unlimited and Completely Free<\/div>\r\n                    <p class=\"pg-cutg-desc\">No usage caps, no premium tiers, no sign-up walls. Generate as much bubble text as you want with our cute text generator \u2014 it's free forever, with zero ads blocking your creative flow.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-cutg-section pg-cutg-sec2\">\r\n        <div class=\"pg-cutg-wrap\">\r\n            <h2 class=\"pg-cutg-heading pg-cutg-sec2-heading\">How to Use Our <span class=\"pg-cutg-kw pg-cutg-sec2-kw\">Cute Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-cutg-sub pg-cutg-sec2-sub\">Creating aesthetic, kawaii text takes exactly seconds. No design skills needed \u2014 just follow these simple steps and get your adorable formatted text ready to copy and paste anywhere.<\/p>\r\n            <div class=\"pg-cutg-grid\">\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 1: Type Your Normal Text<\/div>\r\n                    <p class=\"pg-cutg-desc\">Enter any word, phrase, or quote into the input box \u2014 our cute text generator accepts regular text, emojis, and numbers as the base for your kawaii transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 2: Browse Cute Styles<\/div>\r\n                    <p class=\"pg-cutg-desc\">Scroll through the different aesthetic options generated below \u2014 from soft bubble letters to delicate tiny text, each style in our cute text generator creates a unique romantic or playful vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(233,30,99,0.12);color:#e91e63;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 3: Add Kawaii Decorations<\/div>\r\n                    <p class=\"pg-cutg-desc\">Select from pre-made sparkle frames, heart borders, or star wrappers \u2014 our cute text generator lets you add aesthetic symbols around your text without manually searching for special characters.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 4: Preview the Aesthetic Look<\/div>\r\n                    <p class=\"pg-cutg-desc\">See exactly how your text looks in cute formatting before copying \u2014 our cute text generator shows a live preview that mirrors exactly what it will look like when pasted on Instagram or TikTok.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 5: Copy the Cute Output<\/div>\r\n                    <p class=\"pg-cutg-desc\">Click the copy button next to your favorite style \u2014 the kawaii text transfers to your clipboard as pure Unicode, maintaining every sparkle and heart symbol perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec2-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Step 6: Paste and Adore<\/div>\r\n                    <p class=\"pg-cutg-desc\">Drop your cute text into bios, captions, or messages \u2014 our cute text generator output renders natively anywhere that supports standard Unicode, spreading kawaii energy everywhere you go.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-cutg-section pg-cutg-sec3\">\r\n        <div class=\"pg-cutg-wrap\">\r\n            <h2 class=\"pg-cutg-heading\">Best Places to Use <span class=\"pg-cutg-kw\">Cute Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-cutg-sub\">Cute text isn't just a trend \u2014 it's a proven way to boost engagement, build an aesthetic brand, and make your digital presence feel warm and approachable. Here's where our cute text generator output shines brightest.<\/p>\r\n            <div class=\"pg-cutg-grid\">\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Soft Girl and Coquette Aesthetic Bios<\/div>\r\n                    <p class=\"pg-cutg-desc\">Bubble text and sparkle decorations are the backbone of the soft girl, coquette, and pastel aesthetics on Instagram \u2014 our cute text generator gives your bio that polished, curated look in seconds.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">TikTok Captions and Comment Sections<\/div>\r\n                    <p class=\"pg-cutg-desc\">Cute text in TikTok captions matches the platform's aesthetic-driven culture perfectly \u2014 formatted text stands out in comment sections and signals that your video fits the trending cute vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Friendly Discord Usernames<\/div>\r\n                    <p class=\"pg-cutg-desc\">A cute Discord username with bubble letters or tiny text instantly makes you appear more approachable and friendly \u2014 our cute text generator creates names that welcome conversation instead of intimidating other users.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(230,0,35,0.12);color:#e60023;\"><i class=\"fa-brands fa-pinterest\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Pinterest Board Titles and Descriptions<\/div>\r\n                    <p class=\"pg-cutg-desc\">Pinterest's aesthetic culture rewards pretty formatting \u2014 use our cute text generator for board titles and pin descriptions to create a cohesive, visually pleasing profile that attracts followers.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(0,200,83,0.12);color:#00c853;\"><i class=\"fa-solid fa-store\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">Etsy and Small Business Branding<\/div>\r\n                    <p class=\"pg-cutg-desc\">Small business owners use our cute text generator for shop announcements, product tags, and thank-you messages \u2014 kawaii text adds a handmade, personal touch that builds customer loyalty.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-cutg-card pg-cutg-sec3-card\">\r\n                    <div class=\"pg-cutg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-comment-dots\"><\/i><\/div>\r\n                    <div class=\"pg-cutg-title\">WhatsApp and iMessage Chats<\/div>\r\n                    <p class=\"pg-cutg-desc\">Send adorable formatted good morning texts, love notes, or casual messages to friends and partners \u2014 our cute text generator makes everyday digital conversations feel infinitely more thoughtful and special.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --cutg-pink: #e91e63;\r\n            --cutg-grad: linear-gradient(135deg, #e91e63, #ea00ff, #ff9100);\r\n            --cutg-shadow: 0 12px 30px rgba(233, 30, 99, 0.16);\r\n            --cutg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --cutg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --cutg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-cutg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--cutg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-cutg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-cutg-heading {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-cutg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-cutg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--cutg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--cutg-ease);\r\n        }\r\n\r\n        .pg-cutg-section:hover .pg-cutg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-cutg-sub {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-cutg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-cutg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--cutg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-cutg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--cutg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--cutg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-cutg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(233,30,99,0.10) 0%, rgba(234,0,255,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-cutg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-cutg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--cutg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-cutg-card:hover .pg-cutg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-cutg-card.pg-cutg-down .pg-cutg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-cutg-title {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-cutg-desc {\r\n            font-family: var(--cutg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-cutg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-cutg-sec1 .pg-cutg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-cutg-sec1 .pg-cutg-card:hover {\r\n            border-color: var(--cutg-pink);\r\n            box-shadow: var(--cutg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 purple gradient \/ white cards\r\n           ============================== *\/\r\n        .pg-cutg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-heading.pg-cutg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-kw.pg-cutg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-kw.pg-cutg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ffd700, #ff6b6b, #ffffff);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-sub.pg-cutg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-cutg-sec2 .pg-cutg-card.pg-cutg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 soft pink bg \/ white cards\r\n           ============================== *\/\r\n        .pg-cutg-sec3 {\r\n            background: #fff5f8;\r\n        }\r\n\r\n        .pg-cutg-sec3 .pg-cutg-card.pg-cutg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #f0dce3;\r\n            box-shadow: 0 2px 8px rgba(233,30,99,0.04);\r\n        }\r\n\r\n        .pg-cutg-sec3 .pg-cutg-card.pg-cutg-sec3-card::before {\r\n            background: linear-gradient(90deg, #e91e63, #ea00ff, #ff9100);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-cutg-sec3 .pg-cutg-card.pg-cutg-sec3-card:hover {\r\n            border-color: var(--cutg-pink);\r\n            box-shadow: var(--cutg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-cutg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-cutg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-cutg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-cutg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-cutg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-cutg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-cutg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-cutg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-cutg-glow', 'pg-cutg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-cutg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-cutg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-cutg-glow', 'pg-cutg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-cutg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-cutg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-cutg-down', 'pg-cutg-glow', 'pg-cutg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-cutg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-cutg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-cutg-down', 'pg-cutg-glow', 'pg-cutg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\r\n\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-534","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f\u09c7\u09a1 \u099f\u09c7\u0995\u09cd\u09b8\u099f \u099c\u09c7\u09a8\u09be\u09b0\u09c7\u099f\u09b0 \u2013 \u09a4\u09be\u09ce\u0995\u09cd\u09b7\u09a3\u09bf\u0995\u09ad\u09be\u09ac\u09c7 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f \u0995\u09b0\u09c1\u09a8<\/title>\n<meta name=\"description\" content=\"\u0986\u09ae\u09be\u09a6\u09c7\u09b0 \u09ac\u09bf\u09a8\u09be\u09ae\u09c2\u09b2\u09cd\u09af\u09c7\u09b0 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f\u09c7\u09a1 \u099f\u09c7\u0995\u09cd\u09b8\u099f \u099c\u09c7\u09a8\u09be\u09b0\u09c7\u099f\u09b0 \u09a6\u09bf\u09af\u09bc\u09c7 \u099a\u09ae\u09ce\u0995\u09be\u09b0 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f\u09c7\u09a1 \u099f\u09c7\u0995\u09cd\u09b8\u099f \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09c1\u09a8\u0964 \u09af\u09c7\u0995\u09cb\u09a8\u09cb \u099f\u09c7\u0995\u09cd\u09b8\u099f\u09c7 \u09a8\u099c\u09b0\u0995\u09be\u09a1\u09bc\u09be \u09ae\u09cb\u09b6\u09a8 \u0987\u09ab\u09c7\u0995\u09cd\u099f \u09af\u09cb\u0997 \u0995\u09b0\u09c1\u09a8 \u2014 \u0995\u09af\u09bc\u09c7\u0995 \u09b8\u09c7\u0995\u09c7\u09a8\u09cd\u09a1\u09c7\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7\u0987 \u0995\u09aa\u09bf \u0993 \u09aa\u09c7\u09b8\u09cd\u099f \u0995\u09b0\u09c1\u09a8\u0964\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinetexteditor.io\/bn\/animated-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Text Generator \u2013 Animate Instantly\" \/>\n<meta property=\"og:description\" content=\"Create stunning animated text with our free Animated Text Generator. Add eye-catching motion effects to any text \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/animated-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T08:40:21+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/animated-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/animated-text-generator\\\/\",\"name\":\"Animated Text Generator \u2013 Animate Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-25T00:00:14+00:00\",\"dateModified\":\"2026-04-06T08:40:21+00:00\",\"description\":\"Create stunning animated text with our free Animated Text Generator. Add eye-catching motion effects to any text \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/animated-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/animated-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/animated-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Text Generator \u2013 Animate Instantly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/\",\"name\":\"Online Text Editor\",\"description\":\"Free &amp; Secure Rich Text Editing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onlinetexteditor.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f\u09c7\u09a1 \u099f\u09c7\u0995\u09cd\u09b8\u099f \u099c\u09c7\u09a8\u09be\u09b0\u09c7\u099f\u09b0 \u2013 \u09a4\u09be\u09ce\u0995\u09cd\u09b7\u09a3\u09bf\u0995\u09ad\u09be\u09ac\u09c7 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f \u0995\u09b0\u09c1\u09a8","description":"\u0986\u09ae\u09be\u09a6\u09c7\u09b0 \u09ac\u09bf\u09a8\u09be\u09ae\u09c2\u09b2\u09cd\u09af\u09c7\u09b0 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f\u09c7\u09a1 \u099f\u09c7\u0995\u09cd\u09b8\u099f \u099c\u09c7\u09a8\u09be\u09b0\u09c7\u099f\u09b0 \u09a6\u09bf\u09af\u09bc\u09c7 \u099a\u09ae\u09ce\u0995\u09be\u09b0 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7\u099f\u09c7\u09a1 \u099f\u09c7\u0995\u09cd\u09b8\u099f \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09c1\u09a8\u0964 \u09af\u09c7\u0995\u09cb\u09a8\u09cb \u099f\u09c7\u0995\u09cd\u09b8\u099f\u09c7 \u09a8\u099c\u09b0\u0995\u09be\u09a1\u09bc\u09be \u09ae\u09cb\u09b6\u09a8 \u0987\u09ab\u09c7\u0995\u09cd\u099f \u09af\u09cb\u0997 \u0995\u09b0\u09c1\u09a8 \u2014 \u0995\u09af\u09bc\u09c7\u0995 \u09b8\u09c7\u0995\u09c7\u09a8\u09cd\u09a1\u09c7\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7\u0987 \u0995\u09aa\u09bf \u0993 \u09aa\u09c7\u09b8\u09cd\u099f \u0995\u09b0\u09c1\u09a8\u0964","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinetexteditor.io\/bn\/animated-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Animated Text Generator \u2013 Animate Instantly","og_description":"Create stunning animated text with our free Animated Text Generator. Add eye-catching motion effects to any text \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/animated-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T08:40:21+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/animated-text-generator\/","url":"https:\/\/onlinetexteditor.io\/animated-text-generator\/","name":"Animated Text Generator \u2013 Animate Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-25T00:00:14+00:00","dateModified":"2026-04-06T08:40:21+00:00","description":"Create stunning animated text with our free Animated Text Generator. Add eye-catching motion effects to any text \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/animated-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/animated-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/animated-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Animated Text Generator \u2013 Animate Instantly"}]},{"@type":"WebSite","@id":"https:\/\/onlinetexteditor.io\/#website","url":"https:\/\/onlinetexteditor.io\/","name":"Online Text Editor","description":"Free &amp; Secure Rich Text Editing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinetexteditor.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/pages\/534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/comments?post=534"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/pages\/534\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/pages\/534\/revisions\/537"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/bn\/wp-json\/wp\/v2\/media?parent=534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}