# Global Scripts & Interactions

## Global Scripts & Interactions

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 (overlays, selects, tabs, accordions, collapse, tooltips). The header menu doesn't use Preline: see [Navigation](../../features/navigation/)
- Lenis smooth scrolling. See [Smooth Scroll](../../features/smooth-scroll/)
- 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.__themeConfig`, and uses that to configure the client modules. The Lenis instance is `window.__themeLenis`.

### 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

```js
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`:

```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

### Related Files You May Need

- `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.