{"id":571,"date":"2026-03-16T00:00:05","date_gmt":"2026-03-16T00:00:05","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=571"},"modified":"2026-04-06T09:13:25","modified_gmt":"2026-04-06T09:13:25","slug":"spongebob-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/ar\/spongebob-text-generator\/","title":{"rendered":"Spongebob Text Generator \u2013 Mock 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 Spongebob 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    .pg-tool-wrapper {\r\n        \/* TYPOGRAPHY - BOLD AND PLAYFUL *\/\r\n        --primary-font: \"Fredoka One\", \"Comic Sans MS\", \"Marker Felt\", system-ui, -apple-system, sans-serif;\r\n        --body-font: \"Nunito\", system-ui, sans-serif;\r\n        \r\n        \/* THEME PALETTE - BIKINI BOTTOM VIBES *\/\r\n        --theme-panel: rgba(14, 165, 233, 0.15); \/* Ocean glass *\/\r\n        --theme-panel-bg: rgba(15, 23, 42, 0.85); \/* Deep ocean dark *\/\r\n        --theme-border: rgba(253, 224, 71, 0.4); \/* Sponge yellow border *\/\r\n        \r\n        \/* SPONGEBOB ACCENTS *\/\r\n        --sponge-yellow: #fde047;\r\n        --sponge-gold: #eab308;\r\n        --ocean-cyan: #22d3ee;\r\n        --ocean-blue: #0284c7;\r\n        --patrick-pink: #f472b6;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #94a3b8;\r\n        \r\n        \/* EXACT BACKGROUND REQUIRED BY PROMPT *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-sponge: linear-gradient(135deg, #fde047 0%, #eab308 100%);\r\n        --grad-ocean: linear-gradient(135deg, #22d3ee 0%, #0284c7 100%);\r\n        --grad-dark: linear-gradient(180deg, rgba(15,23,42,0.9) 0%, rgba(2,6,23,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-yellow: 0 0 20px rgba(253, 224, 71, 0.6);\r\n        --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.5);\r\n        --shadow-ui: 0 15px 40px rgba(0, 0, 0, 0.7);\r\n        --shadow-card: 0 8px 24px rgba(0,0,0,0.5);\r\n        --glass-blur: blur(16px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\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%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        \/* MASTER BACKGROUND *\/\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES *\/\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-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 - MEME BOLD TYPOGRAPHY *\/\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.6rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: var(--sponge-yellow);\r\n        text-shadow: \r\n            3px 3px 0 #000, \r\n            -2px -2px 0 var(--ocean-blue), \r\n            2px -2px 0 var(--ocean-blue), \r\n            -2px 2px 0 var(--ocean-blue), \r\n            2px 2px 0 var(--ocean-blue),\r\n            0 8px 15px rgba(0,0,0,0.6);\r\n        max-width: 900px;\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: 15px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title i {\r\n        color: #fff;\r\n        text-shadow: var(--glow-cyan);\r\n        background: var(--ocean-blue);\r\n        border-radius: 50%;\r\n        padding: 8px;\r\n        font-size: 2.8rem;\r\n        box-shadow: inset 0 0 10px rgba(255,255,255,0.5);\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-main-title:hover i {\r\n        transform: rotate(-15deg) scale(1.15);\r\n        background: var(--patrick-pink);\r\n    }\r\n\r\n    .pg-main-title:hover {\r\n        transform: scale(1.02);\r\n        color: #fff;\r\n        text-shadow: \r\n            3px 3px 0 #000, \r\n            -2px -2px 0 var(--patrick-pink), \r\n            2px -2px 0 var(--patrick-pink), \r\n            -2px 2px 0 var(--patrick-pink), \r\n            2px 2px 0 var(--patrick-pink),\r\n            0 8px 25px rgba(244, 114, 182, 0.6);\r\n    }\r\n    \r\n    .pg-subtitle {\r\n        font-family: var(--body-font);\r\n        font-size: 1.15rem;\r\n        color: rgba(255, 255, 255, 0.95);\r\n        max-width: 800px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 15px;\r\n        font-weight: 700;\r\n        text-shadow: 0 2px 6px rgba(0,0,0,0.9);\r\n        background: rgba(0,0,0,0.3);\r\n        padding: 10px 20px;\r\n        border-radius: 50px;\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .pg-generator-card {\r\n        background: var(--theme-panel-bg);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 3px solid var(--theme-border); \r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), 0 0 40px rgba(2, 132, 199, 0.4); \r\n        border-radius: 20px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* BUBBLE OVERLAYS *\/\r\n    .pg-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50px; right: -50px;\r\n        width: 200px; height: 200px;\r\n        background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* ASYMMETRIC CONTROLS LAYOUT *\/\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 2px dashed rgba(34, 211, 238, 0.4);\r\n        display: grid;\r\n        grid-template-columns: 1.3fr 1fr;\r\n        gap: 30px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* INPUT SECTION: Full Box Fill *\/\r\n    .pg-input-section {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(2, 6, 23, 0.8);\r\n        border: 2px solid rgba(34, 211, 238, 0.5);\r\n        border-radius: 12px;\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 20px rgba(0,0,0,0.8);\r\n        flex-grow: 1; \/* Stretch to fill column *\/\r\n        height: 100%;\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--sponge-yellow);\r\n        box-shadow: inset 0 0 25px rgba(253, 224, 71, 0.15), 0 0 15px rgba(253, 224, 71, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        height: 100% !important; \/* Extends to full available box area *\/\r\n        min-height: 250px !important;\r\n        flex-grow: 1 !important; \/* Extends to fill space above toolbar *\/\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(--primary-font) !important;\r\n        font-weight: 700 !important;\r\n        font-size: 1.7rem !important;\r\n        outline: none !important;\r\n        text-align: center !important;\r\n        text-shadow: 2px 2px 4px #000;\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    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(253, 224, 71, 0.5);\r\n    }\r\n\r\n    \/* TOOLBAR FOR COPY\/PASTE\/SELECT\/PRESETS *\/\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(15, 23, 42, 0.9);\r\n        padding: 15px;\r\n        border-top: 1px solid rgba(34, 211, 238, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        color: var(--text-bright);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 8px 12px;\r\n        font-family: var(--body-font);\r\n        font-size: 0.8rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(253, 224, 71, 0.2);\r\n        color: var(--sponge-yellow);\r\n        border-color: var(--sponge-yellow);\r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n\r\n    .pg-toolbar-btn.primary-btn {\r\n        background: rgba(2, 132, 199, 0.3);\r\n        border-color: var(--ocean-cyan);\r\n        color: var(--ocean-cyan);\r\n    }\r\n    \r\n    .pg-toolbar-btn.primary-btn:hover {\r\n        background: var(--ocean-cyan);\r\n        color: #000;\r\n    }\r\n\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(244, 114, 182, 0.15);\r\n        color: var(--patrick-pink);\r\n        border: 1px solid var(--patrick-pink);\r\n        padding: 8px 12px;\r\n        font-family: var(--body-font);\r\n        font-size: 0.8rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\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        flex-grow: 1;\r\n        max-width: 250px;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--patrick-pink);\r\n        color: #000;\r\n        box-shadow: 0 0 15px rgba(244, 114, 182, 0.6);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--theme-panel-bg);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* SETTINGS SECTION (RIGHT COLUMN) *\/\r\n    .pg-settings-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n    }\r\n\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.95rem;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        margin-bottom: 12px;\r\n        text-shadow: 0 2px 4px #000;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--sponge-yellow);\r\n        margin-right: 10px;\r\n        font-size: 1.2rem;\r\n        filter: drop-shadow(0 0 5px var(--sponge-yellow));\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(0, 0, 0, 0.4);\r\n        border: 2px solid rgba(255, 255, 255, 0.1);\r\n        padding: 14px 10px;\r\n        color: var(--text-muted);\r\n        font-family: var(--body-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        cursor: pointer;\r\n        border-radius: 12px;\r\n        transition: var(--transition-ui);\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    .pg-option-btn i {\r\n        font-size: 1.5rem;\r\n        transition: var(--transition-fast);\r\n    }\r\n\r\n    \/* MICRO-INTERACTIONS: Button Fill Slide *\/\r\n    .pg-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -100%; left: 0; width: 100%; height: 100%;\r\n        background: var(--grad-sponge);\r\n        transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        z-index: 0;\r\n    }\r\n\r\n    .pg-option-btn > * { position: relative; z-index: 1; }\r\n\r\n    .pg-option-btn:hover {\r\n        border-color: var(--sponge-yellow);\r\n        color: var(--sponge-yellow);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-option-btn:hover i { transform: scale(1.2) rotate(5deg); }\r\n\r\n    .pg-option-btn.active { \r\n        border-color: var(--sponge-yellow);\r\n        color: #000; \r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n    \r\n    .pg-option-btn.active::before { bottom: 0; }\r\n    .pg-option-btn.active i { color: #000; text-shadow: none; }\r\n\r\n    \/* RESULTS AREA - 3 CARDS PER ROW REQUIRED *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n        z-index: 1;\r\n        background: rgba(2, 6, 23, 0.6);\r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr); \/* 3 CARDS *\/\r\n        gap: 25px;\r\n        position: relative; \r\n    }\r\n\r\n    \/* MICRO-INTERACTION: Card Tilt & Glow *\/\r\n    .pg-result-card {\r\n        background: rgba(15, 23, 42, 0.95);\r\n        border: 2px solid rgba(34, 211, 238, 0.2);\r\n        padding: 25px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 16px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 160px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .pg-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 5px; height: 100%;\r\n        background: var(--grad-ocean);\r\n        transition: width 0.3s ease;\r\n    }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-5px);\r\n        box-shadow: -8px 12px 25px rgba(0, 0, 0, 0.9), var(--glow-cyan);\r\n        border-color: var(--ocean-cyan);\r\n        background: #000;\r\n        z-index: 10;\r\n    }\r\n    \r\n    .pg-result-card:hover::after { width: 8px; background: var(--grad-sponge); }\r\n\r\n    \/* CARD HEADER & COPY ICON *\/\r\n    .pg-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: 15px;\r\n        border-bottom: 2px dashed rgba(255,255,255,0.1);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.95rem;\r\n        font-weight: 800;\r\n        color: var(--ocean-cyan);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-card-title i {\r\n        color: var(--sponge-yellow);\r\n        font-size: 1.2rem;\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: var(--text-bright);\r\n        letter-spacing: 2px;\r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-title i {\r\n        transform: rotate(180deg) scale(1.3);\r\n    }\r\n\r\n    \/* MANDATORY COPY ICON BUTTON *\/\r\n    .pg-card-copy-btn {\r\n        background: rgba(34, 211, 238, 0.1);\r\n        border: 2px solid rgba(34, 211, 238, 0.3);\r\n        color: var(--ocean-cyan);\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 12px;\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    .pg-card-copy-btn i {\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: var(--ocean-cyan);\r\n        color: #000;\r\n        box-shadow: var(--glow-cyan);\r\n        transform: scale(1.1) rotate(-5deg);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover i { transform: scale(1.2); }\r\n    .pg-card-copy-btn:active { transform: scale(0.9) rotate(5deg); }\r\n\r\n    \/* CRITICAL TEXT WRAP FIX *\/\r\n    .pg-card-preview {\r\n        font-size: 1.4rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        font-family: var(--primary-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 10px; \r\n        transition: var(--transition-fast);\r\n        \r\n        \/* THE FIX - Ensures all massive texts break properly in 3 column grids *\/\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: 2px 2px 4px #000;\r\n        line-height: 1.6; \r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: var(--sponge-yellow);\r\n        text-shadow: 3px 3px 0 #000, 0 0 15px rgba(253,224,71,0.5);\r\n    }\r\n\r\n    \/* LOAD MORE CTA - Floating Bubble Button *\/\r\n    .pg-btn-load {\r\n        background: var(--grad-ocean);\r\n        color: #fff;\r\n        border: none;\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 900;\r\n        font-size: 1.1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 50px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: var(--shadow-card), 0 5px 15px rgba(34,211,238,0.5);\r\n    }\r\n    \r\n    .pg-btn-load:hover { \r\n        background: var(--grad-sponge); \r\n        color: #000;\r\n        box-shadow: 0 8px 25px rgba(253, 224, 71, 0.6);\r\n        transform: translateY(-4px) scale(1.02);\r\n    }\r\n    \r\n    .pg-btn-load:hover i { transform: translateY(5px); }\r\n    .pg-btn-load:active { transform: translateY(0) scale(0.95); }\r\n\r\n    \/* TOAST ALERT *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: rgba(15, 23, 42, 0.98);\r\n        backdrop-filter: blur(10px);\r\n        color: #fff;\r\n        padding: 16px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 12px;\r\n        border: 2px solid var(--sponge-yellow);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-yellow);\r\n        letter-spacing: 1px;\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: 12px;\r\n    }\r\n    \r\n    .pg-toast i { color: var(--sponge-yellow); font-size: 1.4rem; }\r\n    \r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN *\/\r\n    @media (max-width: 1024px) {\r\n        .pg-result-list { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.8rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .pg-result-list { grid-template-columns: 1fr; } \/* Stack to 1 card on small devices *\/\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 150px !important; font-size: 1.3rem !important; }\r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; text-align: center; }\r\n        .pg-result-list { gap: 15px; } \r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.75rem; }\r\n        .pg-option-btn i { font-size: 1.2rem; }\r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.95rem; width: 100%; justify-content: center; letter-spacing: 1px;}\r\n        .pg-main-title { font-size: 2rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\" id=\"pg-spongebob-tool\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\"><i class=\"fa-solid fa-sponge\"><\/i> Spongebob Text Generator \u2013 Mock Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">gEnErAtE mOcKiNg tExT, chaotic absurdist memes, or stylize your words with readable mirror loops and digital gothic fonts. Perfect for instant internet sarcasm.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <!-- INPUT SECTION: Left side heavy -->\r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-comment-dots\"><\/i> E n t e r \u00a0 T e x t<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"type something serious here to be mocked...\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn primary-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83c\udf4d M e m e \u00a0 P r e s e t s<\/option>\r\n                                <option value=\"I'm not going to write it like that.\">\"Not going to write it\"<\/option>\r\n                                <option value=\"You can't just make a meme out of everything.\">\"Can't make a meme\"<\/option>\r\n                                <option value=\"Is mayonnaise an instrument?\">Mayonnaise Instrument<\/option>\r\n                                <option value=\"I wumbo, you wumbo, he she me wumbo.\">Wumbo Quote<\/option>\r\n                                <option value=\"Are you ready kids?\">Ready Kids<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- SETTINGS SECTION: Right Side -->\r\n                <div class=\"pg-settings-section\">\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-masks-theater\"><\/i> V i b e \u00a0 M o d e<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn mode-btn active\" data-val=\"Mocking\">\r\n                                <i class=\"fa-solid fa-shuffle\"><\/i> mOcKiNg\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Absurd\">\r\n                                <i class=\"fa-solid fa-star-half-stroke\"><\/i> \ud83c\udf1f A b S u R d\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"HalfMirror\">\r\n                                <i class=\"fa-solid fa-arrows-left-right-to-line\"><\/i> H\u0258ll\u01eb (Mirror)\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-g\"><\/i> \ud835\udd72\ud835\udd94\ud835\udd99\ud835\udd8d\ud835\udd8e\ud835\udd88\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> D e c o r a t i o n<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn style-btn active\" data-val=\"Clean\">\r\n                                <i class=\"fa-solid fa-check\"><\/i> Pure\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Bubbles\">\r\n                                <i class=\"fa-solid fa-soap\"><\/i> Bubbles \ud83e\udee7\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Ocean\">\r\n                                <i class=\"fa-solid fa-water\"><\/i> Ocean \ud83c\udf0a\ud83c\udf4d\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Sparkles\">\r\n                                <i class=\"fa-solid fa-sparkles\"><\/i> Sparkle \u2728\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <!-- 3 CARDS PER ROW AS PER NEW PROMPT -->\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <!-- +9 LOAD MORE BUTTON -->\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>G E N E R A T E \u00a0 M O R E<\/span> <i class=\"fa-solid fa-plus\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> S A R C A S M \u00a0 C O P I E D<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('pg-spongebob-tool');\r\n    const inputEl = wrapper.querySelector('#pgInputText');\r\n    const resultList = wrapper.querySelector('#pgResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#pgLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#pgToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#pgBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#pgBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#pgBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#pgPresetSelect');\r\n\r\n    let currentMode = 'Mocking';\r\n    let currentStyle = 'Clean';\r\n    let limit = 9;  \/\/ Load 9 cards initially (3 rows of 3)\r\n    const LOAD_INCREMENT = 9; \r\n\r\n    \/\/ Character Mappings\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const modGothic = \"\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\ud835\udd6c\ud835\udd6d\ud835\udd6e\ud835\udd6f\ud835\udd70\ud835\udd71\ud835\udd72\ud835\udd73\ud835\udd74\ud835\udd75\ud835\udd76\ud835\udd77\ud835\udd78\ud835\udd79\ud835\udd7a\ud835\udd7b\ud835\udd7c\ud835\udd7d\ud835\udd7e\ud835\udd7f\ud835\udd80\ud835\udd81\ud835\udd82\ud835\udd83\ud835\udd84\ud835\udd85\";\r\n    const mirrorMap = {\r\n        'a': '\u0252', 'c': '\u0254', 'e': '\u0258', 'f': '\ua7fb', 'g': '\u01eb', 'h': '\u029c',\r\n        'j': '\ua7fe', 'k': '\u029e', 'r': '\u027f', 's': '\u01a8', 'y': '\u028f',\r\n        'B': '\u1660', 'C': '\u0186', 'D': '\u15e1', 'E': '\u018e', 'F': '\ua7fb', 'G': '\u04d8',\r\n        'J': '\u1490', 'L': '\u2143', 'N': '\u0418', 'P': '\ua7fc', 'R': '\u042f', 'S': '\u01a7'\r\n    };\r\n\r\n    const emojis = {\r\n        Bubbles: ['\ud83e\udee7', '\ud83d\udcad', '\ud83d\udc1f', '\u2693'],\r\n        Ocean: ['\ud83c\udf0a', '\ud83c\udf4d', '\ud83e\udd80', '\u2b50'],\r\n        Sparkles: ['\u2728', '\ud83d\udcab', '\ud83c\udf1f', '\ud83d\udc96']\r\n    };\r\n\r\n    \/\/ Robust Fallback Copy\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            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--sponge-yellow)';\r\n            btn.style.borderColor = 'var(--sponge-yellow)';\r\n            btn.style.color = '#000';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\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 for 100+ live previews\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Spongy Mock', 'Krusty Meme', 'Bikini Bottom', 'Pineapple Vibe', \r\n            'Squid Sarcasm', 'Patrick Star', 'Plankton Logic', 'Barnacle Boy',\r\n            'Chum Bucket', 'Flying Dutchman', 'Mermaid Man', 'Gary Meow'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `sb-${i}`,\r\n                name: names[i % names.length] + ` v.${Math.floor(Math.random()*99)+1}`,\r\n                icon: ['sponge', 'fish', 'anchor', 'ship', 'burger', 'water'][i % 6]\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    \/\/ Logic Parsers\r\n    const strictMocking = (text, shift = false) => {\r\n        let upper = shift;\r\n        return Array.from(text).map(c => {\r\n            if (\/[a-zA-Z]\/.test(c)) {\r\n                const res = upper ? c.toUpperCase() : c.toLowerCase();\r\n                upper = !upper; \/\/ flip toggle on letter only\r\n                return res;\r\n            }\r\n            return c; \/\/ keep spaces\/punct\r\n        }).join('');\r\n    };\r\n\r\n    const applyHalfMirror = (text) => {\r\n        return Array.from(text).map(c => mirrorMap[c] ? mirrorMap[c] : c).join('');\r\n    };\r\n\r\n    const applyGothic = (text) => {\r\n        return Array.from(text).map(c => {\r\n            const idx = baseChars.indexOf(c);\r\n            return idx !== -1 ? modGothic[idx] : c;\r\n        }).join('');\r\n    };\r\n\r\n    \/\/ Main Transform\r\n    const transformLogic = (text, mode, style, varIndex) => {\r\n        if (!text) return \"\";\r\n        let result = text;\r\n        \r\n        \/\/ 1. MODES\r\n        if (mode === 'Mocking') {\r\n            \/\/ Strictly alternates case. Varies starting case by index\r\n            result = strictMocking(text, varIndex % 2 === 0);\r\n        } \r\n        else if (mode === 'Absurd') {\r\n            \/\/ Mocking + fullwidth spaces + chaotic logic\r\n            let mocked = strictMocking(text, Math.random() > 0.5);\r\n            result = Array.from(mocked).map(c => c === ' ' ? ' \\u200B ' : c).join('');\r\n            if(varIndex % 3 === 0) result = result.replace(\/o\/gi, '0');\r\n        }\r\n        else if (mode === 'HalfMirror') {\r\n            result = applyHalfMirror(text);\r\n        }\r\n        else if (mode === 'Gothic') {\r\n            result = applyGothic(text);\r\n        }\r\n\r\n        \/\/ 2. STYLES (Decorations)\r\n        if (style !== 'Clean') {\r\n            const arr = emojis[style];\r\n            const sym = arr[varIndex % arr.length];\r\n            const sym2 = arr[(varIndex+1) % arr.length];\r\n            result = `${sym} ${result} ${sym2}`;\r\n            \r\n            \/\/ In Absurd + Style, inject symbol randomly\r\n            if(mode === 'Absurd' && varIndex % 2 === 0) {\r\n                const words = result.split(' ');\r\n                if(words.length > 2) {\r\n                    words.splice(Math.floor(words.length\/2), 0, sym);\r\n                    result = words.join(' ');\r\n                }\r\n            }\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 something serious here to be mocked...\";\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 = 'pg-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Sarcasm\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-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 = `G E N E R A T E   M O R E (${remaining})`;\r\n        }\r\n    };\r\n\r\n    \/\/ Events\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 = ' B A S E   C O P I E D';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-check-double';\r\n                toast.querySelector('i').nextSibling.textContent = ' S A R C A S M   C O P I E D';\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 Spongebob Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n<section class=\"pg-sbtg-section pg-sbtg-sec1\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n\t\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\r\n\r\n\r\n    <section class=\"pg-sbtg-section pg-sbtg-sec1\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n            <h2 class=\"pg-sbtg-heading\">What Makes This <span class=\"pg-sbtg-kw\">SpongeBob Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-sbtg-sub\">Most mocking text tools randomly shuffle your casing and break the pattern. Our SpongeBob text generator uses a mathematically precise alternating algorithm to create the perfect MoCkInG tExT that reads exactly like the iconic meme \u2014 every single time.<\/p>\r\n            <div class=\"pg-sbtg-grid\">\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(245,158,11,0.12);color:#f59e0b;\"><i class=\"fa-solid fa-face-grin-tongue-wink\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Perfect Alternating Algorithm<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Our SpongeBob text generator toggles case precisely \u2014 lowercase, uppercase, lowercase, uppercase \u2014 without breaking on spaces or punctuation like buggy imitators do.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(236,72,153,0.12);color:#ec4899;\"><i class=\"fa-solid fa-shuffle\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Randomized Chaos Mode<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Toggle the chaos mode to randomize the letter casing instead of strict alternation \u2014 our SpongeBob text generator creates a wilder, more unhinged mocking vibe for maximum sarcasm energy.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(6,182,212,0.12);color:#06b6d4;\"><i class=\"fa-solid fa-text-width\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Smart Punctuation Handling<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Our SpongeBob text generator ignores spaces, commas, and periods in the alternating count so the casing pattern stays visually perfect across every word in your sentence.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(34,197,94,0.12);color:#22c55e;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Found the perfect sarcastic casing? One click copies the mOcKiNg text to your clipboard \u2014 our SpongeBob text generator preserves every uppercase and lowercase letter through the paste process.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(139,92,246,0.12);color:#8b5cf6;\"><i class=\"fa-solid fa-language\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Preserves Emojis Intact<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Other tools mangle your emojis when alternating cases \u2014 our SpongeBob text generator detects and skips emoji characters so your \ud83d\ude02 and \ud83d\ude44 stay perfectly intact in the output.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(249,115,22,0.12);color:#f97316;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Instant Browser Processing<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Our SpongeBob text generator converts your text locally in milliseconds \u2014 zero server calls, zero loading spinners, and zero data collection, just pure sarcastic text generation.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-sbtg-section pg-sbtg-sec2\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n            <h2 class=\"pg-sbtg-heading pg-sbtg-sec2-heading\">How to Use Our <span class=\"pg-sbtg-kw pg-sbtg-sec2-kw\">SpongeBob Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-sbtg-sub pg-sbtg-sec2-sub\">Creating sarcastic meme text takes exactly seconds. No formatting skills needed \u2014 just follow these steps and generate the perfect mocking text ready to deploy anywhere.<\/p>\r\n            <div class=\"pg-sbtg-grid\">\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(59,130,246,0.12);color:#3b82f6;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 1: Type Your Normal Text<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Enter any sentence, quote, or phrase into the input box \u2014 our SpongeBob text generator accepts standard text, emojis, and numbers as the base for your sarcastic transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(245,158,11,0.12);color:#f59e0b;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 2: Pick a Mocking Style<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Choose from strict alternating case, randomized chaos mode, or start-with-lowercase \u2014 our SpongeBob text generator gives you multiple sarcastic flavors for different levels of irony.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(20,184,166,0.12);color:#14b8a6;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 3: Fine-Tune the Rules<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Toggle whether spaces reset the case counter, whether to skip emojis, or whether to force the first letter to be lowercase \u2014 our SpongeBob text generator puts you in full control of the algorithm.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(236,72,153,0.12);color:#ec4899;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 4: Preview the Meme Text<\/div>\r\n                    <p class=\"pg-sbtg-desc\">See exactly how your sarcastic text looks before copying \u2014 our SpongeBob text generator shows a live preview so you can verify the mocking pattern reads perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(239,68,68,0.12);color:#ef4444;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 5: Copy the Output<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Hit the copy button to transfer your mOcKiNg text to the clipboard \u2014 our SpongeBob text generator ensures every carefully alternated letter copies without any formatting loss.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(139,92,246,0.12);color:#8b5cf6;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 6: Paste and Deploy<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Drop your sarcastic text into comments, tweets, or messages \u2014 our SpongeBob text generator output is pure plain text that works in every app, chat box, and social platform.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-sbtg-section pg-sbtg-sec3\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n            <h2 class=\"pg-sbtg-heading\">Best Places to Use <span class=\"pg-sbtg-kw\">SpongeBob Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-sbtg-sub\">SpongeBob mocking text is the internet's universal sarcasm indicator. Here are the most effective places where our SpongeBob text generator output delivers maximum comedic impact and engagement.<\/p>\r\n            <div class=\"pg-sbtg-grid\">\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">TikTok Comment Sections<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Mocking text is the official language of TikTok comments \u2014 our SpongeBob text generator creates the exact sarcastic formatting that gets liked to the top of any controversial or funny video.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Instagram Story Replies<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Replying to an Instagram story with mOcKiNg text instantly signals playful sarcasm \u2014 our SpongeBob text generator makes your story replies stand out in a sea of boring plain-text responses.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Discord Server Banter<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Discord communities run on sarcasm \u2014 our SpongeBob text generator creates the perfect mocking responses for when someone says something objectively wrong in chat.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(124,58,237,0.12);color:#7c3aed;\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Sarcastic Tweets and Replies<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Quote-tweeting a bad take with SpongeBob text is an internet tradition \u2014 our SpongeBob text generator formats your sarcasm perfectly so the joke lands without explanation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">YouTube Comment Section<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Mocking text in YouTube comments is a proven engagement driver \u2014 our SpongeBob text generator creates the sarcastic replies that get hearted and replied to by thousands of viewers.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(249,115,22,0.12);color:#f97316;\"><i class=\"fa-solid fa-comment-dots\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Reddit and Forum Posts<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Use mocking text in subreddit comments and forum replies to express polite disagreement \u2014 our SpongeBob text generator lets you be sarcastic without crossing into actual hostility.<\/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            --sbtg-yellow: #f59e0b;\r\n            --sbtg-grad: linear-gradient(135deg, #f59e0b, #ec4899, #06b6d4);\r\n            --sbtg-shadow: 0 12px 30px rgba(245, 158, 11, 0.16);\r\n            --sbtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --sbtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --sbtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-sbtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--sbtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-sbtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-sbtg-heading {\r\n            font-family: var(--sbtg-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-sbtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-sbtg-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(--sbtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--sbtg-ease);\r\n        }\r\n\r\n        .pg-sbtg-section:hover .pg-sbtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-sbtg-sub {\r\n            font-family: var(--sbtg-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-sbtg-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-sbtg-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(--sbtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-sbtg-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(--sbtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--sbtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-sbtg-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(245,158,11,0.10) 0%, rgba(236,72,153,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-sbtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-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-sbtg-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(--sbtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-sbtg-card:hover .pg-sbtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-down .pg-sbtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-sbtg-title {\r\n            font-family: var(--sbtg-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-sbtg-desc {\r\n            font-family: var(--sbtg-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-sbtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-sbtg-sec1 .pg-sbtg-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-sbtg-sec1 .pg-sbtg-card:hover {\r\n            border-color: var(--sbtg-yellow);\r\n            box-shadow: var(--sbtg-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-sbtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-heading.pg-sbtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-kw.pg-sbtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-kw.pg-sbtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #f59e0b, #ec4899, #ffffff);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-sub.pg-sbtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-card.pg-sbtg-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-sbtg-sec2 .pg-sbtg-card.pg-sbtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #f59e0b, #764ba2, #06b6d4);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-card.pg-sbtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-card.pg-sbtg-sec2-card:hover {\r\n            border-color: rgba(245,158,11,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 warm krabby patty bg \/ white cards\r\n           ============================== *\/\r\n        .pg-sbtg-sec3 {\r\n            background: #fffbeb;\r\n        }\r\n\r\n        .pg-sbtg-sec3 .pg-sbtg-card.pg-sbtg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #f0e6c8;\r\n            box-shadow: 0 2px 8px rgba(245,158,11,0.04);\r\n        }\r\n\r\n        .pg-sbtg-sec3 .pg-sbtg-card.pg-sbtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #f59e0b, #ec4899, #06b6d4);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-sbtg-sec3 .pg-sbtg-card.pg-sbtg-sec3-card:hover {\r\n            border-color: var(--sbtg-yellow);\r\n            box-shadow: var(--sbtg-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-sbtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-sbtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-sbtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-sbtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-sbtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-sbtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-sbtg-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-sbtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-sbtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-sbtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-sbtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-sbtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-sbtg-down', 'pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-sbtg-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-sbtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-sbtg-down', 'pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!-- START OF FILE Spongebob 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    .pg-tool-wrapper {\r\n        \/* TYPOGRAPHY - BOLD AND PLAYFUL *\/\r\n        --primary-font: \"Fredoka One\", \"Comic Sans MS\", \"Marker Felt\", system-ui, -apple-system, sans-serif;\r\n        --body-font: \"Nunito\", system-ui, sans-serif;\r\n        \r\n        \/* THEME PALETTE - BIKINI BOTTOM VIBES *\/\r\n        --theme-panel: rgba(14, 165, 233, 0.15); \/* Ocean glass *\/\r\n        --theme-panel-bg: rgba(15, 23, 42, 0.85); \/* Deep ocean dark *\/\r\n        --theme-border: rgba(253, 224, 71, 0.4); \/* Sponge yellow border *\/\r\n        \r\n        \/* SPONGEBOB ACCENTS *\/\r\n        --sponge-yellow: #fde047;\r\n        --sponge-gold: #eab308;\r\n        --ocean-cyan: #22d3ee;\r\n        --ocean-blue: #0284c7;\r\n        --patrick-pink: #f472b6;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #94a3b8;\r\n        \r\n        \/* EXACT BACKGROUND REQUIRED BY PROMPT *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-sponge: linear-gradient(135deg, #fde047 0%, #eab308 100%);\r\n        --grad-ocean: linear-gradient(135deg, #22d3ee 0%, #0284c7 100%);\r\n        --grad-dark: linear-gradient(180deg, rgba(15,23,42,0.9) 0%, rgba(2,6,23,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-yellow: 0 0 20px rgba(253, 224, 71, 0.6);\r\n        --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.5);\r\n        --shadow-ui: 0 15px 40px rgba(0, 0, 0, 0.7);\r\n        --shadow-card: 0 8px 24px rgba(0,0,0,0.5);\r\n        --glass-blur: blur(16px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\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%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        \/* MASTER BACKGROUND *\/\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES *\/\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-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 - MEME BOLD TYPOGRAPHY *\/\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.6rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: var(--sponge-yellow);\r\n        text-shadow: \r\n            3px 3px 0 #000, \r\n            -2px -2px 0 var(--ocean-blue), \r\n            2px -2px 0 var(--ocean-blue), \r\n            -2px 2px 0 var(--ocean-blue), \r\n            2px 2px 0 var(--ocean-blue),\r\n            0 8px 15px rgba(0,0,0,0.6);\r\n        max-width: 900px;\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: 15px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title i {\r\n        color: #fff;\r\n        text-shadow: var(--glow-cyan);\r\n        background: var(--ocean-blue);\r\n        border-radius: 50%;\r\n        padding: 8px;\r\n        font-size: 2.8rem;\r\n        box-shadow: inset 0 0 10px rgba(255,255,255,0.5);\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-main-title:hover i {\r\n        transform: rotate(-15deg) scale(1.15);\r\n        background: var(--patrick-pink);\r\n    }\r\n\r\n    .pg-main-title:hover {\r\n        transform: scale(1.02);\r\n        color: #fff;\r\n        text-shadow: \r\n            3px 3px 0 #000, \r\n            -2px -2px 0 var(--patrick-pink), \r\n            2px -2px 0 var(--patrick-pink), \r\n            -2px 2px 0 var(--patrick-pink), \r\n            2px 2px 0 var(--patrick-pink),\r\n            0 8px 25px rgba(244, 114, 182, 0.6);\r\n    }\r\n    \r\n    .pg-subtitle {\r\n        font-family: var(--body-font);\r\n        font-size: 1.15rem;\r\n        color: rgba(255, 255, 255, 0.95);\r\n        max-width: 800px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 15px;\r\n        font-weight: 700;\r\n        text-shadow: 0 2px 6px rgba(0,0,0,0.9);\r\n        background: rgba(0,0,0,0.3);\r\n        padding: 10px 20px;\r\n        border-radius: 50px;\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .pg-generator-card {\r\n        background: var(--theme-panel-bg);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 3px solid var(--theme-border); \r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), 0 0 40px rgba(2, 132, 199, 0.4); \r\n        border-radius: 20px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* BUBBLE OVERLAYS *\/\r\n    .pg-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50px; right: -50px;\r\n        width: 200px; height: 200px;\r\n        background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* ASYMMETRIC CONTROLS LAYOUT *\/\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 2px dashed rgba(34, 211, 238, 0.4);\r\n        display: grid;\r\n        grid-template-columns: 1.3fr 1fr;\r\n        gap: 30px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* INPUT SECTION: Full Box Fill *\/\r\n    .pg-input-section {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(2, 6, 23, 0.8);\r\n        border: 2px solid rgba(34, 211, 238, 0.5);\r\n        border-radius: 12px;\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 20px rgba(0,0,0,0.8);\r\n        flex-grow: 1; \/* Stretch to fill column *\/\r\n        height: 100%;\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--sponge-yellow);\r\n        box-shadow: inset 0 0 25px rgba(253, 224, 71, 0.15), 0 0 15px rgba(253, 224, 71, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        height: 100% !important; \/* Extends to full available box area *\/\r\n        min-height: 250px !important;\r\n        flex-grow: 1 !important; \/* Extends to fill space above toolbar *\/\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(--primary-font) !important;\r\n        font-weight: 700 !important;\r\n        font-size: 1.7rem !important;\r\n        outline: none !important;\r\n        text-align: center !important;\r\n        text-shadow: 2px 2px 4px #000;\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    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(253, 224, 71, 0.5);\r\n    }\r\n\r\n    \/* TOOLBAR FOR COPY\/PASTE\/SELECT\/PRESETS *\/\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(15, 23, 42, 0.9);\r\n        padding: 15px;\r\n        border-top: 1px solid rgba(34, 211, 238, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        color: var(--text-bright);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 8px 12px;\r\n        font-family: var(--body-font);\r\n        font-size: 0.8rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(253, 224, 71, 0.2);\r\n        color: var(--sponge-yellow);\r\n        border-color: var(--sponge-yellow);\r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n\r\n    .pg-toolbar-btn.primary-btn {\r\n        background: rgba(2, 132, 199, 0.3);\r\n        border-color: var(--ocean-cyan);\r\n        color: var(--ocean-cyan);\r\n    }\r\n    \r\n    .pg-toolbar-btn.primary-btn:hover {\r\n        background: var(--ocean-cyan);\r\n        color: #000;\r\n    }\r\n\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(244, 114, 182, 0.15);\r\n        color: var(--patrick-pink);\r\n        border: 1px solid var(--patrick-pink);\r\n        padding: 8px 12px;\r\n        font-family: var(--body-font);\r\n        font-size: 0.8rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\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        flex-grow: 1;\r\n        max-width: 250px;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--patrick-pink);\r\n        color: #000;\r\n        box-shadow: 0 0 15px rgba(244, 114, 182, 0.6);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--theme-panel-bg);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* SETTINGS SECTION (RIGHT COLUMN) *\/\r\n    .pg-settings-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n    }\r\n\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.95rem;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        margin-bottom: 12px;\r\n        text-shadow: 0 2px 4px #000;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--sponge-yellow);\r\n        margin-right: 10px;\r\n        font-size: 1.2rem;\r\n        filter: drop-shadow(0 0 5px var(--sponge-yellow));\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(0, 0, 0, 0.4);\r\n        border: 2px solid rgba(255, 255, 255, 0.1);\r\n        padding: 14px 10px;\r\n        color: var(--text-muted);\r\n        font-family: var(--body-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        cursor: pointer;\r\n        border-radius: 12px;\r\n        transition: var(--transition-ui);\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    .pg-option-btn i {\r\n        font-size: 1.5rem;\r\n        transition: var(--transition-fast);\r\n    }\r\n\r\n    \/* MICRO-INTERACTIONS: Button Fill Slide *\/\r\n    .pg-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -100%; left: 0; width: 100%; height: 100%;\r\n        background: var(--grad-sponge);\r\n        transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        z-index: 0;\r\n    }\r\n\r\n    .pg-option-btn > * { position: relative; z-index: 1; }\r\n\r\n    .pg-option-btn:hover {\r\n        border-color: var(--sponge-yellow);\r\n        color: var(--sponge-yellow);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-option-btn:hover i { transform: scale(1.2) rotate(5deg); }\r\n\r\n    .pg-option-btn.active { \r\n        border-color: var(--sponge-yellow);\r\n        color: #000; \r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n    \r\n    .pg-option-btn.active::before { bottom: 0; }\r\n    .pg-option-btn.active i { color: #000; text-shadow: none; }\r\n\r\n    \/* RESULTS AREA - 3 CARDS PER ROW REQUIRED *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n        z-index: 1;\r\n        background: rgba(2, 6, 23, 0.6);\r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr); \/* 3 CARDS *\/\r\n        gap: 25px;\r\n        position: relative; \r\n    }\r\n\r\n    \/* MICRO-INTERACTION: Card Tilt & Glow *\/\r\n    .pg-result-card {\r\n        background: rgba(15, 23, 42, 0.95);\r\n        border: 2px solid rgba(34, 211, 238, 0.2);\r\n        padding: 25px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 16px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 160px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .pg-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 5px; height: 100%;\r\n        background: var(--grad-ocean);\r\n        transition: width 0.3s ease;\r\n    }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-5px);\r\n        box-shadow: -8px 12px 25px rgba(0, 0, 0, 0.9), var(--glow-cyan);\r\n        border-color: var(--ocean-cyan);\r\n        background: #000;\r\n        z-index: 10;\r\n    }\r\n    \r\n    .pg-result-card:hover::after { width: 8px; background: var(--grad-sponge); }\r\n\r\n    \/* CARD HEADER & COPY ICON *\/\r\n    .pg-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: 15px;\r\n        border-bottom: 2px dashed rgba(255,255,255,0.1);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.95rem;\r\n        font-weight: 800;\r\n        color: var(--ocean-cyan);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-card-title i {\r\n        color: var(--sponge-yellow);\r\n        font-size: 1.2rem;\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: var(--text-bright);\r\n        letter-spacing: 2px;\r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-title i {\r\n        transform: rotate(180deg) scale(1.3);\r\n    }\r\n\r\n    \/* MANDATORY COPY ICON BUTTON *\/\r\n    .pg-card-copy-btn {\r\n        background: rgba(34, 211, 238, 0.1);\r\n        border: 2px solid rgba(34, 211, 238, 0.3);\r\n        color: var(--ocean-cyan);\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 12px;\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    .pg-card-copy-btn i {\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: var(--ocean-cyan);\r\n        color: #000;\r\n        box-shadow: var(--glow-cyan);\r\n        transform: scale(1.1) rotate(-5deg);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover i { transform: scale(1.2); }\r\n    .pg-card-copy-btn:active { transform: scale(0.9) rotate(5deg); }\r\n\r\n    \/* CRITICAL TEXT WRAP FIX *\/\r\n    .pg-card-preview {\r\n        font-size: 1.4rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        font-family: var(--primary-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 10px; \r\n        transition: var(--transition-fast);\r\n        \r\n        \/* THE FIX - Ensures all massive texts break properly in 3 column grids *\/\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: 2px 2px 4px #000;\r\n        line-height: 1.6; \r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: var(--sponge-yellow);\r\n        text-shadow: 3px 3px 0 #000, 0 0 15px rgba(253,224,71,0.5);\r\n    }\r\n\r\n    \/* LOAD MORE CTA - Floating Bubble Button *\/\r\n    .pg-btn-load {\r\n        background: var(--grad-ocean);\r\n        color: #fff;\r\n        border: none;\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 900;\r\n        font-size: 1.1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 50px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: var(--shadow-card), 0 5px 15px rgba(34,211,238,0.5);\r\n    }\r\n    \r\n    .pg-btn-load:hover { \r\n        background: var(--grad-sponge); \r\n        color: #000;\r\n        box-shadow: 0 8px 25px rgba(253, 224, 71, 0.6);\r\n        transform: translateY(-4px) scale(1.02);\r\n    }\r\n    \r\n    .pg-btn-load:hover i { transform: translateY(5px); }\r\n    .pg-btn-load:active { transform: translateY(0) scale(0.95); }\r\n\r\n    \/* TOAST ALERT *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: rgba(15, 23, 42, 0.98);\r\n        backdrop-filter: blur(10px);\r\n        color: #fff;\r\n        padding: 16px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 12px;\r\n        border: 2px solid var(--sponge-yellow);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-yellow);\r\n        letter-spacing: 1px;\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: 12px;\r\n    }\r\n    \r\n    .pg-toast i { color: var(--sponge-yellow); font-size: 1.4rem; }\r\n    \r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN *\/\r\n    @media (max-width: 1024px) {\r\n        .pg-result-list { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.8rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .pg-result-list { grid-template-columns: 1fr; } \/* Stack to 1 card on small devices *\/\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 150px !important; font-size: 1.3rem !important; }\r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; text-align: center; }\r\n        .pg-result-list { gap: 15px; } \r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.75rem; }\r\n        .pg-option-btn i { font-size: 1.2rem; }\r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.95rem; width: 100%; justify-content: center; letter-spacing: 1px;}\r\n        .pg-main-title { font-size: 2rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\" id=\"pg-spongebob-tool\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\"><i class=\"fa-solid fa-sponge\"><\/i> Spongebob Text Generator \u2013 Mock Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">gEnErAtE mOcKiNg tExT, chaotic absurdist memes, or stylize your words with readable mirror loops and digital gothic fonts. Perfect for instant internet sarcasm.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <!-- INPUT SECTION: Left side heavy -->\r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-comment-dots\"><\/i> E n t e r \u00a0 T e x t<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"type something serious here to be mocked...\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn primary-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83c\udf4d M e m e \u00a0 P r e s e t s<\/option>\r\n                                <option value=\"I'm not going to write it like that.\">\"Not going to write it\"<\/option>\r\n                                <option value=\"You can't just make a meme out of everything.\">\"Can't make a meme\"<\/option>\r\n                                <option value=\"Is mayonnaise an instrument?\">Mayonnaise Instrument<\/option>\r\n                                <option value=\"I wumbo, you wumbo, he she me wumbo.\">Wumbo Quote<\/option>\r\n                                <option value=\"Are you ready kids?\">Ready Kids<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- SETTINGS SECTION: Right Side -->\r\n                <div class=\"pg-settings-section\">\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-masks-theater\"><\/i> V i b e \u00a0 M o d e<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn mode-btn active\" data-val=\"Mocking\">\r\n                                <i class=\"fa-solid fa-shuffle\"><\/i> mOcKiNg\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Absurd\">\r\n                                <i class=\"fa-solid fa-star-half-stroke\"><\/i> \ud83c\udf1f A b S u R d\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"HalfMirror\">\r\n                                <i class=\"fa-solid fa-arrows-left-right-to-line\"><\/i> H\u0258ll\u01eb (Mirror)\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-g\"><\/i> \ud835\udd72\ud835\udd94\ud835\udd99\ud835\udd8d\ud835\udd8e\ud835\udd88\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> D e c o r a t i o n<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn style-btn active\" data-val=\"Clean\">\r\n                                <i class=\"fa-solid fa-check\"><\/i> Pure\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Bubbles\">\r\n                                <i class=\"fa-solid fa-soap\"><\/i> Bubbles \ud83e\udee7\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Ocean\">\r\n                                <i class=\"fa-solid fa-water\"><\/i> Ocean \ud83c\udf0a\ud83c\udf4d\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Sparkles\">\r\n                                <i class=\"fa-solid fa-sparkles\"><\/i> Sparkle \u2728\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <!-- 3 CARDS PER ROW AS PER NEW PROMPT -->\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <!-- +9 LOAD MORE BUTTON -->\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>G E N E R A T E \u00a0 M O R E<\/span> <i class=\"fa-solid fa-plus\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> S A R C A S M \u00a0 C O P I E D<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('pg-spongebob-tool');\r\n    const inputEl = wrapper.querySelector('#pgInputText');\r\n    const resultList = wrapper.querySelector('#pgResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#pgLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#pgToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#pgBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#pgBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#pgBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#pgPresetSelect');\r\n\r\n    let currentMode = 'Mocking';\r\n    let currentStyle = 'Clean';\r\n    let limit = 9;  \/\/ Load 9 cards initially (3 rows of 3)\r\n    const LOAD_INCREMENT = 9; \r\n\r\n    \/\/ Character Mappings\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const modGothic = \"\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\ud835\udd6c\ud835\udd6d\ud835\udd6e\ud835\udd6f\ud835\udd70\ud835\udd71\ud835\udd72\ud835\udd73\ud835\udd74\ud835\udd75\ud835\udd76\ud835\udd77\ud835\udd78\ud835\udd79\ud835\udd7a\ud835\udd7b\ud835\udd7c\ud835\udd7d\ud835\udd7e\ud835\udd7f\ud835\udd80\ud835\udd81\ud835\udd82\ud835\udd83\ud835\udd84\ud835\udd85\";\r\n    const mirrorMap = {\r\n        'a': '\u0252', 'c': '\u0254', 'e': '\u0258', 'f': '\ua7fb', 'g': '\u01eb', 'h': '\u029c',\r\n        'j': '\ua7fe', 'k': '\u029e', 'r': '\u027f', 's': '\u01a8', 'y': '\u028f',\r\n        'B': '\u1660', 'C': '\u0186', 'D': '\u15e1', 'E': '\u018e', 'F': '\ua7fb', 'G': '\u04d8',\r\n        'J': '\u1490', 'L': '\u2143', 'N': '\u0418', 'P': '\ua7fc', 'R': '\u042f', 'S': '\u01a7'\r\n    };\r\n\r\n    const emojis = {\r\n        Bubbles: ['\ud83e\udee7', '\ud83d\udcad', '\ud83d\udc1f', '\u2693'],\r\n        Ocean: ['\ud83c\udf0a', '\ud83c\udf4d', '\ud83e\udd80', '\u2b50'],\r\n        Sparkles: ['\u2728', '\ud83d\udcab', '\ud83c\udf1f', '\ud83d\udc96']\r\n    };\r\n\r\n    \/\/ Robust Fallback Copy\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            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--sponge-yellow)';\r\n            btn.style.borderColor = 'var(--sponge-yellow)';\r\n            btn.style.color = '#000';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\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 for 100+ live previews\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Spongy Mock', 'Krusty Meme', 'Bikini Bottom', 'Pineapple Vibe', \r\n            'Squid Sarcasm', 'Patrick Star', 'Plankton Logic', 'Barnacle Boy',\r\n            'Chum Bucket', 'Flying Dutchman', 'Mermaid Man', 'Gary Meow'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `sb-${i}`,\r\n                name: names[i % names.length] + ` v.${Math.floor(Math.random()*99)+1}`,\r\n                icon: ['sponge', 'fish', 'anchor', 'ship', 'burger', 'water'][i % 6]\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    \/\/ Logic Parsers\r\n    const strictMocking = (text, shift = false) => {\r\n        let upper = shift;\r\n        return Array.from(text).map(c => {\r\n            if (\/[a-zA-Z]\/.test(c)) {\r\n                const res = upper ? c.toUpperCase() : c.toLowerCase();\r\n                upper = !upper; \/\/ flip toggle on letter only\r\n                return res;\r\n            }\r\n            return c; \/\/ keep spaces\/punct\r\n        }).join('');\r\n    };\r\n\r\n    const applyHalfMirror = (text) => {\r\n        return Array.from(text).map(c => mirrorMap[c] ? mirrorMap[c] : c).join('');\r\n    };\r\n\r\n    const applyGothic = (text) => {\r\n        return Array.from(text).map(c => {\r\n            const idx = baseChars.indexOf(c);\r\n            return idx !== -1 ? modGothic[idx] : c;\r\n        }).join('');\r\n    };\r\n\r\n    \/\/ Main Transform\r\n    const transformLogic = (text, mode, style, varIndex) => {\r\n        if (!text) return \"\";\r\n        let result = text;\r\n        \r\n        \/\/ 1. MODES\r\n        if (mode === 'Mocking') {\r\n            \/\/ Strictly alternates case. Varies starting case by index\r\n            result = strictMocking(text, varIndex % 2 === 0);\r\n        } \r\n        else if (mode === 'Absurd') {\r\n            \/\/ Mocking + fullwidth spaces + chaotic logic\r\n            let mocked = strictMocking(text, Math.random() > 0.5);\r\n            result = Array.from(mocked).map(c => c === ' ' ? ' \\u200B ' : c).join('');\r\n            if(varIndex % 3 === 0) result = result.replace(\/o\/gi, '0');\r\n        }\r\n        else if (mode === 'HalfMirror') {\r\n            result = applyHalfMirror(text);\r\n        }\r\n        else if (mode === 'Gothic') {\r\n            result = applyGothic(text);\r\n        }\r\n\r\n        \/\/ 2. STYLES (Decorations)\r\n        if (style !== 'Clean') {\r\n            const arr = emojis[style];\r\n            const sym = arr[varIndex % arr.length];\r\n            const sym2 = arr[(varIndex+1) % arr.length];\r\n            result = `${sym} ${result} ${sym2}`;\r\n            \r\n            \/\/ In Absurd + Style, inject symbol randomly\r\n            if(mode === 'Absurd' && varIndex % 2 === 0) {\r\n                const words = result.split(' ');\r\n                if(words.length > 2) {\r\n                    words.splice(Math.floor(words.length\/2), 0, sym);\r\n                    result = words.join(' ');\r\n                }\r\n            }\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 something serious here to be mocked...\";\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 = 'pg-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Sarcasm\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-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 = `G E N E R A T E   M O R E (${remaining})`;\r\n        }\r\n    };\r\n\r\n    \/\/ Events\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 = ' B A S E   C O P I E D';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-check-double';\r\n                toast.querySelector('i').nextSibling.textContent = ' S A R C A S M   C O P I E D';\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 Spongebob Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n<section class=\"pg-sbtg-section pg-sbtg-sec1\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n\t\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\r\n\r\n\r\n    <section class=\"pg-sbtg-section pg-sbtg-sec1\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n            <h2 class=\"pg-sbtg-heading\">What Makes This <span class=\"pg-sbtg-kw\">SpongeBob Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-sbtg-sub\">Most mocking text tools randomly shuffle your casing and break the pattern. Our SpongeBob text generator uses a mathematically precise alternating algorithm to create the perfect MoCkInG tExT that reads exactly like the iconic meme \u2014 every single time.<\/p>\r\n            <div class=\"pg-sbtg-grid\">\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(245,158,11,0.12);color:#f59e0b;\"><i class=\"fa-solid fa-face-grin-tongue-wink\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Perfect Alternating Algorithm<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Our SpongeBob text generator toggles case precisely \u2014 lowercase, uppercase, lowercase, uppercase \u2014 without breaking on spaces or punctuation like buggy imitators do.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(236,72,153,0.12);color:#ec4899;\"><i class=\"fa-solid fa-shuffle\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Randomized Chaos Mode<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Toggle the chaos mode to randomize the letter casing instead of strict alternation \u2014 our SpongeBob text generator creates a wilder, more unhinged mocking vibe for maximum sarcasm energy.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(6,182,212,0.12);color:#06b6d4;\"><i class=\"fa-solid fa-text-width\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Smart Punctuation Handling<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Our SpongeBob text generator ignores spaces, commas, and periods in the alternating count so the casing pattern stays visually perfect across every word in your sentence.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(34,197,94,0.12);color:#22c55e;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Found the perfect sarcastic casing? One click copies the mOcKiNg text to your clipboard \u2014 our SpongeBob text generator preserves every uppercase and lowercase letter through the paste process.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(139,92,246,0.12);color:#8b5cf6;\"><i class=\"fa-solid fa-language\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Preserves Emojis Intact<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Other tools mangle your emojis when alternating cases \u2014 our SpongeBob text generator detects and skips emoji characters so your \ud83d\ude02 and \ud83d\ude44 stay perfectly intact in the output.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(249,115,22,0.12);color:#f97316;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Instant Browser Processing<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Our SpongeBob text generator converts your text locally in milliseconds \u2014 zero server calls, zero loading spinners, and zero data collection, just pure sarcastic text generation.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-sbtg-section pg-sbtg-sec2\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n            <h2 class=\"pg-sbtg-heading pg-sbtg-sec2-heading\">How to Use Our <span class=\"pg-sbtg-kw pg-sbtg-sec2-kw\">SpongeBob Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-sbtg-sub pg-sbtg-sec2-sub\">Creating sarcastic meme text takes exactly seconds. No formatting skills needed \u2014 just follow these steps and generate the perfect mocking text ready to deploy anywhere.<\/p>\r\n            <div class=\"pg-sbtg-grid\">\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(59,130,246,0.12);color:#3b82f6;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 1: Type Your Normal Text<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Enter any sentence, quote, or phrase into the input box \u2014 our SpongeBob text generator accepts standard text, emojis, and numbers as the base for your sarcastic transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(245,158,11,0.12);color:#f59e0b;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 2: Pick a Mocking Style<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Choose from strict alternating case, randomized chaos mode, or start-with-lowercase \u2014 our SpongeBob text generator gives you multiple sarcastic flavors for different levels of irony.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(20,184,166,0.12);color:#14b8a6;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 3: Fine-Tune the Rules<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Toggle whether spaces reset the case counter, whether to skip emojis, or whether to force the first letter to be lowercase \u2014 our SpongeBob text generator puts you in full control of the algorithm.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(236,72,153,0.12);color:#ec4899;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 4: Preview the Meme Text<\/div>\r\n                    <p class=\"pg-sbtg-desc\">See exactly how your sarcastic text looks before copying \u2014 our SpongeBob text generator shows a live preview so you can verify the mocking pattern reads perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(239,68,68,0.12);color:#ef4444;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 5: Copy the Output<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Hit the copy button to transfer your mOcKiNg text to the clipboard \u2014 our SpongeBob text generator ensures every carefully alternated letter copies without any formatting loss.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec2-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(139,92,246,0.12);color:#8b5cf6;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Step 6: Paste and Deploy<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Drop your sarcastic text into comments, tweets, or messages \u2014 our SpongeBob text generator output is pure plain text that works in every app, chat box, and social platform.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-sbtg-section pg-sbtg-sec3\">\r\n        <div class=\"pg-sbtg-wrap\">\r\n            <h2 class=\"pg-sbtg-heading\">Best Places to Use <span class=\"pg-sbtg-kw\">SpongeBob Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-sbtg-sub\">SpongeBob mocking text is the internet's universal sarcasm indicator. Here are the most effective places where our SpongeBob text generator output delivers maximum comedic impact and engagement.<\/p>\r\n            <div class=\"pg-sbtg-grid\">\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">TikTok Comment Sections<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Mocking text is the official language of TikTok comments \u2014 our SpongeBob text generator creates the exact sarcastic formatting that gets liked to the top of any controversial or funny video.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Instagram Story Replies<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Replying to an Instagram story with mOcKiNg text instantly signals playful sarcasm \u2014 our SpongeBob text generator makes your story replies stand out in a sea of boring plain-text responses.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Discord Server Banter<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Discord communities run on sarcasm \u2014 our SpongeBob text generator creates the perfect mocking responses for when someone says something objectively wrong in chat.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(124,58,237,0.12);color:#7c3aed;\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Sarcastic Tweets and Replies<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Quote-tweeting a bad take with SpongeBob text is an internet tradition \u2014 our SpongeBob text generator formats your sarcasm perfectly so the joke lands without explanation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">YouTube Comment Section<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Mocking text in YouTube comments is a proven engagement driver \u2014 our SpongeBob text generator creates the sarcastic replies that get hearted and replied to by thousands of viewers.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-sbtg-card pg-sbtg-sec3-card\">\r\n                    <div class=\"pg-sbtg-icon\" style=\"background:rgba(249,115,22,0.12);color:#f97316;\"><i class=\"fa-solid fa-comment-dots\"><\/i><\/div>\r\n                    <div class=\"pg-sbtg-title\">Reddit and Forum Posts<\/div>\r\n                    <p class=\"pg-sbtg-desc\">Use mocking text in subreddit comments and forum replies to express polite disagreement \u2014 our SpongeBob text generator lets you be sarcastic without crossing into actual hostility.<\/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            --sbtg-yellow: #f59e0b;\r\n            --sbtg-grad: linear-gradient(135deg, #f59e0b, #ec4899, #06b6d4);\r\n            --sbtg-shadow: 0 12px 30px rgba(245, 158, 11, 0.16);\r\n            --sbtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --sbtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --sbtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-sbtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--sbtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-sbtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-sbtg-heading {\r\n            font-family: var(--sbtg-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-sbtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-sbtg-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(--sbtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--sbtg-ease);\r\n        }\r\n\r\n        .pg-sbtg-section:hover .pg-sbtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-sbtg-sub {\r\n            font-family: var(--sbtg-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-sbtg-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-sbtg-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(--sbtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-sbtg-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(--sbtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--sbtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-sbtg-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(245,158,11,0.10) 0%, rgba(236,72,153,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-sbtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-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-sbtg-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(--sbtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-sbtg-card:hover .pg-sbtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-sbtg-card.pg-sbtg-down .pg-sbtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-sbtg-title {\r\n            font-family: var(--sbtg-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-sbtg-desc {\r\n            font-family: var(--sbtg-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-sbtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-sbtg-sec1 .pg-sbtg-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-sbtg-sec1 .pg-sbtg-card:hover {\r\n            border-color: var(--sbtg-yellow);\r\n            box-shadow: var(--sbtg-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-sbtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-heading.pg-sbtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-kw.pg-sbtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-kw.pg-sbtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #f59e0b, #ec4899, #ffffff);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-sub.pg-sbtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-card.pg-sbtg-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-sbtg-sec2 .pg-sbtg-card.pg-sbtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #f59e0b, #764ba2, #06b6d4);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-card.pg-sbtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-sbtg-sec2 .pg-sbtg-card.pg-sbtg-sec2-card:hover {\r\n            border-color: rgba(245,158,11,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 warm krabby patty bg \/ white cards\r\n           ============================== *\/\r\n        .pg-sbtg-sec3 {\r\n            background: #fffbeb;\r\n        }\r\n\r\n        .pg-sbtg-sec3 .pg-sbtg-card.pg-sbtg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #f0e6c8;\r\n            box-shadow: 0 2px 8px rgba(245,158,11,0.04);\r\n        }\r\n\r\n        .pg-sbtg-sec3 .pg-sbtg-card.pg-sbtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #f59e0b, #ec4899, #06b6d4);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-sbtg-sec3 .pg-sbtg-card.pg-sbtg-sec3-card:hover {\r\n            border-color: var(--sbtg-yellow);\r\n            box-shadow: var(--sbtg-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-sbtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-sbtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-sbtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-sbtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-sbtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-sbtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-sbtg-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-sbtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-sbtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-sbtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-sbtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-sbtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-sbtg-down', 'pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-sbtg-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-sbtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-sbtg-down', 'pg-sbtg-glow', 'pg-sbtg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\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-571","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>\u0645\u0648\u0644\u062f \u0646\u0635\u0648\u0635 \u0633\u0628\u0648\u0646\u062c \u0628\u0648\u0628 \u2013 \u062e\u062f\u0639\u0629 \u0641\u0648\u0631\u064a\u0629<\/title>\n<meta name=\"description\" content=\"\u0623\u0646\u0634\u0626 \u0646\u0635\u0648\u0635\u064b\u0627 \u0633\u0627\u062e\u0631\u0629 \u0648\u0645\u0636\u062d\u0643\u0629 \u0639\u0646 \u0633\u0628\u0648\u0646\u062c \u0628\u0648\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0644\u062f \u0646\u0635\u0648\u0635 \u0633\u0628\u0648\u0646\u062c \u0628\u0648\u0628 \u0627\u0644\u0645\u062c\u0627\u0646\u064a. \u0645\u062b\u0627\u0644\u064a \u0644\u0644\u0635\u0648\u0631 \u0627\u0644\u0645\u0636\u062d\u0643\u0629 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a - \u0627\u0646\u0633\u062e \u0648\u0627\u0644\u0635\u0642 \u0641\u064a \u062b\u0648\u0627\u0646\u064d.\" \/>\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\/ar\/spongebob-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spongebob Text Generator \u2013 Mock Instantly\" \/>\n<meta property=\"og:description\" content=\"Generate hilarious Spongebob mocking text with our free Spongebob Text Generator. Perfect for memes and captions \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/spongebob-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T09:13:25+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\\\/spongebob-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/spongebob-text-generator\\\/\",\"name\":\"Spongebob Text Generator \u2013 Mock Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-16T00:00:05+00:00\",\"dateModified\":\"2026-04-06T09:13:25+00:00\",\"description\":\"Generate hilarious Spongebob mocking text with our free Spongebob Text Generator. Perfect for memes and captions \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/spongebob-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/spongebob-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/spongebob-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spongebob Text Generator \u2013 Mock 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":"\u0645\u0648\u0644\u062f \u0646\u0635\u0648\u0635 \u0633\u0628\u0648\u0646\u062c \u0628\u0648\u0628 \u2013 \u062e\u062f\u0639\u0629 \u0641\u0648\u0631\u064a\u0629","description":"\u0623\u0646\u0634\u0626 \u0646\u0635\u0648\u0635\u064b\u0627 \u0633\u0627\u062e\u0631\u0629 \u0648\u0645\u0636\u062d\u0643\u0629 \u0639\u0646 \u0633\u0628\u0648\u0646\u062c \u0628\u0648\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0644\u062f \u0646\u0635\u0648\u0635 \u0633\u0628\u0648\u0646\u062c \u0628\u0648\u0628 \u0627\u0644\u0645\u062c\u0627\u0646\u064a. \u0645\u062b\u0627\u0644\u064a \u0644\u0644\u0635\u0648\u0631 \u0627\u0644\u0645\u0636\u062d\u0643\u0629 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a - \u0627\u0646\u0633\u062e \u0648\u0627\u0644\u0635\u0642 \u0641\u064a \u062b\u0648\u0627\u0646\u064d.","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\/ar\/spongebob-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Spongebob Text Generator \u2013 Mock Instantly","og_description":"Generate hilarious Spongebob mocking text with our free Spongebob Text Generator. Perfect for memes and captions \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/spongebob-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T09:13:25+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/spongebob-text-generator\/","url":"https:\/\/onlinetexteditor.io\/spongebob-text-generator\/","name":"Spongebob Text Generator \u2013 Mock Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-16T00:00:05+00:00","dateModified":"2026-04-06T09:13:25+00:00","description":"Generate hilarious Spongebob mocking text with our free Spongebob Text Generator. Perfect for memes and captions \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/spongebob-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/spongebob-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/spongebob-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Spongebob Text Generator \u2013 Mock 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\/ar\/wp-json\/wp\/v2\/pages\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/pages\/571\/revisions"}],"predecessor-version":[{"id":574,"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/pages\/571\/revisions\/574"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/ar\/wp-json\/wp\/v2\/media?parent=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}