Libraries & Tools

Introduction

The NETWRIX project leverages a curated set of internal Terra libraries and trusted external packages to deliver high-quality, performant web experiences. These tools are carefully selected to solve specific problems while maintaining code consistency and developer productivity.

This document catalogs all libraries used in NETWRIX, organized by type, with descriptions and links to documentation.

Internal Libraries (Terra)

Terra maintains a suite of internal packages that encapsulate common patterns, reduce boilerplate, and ensure consistency across projects. These libraries are battle-tested across dozens of production sites.

Core Utilities

@terrahq/helpers

A comprehensive collection of utility functions covering everything from image preloading to third-party integrations.

Key Features:

Image preloading and lazy loading utilities
reCAPTCHA integration
HubSpot form helpers
Element visibility detection (isElementInViewport)
DOM manipulation utilities (digElement)
Performance optimization helpers

Example Usage:

import { isElementInViewport } from '@terrahq/helpers/isElementInViewport';
import { preloadImages } from '@terrahq/helpers/preloadImages';

// Check if element is visible
const isVisible = isElementInViewport({ el: element, debug: true });

// Preload critical images
await preloadImages(['/hero.jpg', '/logo.png']);

Used in NETWRIX for:

Viewport detection for animation triggers
Image preloading in AssetManager
Third-party script integration

UI Components

@terrahq/modal

A minimal, accessible modal library with focus trap, keyboard navigation, and customizable transitions.

Key Features:

Full keyboard navigation (ESC to close, TAB focus management)
Focus trap when modal is open
Customizable open/close animations
ARIA-compliant for accessibility
Works with vanilla JS and frameworks

Example Usage:

import Modal from '@terrahq/modal';

new Modal({
    element: document.querySelector('.js--modal-btn'),
    closeOnBackdropClick: true,
    showCloseButton: true,
    animationDuration: 300,
});

Used in NETWRIX for:

Video modals
Form popups
Content overlays
Image galleries

@terrahq/collapsify

Toggle visibility of sections with smooth transitions. Ideal for accordions, FAQs, and expandable menus.

Key Features:

Smooth height transitions
ARIA role management (aria-expanded, aria-hidden)
Keyboard accessible
Multiple instances support
Custom animation duration and easing

Example Usage:

import Collapsify from '@terrahq/collapsify';

new Collapsify({
    element: document.querySelector('.js--collapsify'),
    duration: 300,
    easing: 'ease-in-out',
});

Used in NETWRIX for:

FAQ sections
Accordion components
Expandable navigation menus
Collapsible content blocks

@terrahq/anchor-to

Smooth scrolling to anchors with customizable offsets and easing functions.

Key Features:

Smooth scroll animations
Custom offset for fixed headers
Easing function support
Popstate behavior (browser back/forward)
Event emitters for scroll start/end
Hash URL updates

Example Usage:

import AnchorTo from '@terrahq/anchor-to';

new AnchorTo({
    element: document.querySelector('.js--anchor-link'),
    offset: 80, // Account for fixed header
    duration: 800,
    easing: 'easeInOutQuad',
});

Used in NETWRIX for:

Navigation links to page sections
“Back to top” buttons
Table of contents navigation
Scroll to form sections

@terrahq/counter

Animated number counting component for stats, KPIs, and metrics.

Key Features:

Customizable start/end values
Duration and easing control
Decimal precision support
Trigger on scroll or manually
Formatting options (currency, percentages)

Example Usage:

import Counter from '@terrahq/counter';

new Counter({
    element: document.querySelector('.js--counter'),
    start: 0,
    end: 1000,
    duration: 2000,
    decimals: 0,
});

Used in NETWRIX for:

Statistics sections
Metrics displays
Achievement counters
Homepage hero numbers

Framework Support

@terrahq/astro-core

Shared utility layer for Astro projects, providing common patterns for hydration, script loading, and transitions.

Key Features:

DOM hydration patterns
Script loading strategies
SWUP-ready behaviors
Lifecycle event helpers
Performance optimization utilities

Used in NETWRIX for:

Astro component hydration
Client-side script coordination
SWUP integration helpers
Performance optimization

@terrahq/vue-core

Foundation for Vue.js projects with common patterns, composables, and utilities.

Key Features:

Lifecycle helpers
Reusable composables
Transition utilities
State management patterns
Consistent component structure

Note: While available, NETWRIX primarily uses Astro, not Vue.

Design System

@terrahq/design-system

Component-driven design system for visual consistency across Terra projects.

Key Features:

Standardized UI components
Global styles and CSS utilities
Design tokens (colors, spacing, typography)
Responsive grid system
Works with Vue and Astro

Used in NETWRIX for:

Consistent component styling
Design token reference
Global CSS utilities
Typography system

External Libraries

Animation & Motion

GSAP (GreenSock Animation Platform)

Industry-standard animation library for high-performance, timeline-based animations.

Why We Use It:

Hardware-accelerated performance (60fps)
Timeline sequencing with precise control
Extensive plugin ecosystem
Cross-browser compatibility
Best-in-class documentation

Key Plugins Used:

