Aurax — Documentation

01 Overview

Aurax is a professional, multi-purpose HTML template designed for digital agencies, creative portfolios, marketing companies, and personal portfolios. It provides a complete foundation for modern, responsive websites with advanced animations and interactions — without starting from scratch.

What you get

6 different homepage designs to choose from

30+ complete inner pages — services, portfolio, blog, contact, and more

Modern animations and visual effects

Mobile-responsive design

Working contact form and newsletter subscription

Easy customization without coding experience

This documentation helps both beginners and experienced developers customize and extend the template effectively.

02 Requirements

What you need

Computer — Windows, Mac, or Linux
Text editor — VS Code, Sublime Text, Notepad++, or any editor
Web browser — Chrome, Firefox, Safari, or Edge
File extraction software — to unpack the .zip download

Optional

Web hosting, for publishing your site online
An FTP client, for uploading files to a server
VS Code specifically, for a smoother editing experience

✓

No coding required for basic edits. Text, images, colors, and basic content can all be changed without writing a line of code.

03 Getting Started

Extract the filesFind the downloaded .zip, right-click and choose Extract (or Unzip), and place the folder somewhere memorable — e.g. Desktop/aurax-website.
Explore the projectOpen the extracted folder. You'll see files like index.html and about-us.html, plus an assets/ folder. Double-click index.html to open it in your browser — that's your starting point.
Choose your homepage styleSix homepage designs are included. Pick the one that fits, then optionally rename it to index.html to make it your main page.

Homepage file	Best for
`index.html`	Digital agencies
`index-branding-agency.html`	Branding companies
`index-design-studio.html`	Design businesses
`index-marketing-agency.html`	Marketing agencies
`index-personal-portfolio.html`	Individual portfolios
`index-ai-startup.html`	Technology / AI startups

04 Project Structure

folder tree

aurax/
├── index.html                    ← Main homepage
├── about-us.html                 ← About page
├── contact.html                  ← Contact page
├── [other HTML pages]            ← Other website pages
├── assets/
│   ├── css/
│   │   ├── common-style.css      ← Main styles & variables
│   │   ├── main.css              ← Component styles
│   │   ├── shop.css              ← Shop-specific styles
│   │   └── fontawesome.min.css   ← Icon styles
│   ├── js/
│   │   ├── main.js               ← Primary functionality
│   │   ├── hover-effect-manager.js ← WebGL effects
│   │   ├── gsap-animation.js     ← GSAP animations
│   │   ├── cursor.js             ← Custom cursor
│   │   ├── contact.js            ← Form handling
│   │   ├── mailchimp.js          ← Newsletter integration
│   │   └── lib/                  ← External libraries
│   ├── img/
│   │   ├── displacement/         ← WebGL effects (16 files)
│   │   ├── icons/                ← Custom 3D icons (8 files)
│   │   ├── image-trail/          ← Trail animations (12 files)
│   │   ├── sponsors/              ← Sponsor logos (12 SVGs)
│   │   ├── portfolio-[1-11].jpg
│   │   ├── team-[1-8].jpg
│   │   ├── post-[1-8].jpg
│   │   ├── product[01-08].jpg
│   │   └── service[01-04].jpg
│   ├── fonts/                    ← FontAwesome font files
│   └── lib/                      ← Bootstrap, GSAP, Swiper, VenoBox…
└── php/
    ├── contact.php                ← Contact form processing
    └── mailchimp-subscribe.php    ← Newsletter subscription

!

Stick to editing files in the root folder and assets/. The assets/lib/ folder holds third-party libraries — leave it alone unless you know what you're changing.

05 Technology & Dependencies

Core, pre-installed

Technology	Purpose	Location
HTML5	Page structure	All `.html` files
CSS3	Styling & layout	`assets/css/`
JavaScript	Interactivity	`assets/js/`
Bootstrap 5.x	Responsive framework	`assets/lib/bootstrap/`
jQuery 3.7.1	DOM manipulation	`assets/js/lib/jquary-3.7.1.min.js`
GSAP	Advanced animations	`assets/lib/gsap/`

Specialized libraries

Library	Purpose	Location
Swiper	Touch carousels	`assets/lib/swiper/`
Three.js	3D graphics	`assets/js/lib/three.min.js`
Odometer	Animated counters	`assets/lib/odometer/`
VenoBox	Lightbox galleries	`assets/lib/venobox/`
Masonry	Grid layouts	`assets/js/lib/masonry.pkgd.js`

