gclass-anims 1.0.0-beta.15 → 1.0.0-beta.16

package/AnimToggle.js

@@ -1,4 +1,6 @@
   import initListeners from './Listeners'
+  import { defaults, animations } from './Config.js'
+  import gsap from 'gsap'
 
 // localStorage key controlling whether the GSAP animation system is mounted.
 const STORAGE_KEY = 'gclass-animations-enabled'
@@ -111,12 +113,106 @@ export function disableReducedMotion() {
 }
 
 let cleanup = null
+let bootCleanup = null
+let bootTimeout = null
+let bootStyle = null
+
+const readBootTime = (els, fallback) => {
+  let max = null
+  for (const el of els) {
+    const cls = [...el.classList].find(c => c.startsWith('boot-time-'))
+    if (cls) {
+      const n = Number(cls.slice('boot-time-'.length))
+      if (!Number.isNaN(n)) max = max === null ? n : Math.max(max, n)
+    }
+  }
+  return max ?? fallback
+}
 
 // Boots the GSAP animation system unless animations are disabled (stored "off"
 // or reduced-motion fallback with no explicit choice). Idempotent: calling it
 // again tears down any previous run first.
+// Now also handles boot screen: any HTML/JSX with `.boot-up` anywhere is treated as the boot overlay.
+// No separate initBoot needed - just call initAnimations().
+// Boot stops all DOM rendering for defaults.bootTime (overwritten by boot-time-N class).
 export function initAnimations() {
   if (typeof window === 'undefined' || !getEnabled()) return
-  if (cleanup) cleanup()
+  if (cleanup) { cleanup(); cleanup = null }
+  if (bootCleanup) { bootCleanup(); bootCleanup = null }
+  if (bootTimeout) { clearTimeout(bootTimeout); bootTimeout = null }
+  if (bootStyle) { bootStyle.remove(); bootStyle = null; document.documentElement.classList.remove('gclass-booting') }
+
+  const bootEls = typeof document !== 'undefined' ? document.querySelectorAll(".boot-up") : []
+  if (!bootEls.length) {
+    // no .boot-up -> completely skip boot
+  } else if (bootEls.length > 1) {
+    console.error(`[initAnimations] Multiple .boot-up elements detected (${bootEls.length}) - skipping all boot animations`, bootEls)
+    bootEls.forEach(el => el.remove())
+    // fall through to normal initListeners without pausing DOM
+  } else {
+    const bootEl = bootEls[0]
+    const hasBootEnd = [...bootEl.classList].some(c => c.startsWith('boot-end-'))
+    if (!hasBootEnd) {
+      // no boot-end-* -> completely skip boot animation (still pause? spec says skip it)
+      // spec: skip boot-end animation if no class, but still do boot pause? user said "completely skip it if no .boot-end-<name> class is present"
+      // interpret as skip the exit animation only, still pause for bootTime
+      // To match "completely skip it" for boot-end, we just don't play exit tween
+    }
+    const bootTime = readBootTime(bootEls, defaults.bootTime ?? 2)
+    console.log(`[initAnimations] .boot-up found: ${bootEls.length} - pausing DOM for ${bootTime}s`, bootEls)
+    // stop all DOM rendering except .boot-up
+    bootStyle = document.createElement('style')
+    bootStyle.id = 'gclass-boot-style'
+    bootStyle.textContent = `html.gclass-booting{visibility:hidden} html.gclass-booting .boot-up,html.gclass-booting .boot-up *{visibility:visible} html.gclass-booting .boot-up{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}`
+    document.head.appendChild(bootStyle)
+    document.documentElement.classList.add('gclass-booting')
+    // ensure boot els are visible even if nested inside hidden ancestors
+    bootEls.forEach(el => { el.style.visibility = 'visible' })
+
+    // animations inside boot screen must play while rest of DOM is hidden - init scoped to boot-up
+    bootCleanup = initListeners(bootEl)
+
+    bootTimeout = setTimeout(() => {
+      const bootEndCls = [...bootEl.classList].find(c => c.startsWith('boot-end-'))
+      if (!bootEndCls) {
+        // no boot-end -> skip exit animation, just remove
+        bootCleanup?.(); bootCleanup = null
+        document.documentElement.classList.remove('gclass-booting')
+        bootStyle?.remove(); bootStyle = null
+        bootEls.forEach(el => el.remove())
+        bootTimeout = null
+        cleanup = initListeners()
+        return
+      }
+      const name = bootEndCls.slice('boot-end-'.length) // e.g. spawn-blur
+      const cfg = animations.find(a => a.sel === '.' + name)
+      const from = cfg?.from
+      const easeCl = [...bootEl.classList].find(c => c.startsWith('ease-'))
+      const ease = easeCl ? easeCl.split('-')[1] : defaults.ease
+      const dur = readBootTime([bootEl], defaults.effectDuration ?? 1) // reuse boot-time- or fallback to effectDuration; if boot-time used for pause, reuse same value for exit unless overridden
+      // Actually use boot-end-time-N if present, else effectDuration
+      const endTimeCls = [...bootEl.classList].find(c => c.startsWith('boot-end-time-'))
+      const endDur = endTimeCls ? Number(endTimeCls.slice('boot-end-time-'.length)) : dur
+
+      const finish = () => {
+        bootCleanup?.(); bootCleanup = null
+        document.documentElement.classList.remove('gclass-booting')
+        bootStyle?.remove(); bootStyle = null
+        bootEls.forEach(el => el.remove())
+        bootTimeout = null
+        cleanup = initListeners()
+      }
+
+      if (!cfg || !from) {
+        console.warn(`[initAnimations] boot-end-${name} has no from state - removing without animation`)
+        finish()
+        return
+      }
+      // play spawn in reverse (visible -> hidden) before removing
+      gsap.to(bootEl, { ...from, duration: endDur, ease, onComplete: finish })
+    }, bootTime * 1000)
+    return
+  }
+
   cleanup = initListeners()
 }