ScrollTrigger: Scroll-based animation triggers
Flip: State-based layout animations
Core: Timeline, easing, and tween controls

Documentation: https://greensock.com/docs/v3/GSAP

Used in NETWRIX for:

Page transitions
Hero animations
Scroll-triggered reveals
Interactive components
Preloader animations

@andresclua/infinite-marquee-gsap

GSAP-powered infinite marquee for smooth, continuous scrolling elements.

Key Features:

Seamless infinite loop
Speed and direction control
Pause on hover
Responsive behavior

Example Usage:

import { horizontalLoop } from '@andresclua/infinite-marquee-gsap';

const loop = horizontalLoop(children, {
    paused: false,
    repeat: -1,
    speed: 1,
    reversed: false,
});

Used in NETWRIX for:

Partner logo carousels
Testimonial tickers
Tag clouds
Continuous content displays

Page Transitions

Swup

Complete page transition library enabling SPA-like navigation without full reloads.

Why We Use It:

SEO-friendly (works with server-rendered HTML)
Extensive plugin system
Smooth transitions between pages
Form and script support
Progressive enhancement

Documentation: https://swup.js.org/

Plugins Used in NETWRIX:

@swup/head-plugin: Manages <head> updates
@swup/body-class-plugin: Updates body classes
@swup/scripts-plugin: Executes page scripts
@swup/js-plugin: Custom transition animations
@swup/debug-plugin: Development debugging

Used in NETWRIX for:

All page-to-page navigation
Coordinating In/Out animations
Managing component lifecycle
Script re-execution

Performance Optimization

Boostify

On-demand JavaScript loading based on scroll position and user interaction.

Why We Use It:

Reduces initial page load
Lazy loads below-fold components
Time-based script loading
Scroll-based triggers
License-based activation

Key Methods:

boostify.scroll(): Load on scroll proximity
boostify.onload(): Load after page load
boostify.loadScript(): Dynamic script injection

Documentation: https://www.npmjs.com/package/boostify

Used in NETWRIX for:

Loading components below the fold
Third-party script loading (GTM, analytics)
Video player initialization
Heavy component deferral

Blazy

Lightweight lazy loading library for images and iframes.

Key Features:

Intersection Observer support
Custom offset configuration
Success/error callbacks
Background image support
Responsive image handling

Example Usage:

import Blazy from 'blazy';

const blazy = new Blazy({
    selector: '.g--lazy-01',
    successClass: 'g--lazy-01--is-loaded',
    errorClass: 'g--lazy-01--is-error',
    loadInvisible: true,
});

Used in NETWRIX for:

Image lazy loading
Background image optimization
Iframe lazy loading
Performance optimization

UI Components

tiny-slider

Lightweight carousel/slider library with touch support.

Key Features:

Responsive breakpoints
Touch/swipe support
Autoplay functionality
Multiple slides per view
Navigation and pagination
Keyboard accessible

Documentation: https://github.com/ganlanyuan/tiny-slider

Used in NETWRIX for:

Content carousels
Image galleries
Testimonial sliders
Product showcases
Multi-item carousels

Utilities

@andresclua/jsutil

Lightweight JavaScript utilities for common tasks.

Key Functions:

u_stringToBoolean: String to boolean conversion
u_take_your_time: Promise-based delays
Event delegation helpers
DOM manipulation utilities
Array and object helpers

Example Usage:

import { u_stringToBoolean, u_take_your_time } from '@andresclua/jsutil';

const isActive = u_stringToBoolean('true'); // true
await u_take_your_time(1000); // Wait 1 second

Used in NETWRIX for:

Data attribute parsing
Timing control in animations
Utility functions throughout codebase

@andresclua/debounce-throttle

Performance optimization for high-frequency events.

Key Functions:

debounce: Delay execution until events stop
throttle: Limit execution frequency

Example Usage:

import { debounce, throttle } from '@andresclua/debounce-throttle';

const debouncedSearch = debounce(searchFunction, 300);
const throttledScroll = throttle(scrollHandler, 100);

Used in NETWRIX for:

Search input handling
Scroll event optimization
Resize event control
Form validation

@andresclua/validate

Form and input validation utilities.

Key Features:

Common validation types (email, phone, URL)
Custom validation rules
Lightweight and flexible
No dependencies

Used in NETWRIX for:

Form validation
Input field checks
Custom validation logic

Event Management

mitt

Tiny event emitter for decoupled communication.

Why We Use It:

Only 200 bytes
TypeScript support
Simple API
Perfect for pub/sub patterns

Example Usage:

import mitt from 'mitt';

const emitter = mitt();

// Subscribe
emitter.on('MitterContentReplaced', () => {
    console.log('Content replaced!');
});

// Publish
emitter.emit('MitterContentReplaced');

Used in NETWRIX for:

Handler lifecycle events
Component communication
SWUP transition coordination
Custom event systems

Search & Content

algoliasearch

Client library for Algolia’s search API.

Key Features:

Fast, typo-tolerant search
Faceted filtering
Geo-search capabilities
Analytics integration

Documentation: https://www.algolia.com/doc/

Used in NETWRIX for:

Blog post search
Resource filtering
Event search
Customer story filtering
FAQ search
Guides and documentation search