Everything is bundled locally — no CDNs, no install step.

06 Template Features

Main features

6 homepage styles

30+ complete pages

Smooth-scroll animations & interactions

Fully mobile responsive

Working contact form (PHP)

Newsletter signup

Portfolio & blog image galleries

Custom desktop cursor

WebGL image hover effects

Animated preloader

Interactive elements

Magnetic buttons and links
Smooth scrolling with momentum
Text reveal animations
Image displacement effects
Carousel sliders, animated counters, progress indicators
Scroll-triggered animations

07 Page Guide

Homepage variations — choose one

File	Description
`index.html`	Digital Agency homepage (main)
`index-branding-agency.html`	Branding Agency layout
`index-design-studio.html`	Design Studio focused layout
`index-marketing-agency.html`	Marketing Agency layout
`index-personal-portfolio.html`	Personal Portfolio, offcanvas menu
`index-ai-startup.html`	AI Startup themed homepage

Content pages

File	Purpose
`about-us.html` / `about-me.html`	Company or individual about page
`agency-services.html`, `branding-services.html`, `marketing-services.html`	Service listings by focus
`service-details.html`	Individual service detail
`team.html` / `team-details.html`	Team listing / individual profile
`career.html` / `career-details.html`	Careers listing / individual posting
`pricing.html`	Pricing plans
`awards.html`	Awards showcase
`faq.html`	Frequently asked questions
`404.html`	Custom error page
`contact.html`	Contact form & info

Portfolio layouts

File	Layout type
`portfolio-fullscreen.html`	Fullscreen display
`portfolio-masonry.html`	Pinterest-style grid
`portfolio-2-columns.html`	2-column grid
`portfolio-3-columns.html`	3-column grid
`portfolio-4-columns.html`	4-column grid
`portfolio-details.html`	Individual project

Blog & shop

File	Layout / purpose
`blog-standard.html`	Traditional blog layout
`blog-grid.html` / `blog-grid-sidebar.html`	Grid, with or without sidebar
`blog-masonry.html`	Masonry layout
`blog-details.html`	Individual blog post
`shop.html` / `shop-full-width.html`	Product listing
`shop-details.html`	Individual product

08 Customization Guide

Website name

All HTML files

Find the <title> tag near the top of the file:

index.html

<title>My Creative Studio</title>

Save, then repeat for every page you use.

Logo

Prepare a logo at roughly 200×60px, PNG with a transparent background, saved into assets/img/. Then update every header reference:

header markup

<img src="assets/img/my-logo.png" alt="My Website Name">

Images

Match the replacement image's size to the original where possible, save it into assets/img/, then swap the filename:

example

<img src="assets/img/your-image.jpg" alt="Your Project">

Common locations: portfolio-1.jpg–portfolio-11.jpg, team-1.jpg–team-8.jpg, post-1.jpg–post-8.jpg, product01.jpg–product08.jpg.

Text

Open the page, find the copy, and replace it directly in the HTML:

before / after

<!-- Original -->
<h1>Digital Agency</h1>
<p>Our versatile team is built of designers, developers and digital marketers...</p>

<!-- Your version -->
<h1>My Creative Studio</h1>
<p>We specialize in helping businesses grow through innovative design...</p>

Colors

assets/css/common-style.css

All color decisions run through CSS custom properties near the top of the file:

--dl-primary-color#c4ee18 · lime accent

--dl-secondary-color#6600ff · purple

--dl-heading-color#030303 · headings

--dl-body-color#555555 · body text

--dl-bg-white#ffffff · background

--dl-bg-dark#121212 · dark background

--dl-bg-grey#f6f3ed · light background

common-style.css

/* Change primary color from lime green to blue */
--dl-primary-color: #0066cc;

/* Change secondary color from purple to orange */
--dl-secondary-color: #ff6600;

✓

Changes in common-style.css apply to every page at once — there's one source of truth for color.

Fonts

Swap the Google Fonts import and the matching variables:

common-style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

--dl-heading-font: "Roboto", sans-serif;
--dl-body-font: "Roboto", sans-serif;

Icons

Icons come from FontAwesome. Browse the icon library, then swap the class:

example

<!-- phone → envelope -->
<i class="fa-solid fa-envelope"></i>

Navigation

Search any page for <ul class="nav-menu"> and edit the list items directly:

nav-menu

