Techbyte Theme Documentation

Global Scripts & Interactions

Another advanced area that can confuse both beginners and experienced users is Techbyte’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 (accordions, overlays, tabs, selects, tooltips)
• Lenis smooth scrolling
• scroll-reveal animations (applied to [data-scroll-reveal] elements)
• the animated cursor follower
• Motion-powered micro-interactions and the Swiper hero slider

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

Why It Is Structured This Way

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

The Cursor Follower

The animated custom cursor can be turned off globally:

[settings.cursor]
  enable = true

It is also auto-disabled on touch / coarse-pointer devices, so you will not see it when testing on a phone or tablet.

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

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.