Global Scripts & Interactions

Techlo Theme Documentation

Another advanced area that can confuse both beginners and experienced users is Techlo’s client-side behavior.

A lot of interaction logic is centralized in:

src/layouts/components/widgets/GlobalScripts.astro

What It Does

This file bootstraps interactive behavior for the whole site, including:

Lucide icon hydration
dynamic Preline component loading (dropdowns, overlays, tabs, accordions, selects)
Lenis smooth scrolling
scroll-reveal animations
button hover effects (text-flip, magnetic, creative-fill)

It reads the settings.smoothScroll and settings.animation blocks from config.toml, serializes them onto window.__techloThemeConfig, and uses that to configure the client modules.

Why It Is Structured This Way

Techlo avoids eagerly loading all client-side features up front. Instead, GlobalScripts.astro waits for:

idle time (requestIdleCallback)
or the first meaningful interaction (initOnFirstInteraction)

before importing heavier client modules.

That keeps initial page load lighter than putting every script on every page immediately.

Example Pattern Used

const loadDynamicModule = async (key, importer) => {
  try {
    return await importer();
  } catch (error) {
    // dev-only import misses are skipped; real errors re-throw
  }
};

Then features are loaded only when the DOM needs them — for example Preline overlays only if an .hs-overlay element exists, or Lucide only if [data-lucide] elements are present.

Respecting Reduced Motion

Both smooth scroll and animations honor the user’s reduced-motion preference when respectReducedMotion = true in config.toml:

[settings.smoothScroll]
  enable               = true
  respectReducedMotion = true

[settings.animation]
  enable               = true
  respectReducedMotion = true

Why This Matters When Debugging

If an interaction appears “broken,” it may not be a markup problem alone. The issue could be:

missing DOM selectors
reduced-motion conditions
a disabled feature in config.toml
a missing dynamic import
a feature only initializing after user interaction

src/layouts/components/widgets/Search.astro
src/layouts/components/widgets/ContactForm.astro
src/layouts/components/global/header/*.astro
src/plugins/

Rule Of Thumb

If the problem is visual structure, start in the Astro component.

If the problem is hydration, animations, dynamic imports, or interaction timing, check GlobalScripts.astro and the specific widget file next.