<ul class="nav-menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="portfolio.html">Our Work</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

For a dropdown, nest another list inside the <li>:

dropdown

<li>
    <a href="services.html">Services</a>
    <ul>
        <li><a href="web-design.html">Web Design</a></li>
        <li><a href="branding.html">Branding</a></li>
        <li><a href="marketing.html">Marketing</a></li>
    </ul>
</li>

To remove an item, delete its entire <li>.

Sections

Every page is built from stacked <section> blocks:

anatomy

<section class="section-name">
    <div class="container">
        <!-- Section content here -->
    </div>
</section>

Remove a section — delete from the opening <section> to the closing </section>.
Move a section — copy that same span and paste it into another page.
Edit content — headings (<h2>/<h3>), descriptions (<p>), buttons (.default-btn), and lists (<ul>) are all edited in place.

09 HTML Guide

Document structure

page skeleton

<!doctype html>
<html class="no-js" lang="en">
<head><!-- Meta tags, title, CSS links --></head>
<body>
    <div class="loader-wrap">...</div>          <!-- Preloader -->
    <header class="main-header">...</header>    <!-- Header -->
    <div id="popup-search-box">...</div>        <!-- Search overlay -->

    <div id="smooth-wrapper">
        <div id="smooth-content">
            <main><!-- Page sections --></main>
        </div>
    </div>

    <footer>...</footer>
    <div class="blur-container">...</div>
    <div id="scrollup">...</div>
    <!-- Scripts -->
</body>
</html>

Key components

Header — multi-level dropdown nav, sticky behavior, light/dark logo switching, mobile trigger, search integration.
Hero sections — several variants tuned to each homepage type.
Portfolio grid — responsive Bootstrap grid, square/medium card sizes, hover effects, category filtering.
Testimonial carousel — Swiper-based, with thumbnail sync and a progress bar.

Reusable patterns

button

<a href="#" class="default-btn btn-bg-move-effect btn-elastic-effect">
    Button Text <i class="fa-regular fa-arrow-up-right"></i>
    <span></span>
</a>

portfolio card

<div class="col-lg-6">
    <div class="portfolio-item square">
        <a href="portfolio-details.html" class="portfolio-thumb dl-parallax dl-img-hover"
           data-cursor="View" data-cursor-color="#ffffff">
            <img src="assets/img/portfolio-1.webp" data-speed="0.8" alt="img">
        </a>
        <div class="portfolio-content">
            <a href="portfolio-details.html" class="portfolio-title">Project Title</a>
            <a href="portfolio-3-columns.html" class="portfolio-category">
                Category <span class="date">2026</span>
            </a>
        </div>
    </div>
</div>

10 CSS & Styling Guide

Architecture

assets/css/common-style.css — main styles & variables (3,344 lines)
assets/css/main.css — component styles
assets/css/shop.css — shop-specific styles

Core variables

:root

:root {
    /* Typography */
    --dl-heading-font: "Inter", sans-serif;
    --dl-body-font: "Inter", sans-serif;

    /* Colors */
    --dl-primary-color: #c4ee18;
    --dl-secondary-color: #6600ff;
    --dl-heading-color: #030303;
    --dl-body-color: #555555;

    /* Backgrounds */
    --dl-white-color: #ffffff;
    --dl-bg-white: #ffffff;
    --dl-bg-dark: #121212;
    --dl-bg-grey: #f6f3ed;

    /* Effects */
    --dl-border-color: #0000002D;
    --dl-box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.1);
    --dl-transition: all .5s cubic-bezier(.30, .50, .05, .95);
}

Class reference

Group	Classes
Layout	`.container`, `.padding` / `.padding-top` / `.padding-bottom`, `.bg-grey` / `.bg-dark`, `.section-heading`
Components	`.default-btn`, `.circle-btn`, `.portfolio-item`, `.service-item`, `.team-item`, `.post-card`
Animation	`.dl-img-hover`, `.dl-parallax`, `.dl-scroller`
Responsive	`.d-none` / `.d-lg-block`, `.col-lg-3` / `.col-md-6`

Breakpoints

mobile-first

@media (min-width: 576px)  { /* sm  */ }
@media (min-width: 768px)  { /* md  */ }
@media (min-width: 992px)  { /* lg — major layout changes */ }
@media (min-width: 1200px) { /* xl  */ }
@media (min-width: 1400px) { /* xxl */ }