Media

@vimeo/player

Official Vimeo Player API for iframe embeds.

Key Features:

Full player control (play, pause, seek)
Event listeners (play, pause, ended)
Video properties access
Fullscreen control

Documentation: https://developer.vimeo.com/player/sdk

Used in NETWRIX for:

Video embeds
Video modal players
Custom video controls
Video analytics tracking

Animation Effects

@andresclua/perlindom

Perlin noise-based DOM animations for organic motion effects.

Key Features:

Smooth, organic movement
Customizable noise parameters
Performance-optimized
Canvas or DOM rendering

Used in NETWRIX for:

Background animations
Decorative motion effects
Interactive hover effects

Library Loading Strategy

Categories in extraAssets.js

Libraries are organized by priority and loading strategy:

1. getTerraInternal()

Critical libraries loaded immediately:

GSAP + plugins
Boostify
ScrollTrigger
isElementInViewport
digElement

2. getAnimations()

Page-specific animations:

HeroA, HeroH, HeroK
RevealIt, RevealStack

3. getModules()

Component libraries loaded on-demand:

Slider, Modal, Collapsify
Algolia, Vimeo
AnchorTo, FilterDropdown
All interactive components

4. getDeferred()

Non-critical features:

PerlinAnimation
Decorative effects

5. getThirdParty()

External services:

Analytics scripts
Tracking pixels
Chat widgets

Loading Flow

// 1. Critical libraries (immediate)
await assetManager.loadLibraries(); // GSAP, Boostify, etc.

// 2. Animations (on-demand, coordinated)
if (heroElement) {
    const HeroA = await assetManager.getAnimation("HeroA");
}

// 3. Components (lazy, via Boostify)
if (isInViewport(element)) {
    createInstance(); // Load instantly
} else {
    boostify.scroll({
        callback: () => createInstance() // Load on scroll
    });
}

Best Practices

✅ Do’s

Use Manager for library access

const gsap = Manager.getLibrary("GSAP").gsap;

Lazy load below-fold components

boostify.scroll({
    distance: 50,
    callback: async () => {
        const lib = await loadLibrary({ libraryName: "Slider" });
    }
});

Leverage Terra internal libraries first

// ✅ Use @terrahq/modal instead of third-party
import Modal from '@terrahq/modal';

Import only what you need

import { debounce } from '@andresclua/debounce-throttle';
// Not: import * as utils from '@andresclua/debounce-throttle';

Check library availability in Manager

const library = Manager.getLibrary("Slider");
if (!library) {
    library = await loadLibrary({ libraryName: "Slider" });
}

❌ Don’ts

Don’t load libraries globally

// ❌ Don't add <script> tags in HTML
// ✅ Use AssetManager and dynamic imports

Don’t duplicate libraries

// ❌ Don't import GSAP directly
import gsap from 'gsap';

// ✅ Get from Manager
const gsap = Manager.getLibrary("GSAP").gsap;

Don’t install redundant packages
Don’t skip cleanup

Adding New Libraries

Process

Check Terra Internal Libraries First
- Review @terrahq packages
- Check if functionality exists
Evaluate External Options
- Performance impact
- Bundle size
- Maintenance status
- Documentation quality
Install Package
Terminal window
```
npm install package-name
```

Add to extraAssets.js

export const getModules = () => {
    return [
        {
            name: "NewLibrary",
            domElement: document.querySelectorAll(".js--new-library"),
            resource: async () => {
                const { default: NewLibrary } = await import("new-library");
                return NewLibrary;
            },
        },
    ];
};

Allocate Instance Pool in Project.js

this.Manager.allocateInstances(["NewLibrary"]);

Create Handler
- Use template from handler/_handlerFolder/
- Implement lifecycle management

Register in Main.js

new NewLibraryHandler({ ...this.handler, name: "NewLibrary" });

Summary

The NETWRIX project uses a carefully curated set of libraries:

Internal (Terra):

Purpose-built for common patterns
Maintained by our team
Optimized for our workflow
Consistent across projects

External:

Industry-standard solutions
Well-maintained and documented
Performance-focused
Proven track records

Loading Strategy:

Critical libraries loaded immediately
Components loaded on-demand
Third-party scripts deferred
Performance-optimized throughout

By leveraging both internal and external libraries strategically, NETWRIX maintains high performance, developer productivity, and code quality.

📚 Framework Overview - Architecture context
🔄 Handlers System - Library integration patterns
🎯 Classes Structure - Using libraries in components
🎬 Animations - GSAP-specific patterns

Libraries & Tools

Introduction

Internal Libraries (Terra)

Core Utilities

UI Components

Framework Support

Design System

External Libraries

Animation & Motion

Page Transitions

Performance Optimization

UI Components

Utilities

Event Management

Search & Content

Media

Animation Effects

Library Loading Strategy

Categories in extraAssets.js

1. getTerraInternal()

2. getAnimations()

3. getModules()

4. getDeferred()

5. getThirdParty()

Loading Flow

Best Practices

✅ Do’s

❌ Don’ts

Adding New Libraries

Process

Summary

Related Topics