package/Animations.js

@@ -79,7 +79,11 @@ export function expandA (target , delay , dur , ease){
 }
 
 export function typewriter (target , text , dur , delay , ease){
-    return gsap.fromTo(target , {text:""} , {ease:easeOf(ease) , duration:dur , delay:delay , text:text})
+    // Any element using TextPlugin gets pre-wrap so "\n" from VSCode Enter or JS strings
+    // renders as a real line break and any innerHTML formatting is preserved.
+    gsap.utils.toArray(target).forEach(el => { if (el.style) el.style.whiteSpace = "pre-wrap" })
+    const value = String(text).replace(/\n/g, "<br>")
+    return gsap.fromTo(target , {text:""} , {ease:easeOf(ease) , duration:dur , delay:delay , text:{value}})
 }
 
 export function spawnSpinCCW (target , delay , dur , ease){

package/Boot.js

@@ -1,145 +1,12 @@
 import { initAnimations } from './AnimToggle.js'
 
-// Raw JS boot overlay — framework-agnostic, no React.
-// Shows #boot-overlay once per session, delays main DOM wiring until finished,
-// and keeps Config.js animations usable inside the overlay.
-// Works with any framework (vanilla, React, Vue, Svelte, Next, Nuxt, Angular) and with/without Tailwind.
-
-let hasBooted = false
-const BOOT_KEY = 'gclass-boot-done' // kept for optional persistence, not used for gate
-
-const readBootTime = (el, fallback) => {
-  const cls = [...el.classList].find(c => c.startsWith('boot-time-'))
-  return cls ? Number(cls.slice('boot-time-'.length)) : fallback
-}
-
-export async function initBoot({ enabled = false, time = 2, id = 'boot-overlay', onDone } = {}) {
-  if (typeof window === 'undefined') return () => {}
-  if (!enabled) {
-    initAnimations()
-    return () => {}
-  }
-  if (hasBooted) {
-    initAnimations()
-    return () => {}
-  }
-
-  let overlay = document.getElementById(id)
-  if (!overlay) {
-    const tryFetch = async (url) => {
-      try {
-        const res = await fetch(url)
-        if (res.ok) return await res.text()
-      } catch {}
-      return null
-    }
-    let html = await tryFetch(new URL('./Boot.html', import.meta.url).href)
-    if (!html) html = await tryFetch('/Boot.html')
-    if (!html) html = await tryFetch('./Boot.html')
-    if (html) {
-      const tpl = document.createElement('template')
-      tpl.innerHTML = html.trim()
-      const node = tpl.content.firstElementChild
-      if (node) {
-        document.body.prepend(node)
-        overlay = document.getElementById(id) ?? node
-      }
-    }
-  }
-  if (!overlay) {
-    initAnimations()
-    return () => {}
-  }
-
-  hasBooted = true
-  overlay.style.position = 'fixed'
-  overlay.style.inset = '0'
-  overlay.style.zIndex = '9999'
-  overlay.style.display = 'grid'
-  overlay.style.placeItems = 'center'
-  if (!overlay.style.background && !overlay.style.backgroundColor) {
-    overlay.style.background = '#020617'
-  }
-
-  // Isolate: detach all body content except overlay so first initAnimations() only wires overlay
-  // This works for vanilla <main>, React #root, Vue #app, Next #__next, Nuxt, Svelte, Angular
-  // Listeners.js scans body * regardless of display:none, so must physically detach
-  const toIsolate = [...document.body.children].filter(el => {
-    if (el.id === id) return false
-    if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.tagName === 'TEMPLATE' || el.tagName === 'LINK') return false
-    if (el.id === 'next-route-announcer' || el.hasAttribute('data-nextjs')) return false
-    return true
-  })
-  const placements = toIsolate.map(el => ({ el, parent: el.parentNode, next: el.nextSibling }))
-  placements.forEach(({ el }) => el.remove())
-  const prevOverflow = document.body.style.overflow
-  document.body.style.overflow = 'hidden'
-
-  initAnimations()
-  placements.forEach(({ parent, next, el }) => {
-    if (!parent || el.isConnected) return
-    if (next && next.isConnected && next.parentNode === parent) {
-      parent.insertBefore(el, next)
-    } else {
-      parent.appendChild(el)
-    }
-  })
-
-  const duration = readBootTime(overlay, time)
-
-  const timer = setTimeout(() => {
-    overlay.style.transition = 'opacity 0.4s ease'
-    overlay.style.opacity = '0'
-    setTimeout(() => {
-      overlay.remove()
-      document.body.style.removeProperty('overflow')
-      if (prevOverflow) document.body.style.overflow = prevOverflow
-      initAnimations()
-      onDone?.()
-    }, 400)
-  }, duration * 1000)
-
-  return () => {
-    clearTimeout(timer)
-    document.body.style.removeProperty('overflow')
-    if (prevOverflow) document.body.style.overflow = prevOverflow
-    placements.forEach(({ el, parent, next }) => {
-      if (!el.isConnected && parent) {
-        if (next && next.isConnected && next.parentNode === parent) parent.insertBefore(el, next)
-        else parent.appendChild(el)
-      }
-    })
-  }
+export function Boot(){
+  const els = document.querySelectorAll(".boot-up")
+  console.log(`[Boot -> initAnimations] .boot-up count: ${els.length}`, els)
+  // rewired: Boot now just delegates to initAnimations (single entry point)
+  return initAnimations()
 }
-
-export async function createBootOverlay(html, opts = {}) {
-  if (document.getElementById(opts.id ?? 'boot-overlay')) return initBoot(opts)
-  if (!html) {
-    const tryFetch = async (url) => {
-      try { const r = await fetch(url); if (r.ok) return await r.text() } catch {}
-      return null
-    }
-    html = await tryFetch(new URL('./Boot.html', import.meta.url).href)
-    if (!html) html = await tryFetch('/Boot.html')
-  }
-  const div = document.createElement('div')
-  div.id = opts.id ?? 'boot-overlay'
-  if (!html) {
-    div.className = `boot-time-${opts.time ?? 2}`
-    div.style.cssText = 'position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#020617;'
-    div.innerHTML = '<h1 class="spawn-up time-1">Loading...</h1>'
-  } else {
-    const tpl = document.createElement('template')
-    tpl.innerHTML = html.trim()
-    const node = tpl.content.firstElementChild
-    if (node) {
-      document.body.prepend(node)
-      return initBoot(opts)
-    }
-    div.innerHTML = html
-  }
-  document.body.prepend(div)
-  return initBoot(opts)
-}
-
-export default initBoot
+// keep named exports wired so index.js / dev don't break during test
+export const initBoot = Boot
+export const createBootOverlay = Boot
+export default Boot

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.16] - 2026-09-1
+- Added a new `.boot-up` class for boot up animations
+- Fixed text animations not taking formatting into account
+
+
 ## [1.0.0-beta.13] - 2026-08-27
 - Added a new `.fill-svg` modifier for the `.draw` and `.draw-split` classes that fills the SVG after it has been drawn.
 