11 JavaScript & Interactions

Core files

File	Role
`assets/js/main.js`	Core functionality
`assets/js/gsap-animation.js`	GSAP animations
`assets/js/cursor.js`	Custom cursor
`assets/js/hover-effect-manager.js`	WebGL hover effects
`assets/js/contact.js`	Contact form handling
`assets/js/mailchimp.js`	Newsletter integration

Interactive components

Swiper carousels for testimonials, products, and portfolios
WebGL displacement effects on portfolio and service images
Desktop-only custom cursor with magnetic effects (disabled below 992px)
Animated preloader with a progress counter
Odometer-style counters and continuous marquee animations

Events handled

Scroll — triggers animations as elements enter the viewport
Form — contact and newsletter submissions
Mobile menu — toggling the menu and dropdowns
Buttons — elastic and magnetic hover interactions

12 External Resources

Library	Purpose	Location
Bootstrap 5.x	Responsive framework	`assets/lib/bootstrap/`
jQuery 3.7.1	DOM manipulation	`assets/js/lib/jquary-3.7.1.min.js`
GSAP	Animations	`assets/lib/gsap/`
Swiper	Carousels	`assets/lib/swiper/`
FontAwesome 6 Pro	Icons	`assets/fonts/`
Three.js	3D graphics	`assets/js/lib/three.min.js`

Fonts are Google's Inter (variable weight) plus FontAwesome 6 Pro across solid, regular, light, thin, and sharp styles. Everything ships locally — no external CDNs — for offline use, faster loads, version control, and privacy.

13 Responsive Design

Screen size	Bootstrap class	Description
< 576px	`col-*`	Portrait phones
≥ 576px	`col-sm-*`	Landscape phones
≥ 768px	`col-md-*`	Tablets
≥ 992px	`col-lg-*`	Desktops
≥ 1200px	`col-xl-*`	Large desktops
≥ 1400px	`col-xxl-*`	Extra-large desktops

Custom cursor disabled below 992px
Navigation collapses into a mobile menu
Typography scales down; padding and margins reduce
Interactions become touch-friendly

To test: resize your browser window, use your browser's device mode, or check on an actual phone.

14 Forms

Contact form

contact.html · php/contact.php

contact.html

<form action="php/contact.php" method="POST" id="contact-form">
    <div class="input-group">
        <input type="text" name="fullname" placeholder="Your Name" required>
    </div>
    <div class="input-group">
        <input type="email" name="email" placeholder="Your Email" required>
    </div>
    <div class="input-group">
        <textarea name="message" placeholder="Your Message" required></textarea>
    </div>
    <button type="submit" class="default-btn">Send Message</button>
</form>

Set the recipient in php/contact.php:

contact.php

$recipient = "contact@yourdomain.com";

!

The form needs a PHP-enabled server to actually send mail.

Newsletter form

php/mailchimp-subscribe.php

newsletter markup

<form id="ajax_mc_form" action="php/mailchimp-subscribe.php" method="POST">
    <input type="email" name="mc_email" placeholder="Your Email" required>
    <button type="submit" class="submit-btn">
        <i class="fa-solid fa-arrow-right"></i>
    </button>
</form>

Needs a Mailchimp account connected through that PHP file to actually subscribe people.

15 Turning It Into Your Own Website

Choose your homepagePick the matching style, rename it to index.html, and delete or archive the other variants.
Remove unnecessary pagesNo shop? Delete shop pages. No blog? Delete blog pages. No careers? Delete career.html and career-details.html.
Update your brandingSwap the logo, change the site name across HTML files, and update colors and fonts in common-style.css.
Add your contentReplace placeholder text and images, update team info, and add real services and pricing.
Customize navigationUpdate menu items everywhere, adding links to new pages and removing links to deleted ones.
Set up the contact formConfigure the recipient email in php/contact.php and test it on a live server.
Test everythingCheck every page, every link, the contact form, and mobile responsiveness.
PublishUpload to your host, or use GitHub Pages, Netlify, or similar.

Adding a new page

Copy an existing HTML file as a starting point
Rename it (e.g. my-new-page.html)
Edit the content and the <title>
Link to it from your navigation

Removing a page

Delete the HTML file
Remove links to it from every navigation menu
Check other pages for stray links to it too

16 Deployment

Local testing: just open index.html in your browser.

Traditional hosting

Purchase hosting with PHP support
Upload all files via FTP or your host's file manager
Make sure the php/ folder is included — it's required for the forms to work

Free hosting options

Host	Notes
GitHub Pages	Static hosting — forms won't work
Netlify	Static hosting with build tools
Vercel	Static hosting with deployment features

Upload checklist

All HTML files
The complete assets/ folder
The php/ folder, for forms
Directory structure kept intact

17 Troubleshooting

Images not showing

Check the files are in assets/img/, filenames match exactly (including extension), and paths in the HTML are correct.

Styles not applying

Confirm the CSS files are linked in <head>, that assets/css/ exists with its files intact, then hard-refresh (Ctrl+F5 / Cmd+Shift+R).

Animations not working

Make sure JS files are linked near the bottom of the HTML and that assets/js/ is complete. Some effects behave better in modern browsers.

Contact form not sending

Confirm PHP hosting, check the recipient address in php/contact.php, verify mail is enabled server-side, and check spam folders.

Mobile menu not working

jQuery must load before main.js. Confirm assets/js/main.js exists, and try a different mobile browser.

Links not working

Verify the target HTML files exist, filenames match exactly, and extensions are correct.

Changes not showing

Confirm the file was saved, then hard-refresh and double-check you edited the right file.

Performance

Compress images before uploading
Remove pages and sections you don't use
Consider a CDN and enable browser caching
Disable ScrollSmoother or trim WebGL effects on low-end devices

18 FAQ

General

Do I need to know how to code?

No. Text, images, and colors can all be changed by following the step-by-step instructions in this guide — no coding required.

Can I use this for multiple websites?

Yes — copy the template and customize each copy independently. However, you’ll need to obtain a separate license for each website.

What software do I need?

A text editor and a web browser. That's the whole toolkit.

Can I change the animations?

Yes, though it takes some JavaScript knowledge — they're controlled from files in assets/js/.

How do I add my own fonts?

Use Google Fonts, or upload font files to assets/fonts/ and reference them in the CSS.

Can I use this with WordPress?

It's a static HTML template, not a WordPress theme — converting it over is a separate project.

Customization

How do I add social links?

Find the icons in the header or footer and update their href attributes, e.g. <a href="https://facebook.com/your-page">.

What if I break something?

Keep backups before major changes — copy the whole folder first so you can restore it.

Can I sell websites built with this template?

Check the license terms; client projects are usually fine, reselling the template itself usually isn't.

How many portfolio columns can I use?

Swap the grid class — col-lg-3 for four columns, col-lg-4 for three, col-lg-6 for two.

How do I make a section full-width?

Remove the .container wrapper, or swap it for .container-fluid.

Technical

Can I use this with React or Vue?

It's static HTML — converting components over is possible but takes real effort.

How do I add analytics?

Drop your tracking script before the closing </head> tag on each page.

Is this a full e-commerce system?

Shop pages are included, but you'd still need a cart/checkout platform behind them for real e-commerce.

How do I run a dynamic blog?

Blog layouts are included, but a dynamic blog needs a CMS or backend behind it.

19 Developer Reference

Technical detail for developers extending or deeply customizing Aurax.

Preloader

index.html

<div class="loader-wrap">
    <svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <path id="svg" d="M0,1005S175,995,500,995s500,5,500,5V0H0Z"></path>
    </svg>
    <div class="loader-wrap-heading">
        <div class="loading-text">Loading</div>
        <div class="loading-bar"></div>
    </div>
    <div class="loading-counter">0%</div>
</div>

An animated loading screen with an SVG path reveal and a progress counter — removed automatically once the page has loaded.

Smooth scroll wrapper

layout

<div id="smooth-wrapper">
    <div id="smooth-content">
        <main><!-- Page content --></main>
    </div>
</div>

Powers GSAP's ScrollSmoother. It's resource-heavy — consider disabling it on low-end devices.

Blur layer system

common-style.css

.blur-1 { --aurax-blur-amt: 0.078125px; }
.blur-2 { --aurax-blur-amt: 0.15625px; }
/* ...progressive blur amounts... */
.blur-8 { --aurax-blur-amt: 10px; }

Eight stacked layers create a progressive blur at the page bottom using backdrop-filter, hardware-accelerated.

HoverEffectManager

Manages WebGL displacement hover effects and keeps browser context limits in check:

hover-effect-manager.js

class HoverEffectManager {
    constructor(options = {}) {
        this.MAX_CONTEXTS = 10; // Browser limit prevention
        this.activeEffects = [];
    }