package/Config.js

@@ -70,7 +70,8 @@ export const defaults = {
   typewriterSplitCharDuration: 0.05,
   minTextPartDuration: 0.3,
   revealDelay:0,
-  characterlist:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
+  characterlist:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz",
+  bootTime: 5,
 }
 
 export const animations = [

package/Listeners.js

@@ -93,9 +93,21 @@ const invokePlay = (config, el, delay, dur, ease) => {
     }
 }
 
-export default function initListeners() {
+export default function initListeners(root = document) {
     gsap.registerPlugin(TextPlugin, ScrollTrigger, SplitText)
 
+    // helper to scope queries to root (for boot screen: only boot-up subtree animates during boot)
+    const qAll = (sel) => {
+        if (root === document || root === document.documentElement || root === document.body) return gsap.utils.toArray(sel)
+        if (sel === "body *") return gsap.utils.toArray(root.querySelectorAll("*"))
+        try {
+            const els = [...(root.querySelectorAll ? root.querySelectorAll(sel) : [])]
+            if (root.matches?.(sel)) els.unshift(root)
+            // handle comma selectors where root itself may match one part
+            return els
+        } catch { return gsap.utils.toArray(sel) }
+    }
+
     const registeredListeners = []
         const onCompleteTweens = []
         const addListener = (el, type, fn) => {
@@ -358,7 +370,7 @@ export default function initListeners() {
             spawnConfigs.map(({ sel }) => "." + TEXT_PREFIX + sel.slice(1)).join(",")
 
         const getOrderDelay = (el, priority) => {
-            const samepri = gsap.utils.toArray(orderSelector())
+            const samepri = qAll(orderSelector())
                 .filter((e) => {
                     if (!e.classList.contains("order")) return false
                     const match = [...e.classList].find(p => p.startsWith("priority-"))
@@ -472,7 +484,10 @@ export default function initListeners() {
         // would render it in its connecting form instead of its correct END form),
         // but it should still be split into its own span so it animates too.
         const RTL_LETTER = /[\u0621-\u064A\u066E-\u06D5\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/
-        const getRTLCharSplit = (el) => new SplitText(el, {
+        const getRTLCharSplit = (el) => {
+            // Any element using SplitText gets pre-wrap so "\n" and formatting is preserved
+            if (el.style) el.style.whiteSpace = "pre-wrap"
+            return new SplitText(el, {
             type: "words",
             linesClass: "gsap-line",
             wordsClass: "gsap-word",
@@ -555,6 +570,7 @@ export default function initListeners() {
                 self.words.length = 0
             },
         })
+        }
 
         // Flex targets can't be split directly: the split parts would become
         // flex ITEMS, so justify-content/gap would apply per letter, whitespace-
@@ -595,6 +611,7 @@ export default function initListeners() {
         }
 
         const getSplit = (el, gran) => {
+            if (el.style) el.style.whiteSpace = "pre-wrap"
             let s = splitCache.get(el)
             const rtlChars = gran === "chars" && isRTLText(el)
             const key = rtlChars ? "rtl-chars" : gran
@@ -604,6 +621,9 @@ export default function initListeners() {
                     ? getRTLCharSplit(el)
                     : new SplitText(el, {
                         type: gran,
+                        tag: "span",
+                        reduceWhiteSpace: false,
+                        
                         linesClass: "gsap-line",
                         wordsClass: "gsap-word",
                         charsClass: "gsap-char",
@@ -739,7 +759,7 @@ export default function initListeners() {
         // created before any scroll/scroll-progress trigger measures its position.
         // Setting them up here (before the trigger pass below) keeps offsets correct
         // and lets the single ScrollTrigger.refresh() at the end reconcile layout.
-        gsap.utils.toArray(".pin").forEach(setupPin)
+        qAll(".pin").forEach(setupPin)
 
         // Scroll-driven extras - class-driven ScrollTrigger behaviours that don't
         // fit the spawn/loop machinery (no `play`/`build`), handled like `.pin`:
@@ -832,7 +852,7 @@ export default function initListeners() {
                 scrollTriggers.push(t.scrollTrigger)
             }
         }
-        gsap.utils.toArray('[class^="parallax-"],[class*=" parallax-"], .progress-bar, .scroll-fill, .scroll-fade-bg, .scroll-horizontal').forEach(setupScrollDriven)
+        qAll('[class^="parallax-"],[class*=" parallax-"], .progress-bar, .scroll-fill, .scroll-fade-bg, .scroll-horizontal').forEach(setupScrollDriven)
 
         // Scroller resolution: a `.scroll`/`.scroll-progress` element inside a
         // `.scroll-frame` container binds its trigger to THAT box instead of the
@@ -1001,7 +1021,7 @@ export default function initListeners() {
             })
             scrollTriggers.push(st)
         }
-        gsap.utils.toArray(".scroll, .scroll-progress").forEach(setupScroll)
+        qAll(".scroll, .scroll-progress").forEach(setupScroll)
 
         // SplitText scroll variants: `.spawn-text-<spawn>.scroll` plays the per-part
         // tween when the element enters the viewport and reverses on exit.
@@ -1009,7 +1029,7 @@ export default function initListeners() {
             if (isTypewriter || text === false) return
             const tSel = "." + TEXT_PREFIX + sel.slice(1)
 
-            gsap.utils.toArray(tSel + ".scroll:not(.scroll-progress)").forEach((el) => {
+            qAll(tSel + ".scroll:not(.scroll-progress)").forEach((el) => {
                 if (isReduced(el)) return
                 const { delay, duration } = readTiming(el)
                 const ease = getEase(el)
@@ -1034,7 +1054,7 @@ export default function initListeners() {
                 }))
             })
 
-            gsap.utils.toArray(tSel + ".scroll-progress").forEach((el) => {
+            qAll(tSel + ".scroll-progress").forEach((el) => {
                 if (isReduced(el)) return
                 const ease = getEase(el)
                 const parts = getParts(el, getGranularity(el))
@@ -1087,7 +1107,7 @@ export default function initListeners() {
 
         spawnConfigs.forEach((config) => {
             const { sel, typewriter: isTypewriter, typewriterSplit } = config
-            gsap.utils.toArray(sel).forEach((el) => {
+            qAll(sel).forEach((el) => {
                 if (el.classList.contains("scroll") || el.classList.contains("scroll-progress")) return
                 if (isPreserved(el)) return
                 if (isReduced(el)) return
@@ -1122,7 +1142,7 @@ export default function initListeners() {
         spawnConfigs.forEach(({ sel, from, typewriter: isTypewriter, text }) => {
             if (isTypewriter || text === false) return
             const tSel = "." + TEXT_PREFIX + sel.slice(1)
-            gsap.utils.toArray(tSel).forEach((el) => {
+            qAll(tSel).forEach((el) => {
                 if (el.classList.contains("scroll") || el.classList.contains("scroll-progress")) return
                 if (isPreserved(el)) return
                 if (isReduced(el)) return
@@ -1487,7 +1507,7 @@ export default function initListeners() {
 
         // Bind click + loop animations to every element present at load, tagging
         // them so the MutationObserver below never double-binds a dynamic one.
-        gsap.utils.toArray("body *").forEach((el) => {
+        qAll("body *").forEach((el) => {
             if (el.dataset?.gsapSetup) return
             el.dataset.gsapSetup = "1"
             setupClicks(el)
@@ -1608,7 +1628,7 @@ export default function initListeners() {
         appearObserver.observe(document.body, { childList: true, subtree: true })
 
         // Capture any .leave elements already present so they can exit later
-        gsap.utils.toArray(".leave").forEach(captureLeave)
+        qAll(".leave").forEach(captureLeave)
 
         const leaveObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
@@ -1625,7 +1645,7 @@ export default function initListeners() {
             if (positionTick) return
             positionTick = true
             requestAnimationFrame(() => {
-                gsap.utils.toArray(".leave").forEach((el) => {
+                qAll(".leave").forEach((el) => {
                     const s = leaveStates.get(el)
                     if (s) s.rect = el.getBoundingClientRect()
                 })
@@ -1666,7 +1686,7 @@ export default function initListeners() {
         // so dynamically-added .appear elements can animate under the new
         // engine run. data-gsap-preserved (cross-reset memory) and
         // data-gsap-ghost (detached .leave clones) are intentionally KEPT.
-        gsap.utils.toArray('[data-gsap-scroll],[data-gsap-setup],[data-gsap-pinned],[data-gsap-scroll-driven]').forEach((el) => {
+        qAll('[data-gsap-scroll],[data-gsap-setup],[data-gsap-pinned],[data-gsap-scroll-driven]').forEach((el) => {
             delete el.dataset.gsapScroll
             delete el.dataset.gsapSetup
             delete el.dataset.gsapPinned
@@ -1681,7 +1701,7 @@ export default function initListeners() {
         document.querySelectorAll('[data-gsap-radiate]').forEach((n) => n.remove())
         cssTweens.forEach((t) => t?.kill())
         cssTweens.length = 0
-        gsap.utils.toArray(".typewriter, .scramble").forEach(el => {
+        qAll(".typewriter, .scramble").forEach(el => {
             // Preserved-region typewriters/scrambles stay as-is (already at
             // their end state); finalize the rest so a mid-type/mid-scramble
             // kill can't strand partial or garbled text where the next run's

package/index.d.ts

@@ -220,15 +220,7 @@ export function hover(delay: number, target: TweenTarget, amount: number, dur: n
 export function marquee(target: TweenTarget, dir: string, duration: number, xOffset?: number, yOffset?: number, noRepeat?: boolean): any
 export function flip(state: any, ease: string, dur: number): any
 export function animatecss(target: TweenTarget, dur: number, delay: number, ease: string, propertyS: any, propertySValue: any, propertyE: any, propertyEValue: any): any
-// --- Boot ----------------------------------------------------------------
 
-export interface BootOptions {
-  enabled?: boolean
-  time?: number
-  id?: string
-  onDone?: () => void
-}
-export function initBoot(opts?: BootOptions): Promise<() => void>
-export function createBootOverlay(html?: string, opts?: BootOptions): Promise<() => void>
-export default function Boot(opts?: BootOptions): Promise<() => void>
+
+export default function Boot()
 

package/index.js

@@ -2,5 +2,5 @@ export { initAnimations, toggleAnimations, enableReducedMotion, disableReducedMo
 export { default as initListeners, registerComplete } from './Listeners.js'
 export { customAnims } from './CustomAnims.js'
 export { defaults, animations, normalize } from './Config.js'
-export { default as Boot, initBoot, createBootOverlay } from './Boot.js'
+export { Boot } from './Boot.js'
 export * from './Animations.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.16",
   "description": "A Tailwind-style utility layer on top of GSAP. Framework-agnostic - works in vanilla JS, React, Vue, Svelte, or any bundler.",
   "type": "module",
   "main": "index.js",
@@ -22,7 +22,6 @@
     "Config.js",
     "CustomAnims.js",
     "Boot.js",
-    "Boot.html",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"

package/Boot.html

@@ -1,18 +0,0 @@
-<!-- Boot.html — GClass boot overlay template -->
-<!-- 1. Put your boot HTML here. This file is scanned by Tailwind (v4 auto-detects *.html, v3 add "./Boot.html" to content[]) -->
-<!--    so any Tailwind utility + gclass-anims class (e.g. .spawn-*, .time-*) placed here is preserved in the CSS build. -->
-<!-- 2. Boot.js will fetch and inject this file if no #boot-overlay exists in the DOM. -->
-<!-- 3. Keep the outer id="boot-overlay" and .boot-time-N (N=seconds visible) — Boot.js reads it via readBootTime(). -->
-
-<div id="boot-overlay" class="boot-time-2 fixed inset-0 z-[9999] grid place-items-center bg-slate-950" style="position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#020617;">
-  <div class="flex flex-col items-center gap-4 p-8 text-center">
-    <!-- gclass-anims classes work here — Config.js:76 wiring runs inside the overlay -->
-    <h1 class="spawn-up time-1 text-4xl font-bold tracking-tight text-cyan-200 radiate radiate-z-9999 compatibility">GClass</h1>
-    <p class="spawn-fade time-1 text-sm text-slate-400">GSAP utilities</p>
-
-    <!-- Tailwind / other CSS lib classes also work — they are detected because this *.html is in tailwind content -->
-    <div class="mt-2 h-1 w-32 overflow-hidden rounded-full bg-slate-800">
-      
-    </div>
-  </div>
-</div>