    initEffectWithLoadCheck(container, img, options) {
        const thumbUrl = options.image1 || img.attr('src');
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.onload = () => {
                const effect = new hoverEffect({
                    parent: container[0],
                    intensity: options.intensity || 0.3,
                    image1: thumbUrl,
                    image2: options.image2 || thumbUrl,
                    displacementImage: options.displacementImage
                });
                resolve(effect);
            };
            image.onerror = reject;
            image.src = thumbUrl;
        });
    }

    destroyEffect(container) {
        const $container = $(container);
        if ($container.data('current-hover-effect')) {
            $container.off("mouseenter.hoverEffect mouseleave.hoverEffect");
            const $oldCanvas = $container.find('canvas');
            if ($oldCanvas.length) {
                const gl = $oldCanvas[0].getContext('webgl');
                if (gl) gl.getExtension('WEBGL_lose_context')?.loseContext();
                $oldCanvas.remove();
            }
            $container.removeData('current-hover-effect');
        }
    }
}

Dependencies: GSAP, the hover-effect library, Three.js. Tune displacement maps, intensity, and animation speed here.

Sticky header

main.js

function stickyHeader() {
    var mainHeader = $('.main-header'),
        stickyHeader = mainHeader.data('sticky');
    if (!stickyHeader) return;

    $(window).on("scroll", function () {
        var yOffset = $(window).scrollTop();
        if (yOffset >= 80) {
            mainHeader.addClass("sticky-fixed-top");
        } else {
            mainHeader.removeClass("sticky-fixed-top");
        }
    });
}

Enable it by adding data-sticky="true" to the header element; the 80px threshold is adjustable.

GSAP animation system

gsap-animation.js

if (typeof gsap === "undefined") return;
if (typeof ScrollTrigger !== "undefined") {
    if (typeof ScrollSmoother !== "undefined") {
        gsap.registerPlugin(ScrollTrigger, ScrollSmoother, CustomEase);
    } else {
        gsap.registerPlugin(ScrollTrigger, CustomEase);
    }
}

let mm = gsap.matchMedia();
mm.add("(min-width: 768px)", () => {
    if (typeof ScrollSmoother !== "undefined") {
        ScrollTrigger.normalizeScroll(false);
        let smoother = ScrollSmoother.create({ smooth: 2, effects: true });
    }
});

Swiper carousel config

main.js

const testimonialCarousel = new Swiper('.testimonial-carousel', {
    loop: true,
    autoplay: { delay: 5000, disableOnInteraction: false },
    spaceBetween: 25,
    speed: 1500,
    pagination: { el: '.swiper-pagination', type: 'fraction' },
    navigation: {
        nextEl: '.testimonial-carousel .swiper-next',
        prevEl: '.testimonial-carousel .swiper-prev',
    },
    breakpoints: {
        320: { slidesPerView: 1, spaceBetween: 20 },
        767: { slidesPerView: 1, spaceBetween: 25 },
        992: { slidesPerView: 1, spaceBetween: 30 }
    }
});

Custom cursor

cursor.js

mm.add("(min-width: 993px)", () => {
    $('body').append('<div id="magic-cursor"></div>');
    $('.magnetic-item').wrap('<div class="dl-magnetic-wrap"></div>');

    var cursorPos = { x: 0, y: 0 };
    var cursorCurrentPos = { x: 0, y: 0 };
    var cursorSpeed = 0.15;

    document.addEventListener('mousemove', function (e) {
        cursorPos.x = e.clientX;
        cursorPos.y = e.clientY;
    });

    gsap.ticker.add(updateCursor);
});

Add the .magnetic-item class to any element to make it magnetic. Disabled below 993px.

Browser compatibility

Requires ES6+, CSS Grid/Flexbox, CSS custom properties, the Intersection Observer API, and WebGL for displacement effects. Feature-detect and degrade gracefully:

fallbacks

if (!window.WebGLRenderingContext) {
    $('.dl-img-hover').removeClass('dl-img-hover');
}

if ('IntersectionObserver' in window) {
    // Use Intersection Observer
} else {
    // Fallback to scroll events
}

Best practices

Keep JS functions modular, named clearly, and error-handled

Use CSS variables for theming; follow BEM; mobile-first

Semantic HTML5, alt text, and ARIA labels throughout

Minify assets, compress images, lazy-load, and cache in production