Aether Template Documentation

Thank you for purchasing Aether — the premium futuristic single-page immersive product landing template. This document serves as a comprehensive developer reference guide for commercial custom implementations and marketplace setups.

Folder Structure

Below is the local folder tree of the template. Every asset is stored locally without reliance on external Content Delivery Networks (CDNs).

Installation Guide

Deploying the Aether landing page is extremely straightforward:

1. Unzip the template archive and place it inside your workspace or local server root directory (e.g. htdocs or public_html).
2. Ensure you have a web server running PHP 7.4+ if you intend to capture live waitlist/contact form inputs.
3. Open index.html in a modern browser to verify local loading.

WebGL Liquid Background Customization

The liquid warp background is generated by a custom GLSL fragment shader compiled inside assets/webgl/liquid.js. The shader computes coordinates on the GPU, achieving a locked 60 FPS.

To speed up or slow down the fluid morphing cycle, adjust the time increment coefficient in the animation render loop inside assets/webgl/liquid.js:

// Edit this value (line 197 in assets/webgl/liquid.js)
// Smaller numbers slow down the liquid drift; larger numbers accelerate it.
this.time += 0.04; 

To change the liquid warping sensitivity during mouse hovers or scrolling, adjust the coefficients inside the fragment shader source code strings:

// Mouse displacement warp limit:
float mouseWarp = smoothstep(0.4, 0.0, distToMouse) * 0.15; // Edit 0.15

// Scroll-triggered warping:
float scrollWarp = u_scroll * 1.5; // Edit 1.5 multiplier

GSAP & ScrollTrigger Customization

Aether leverages GSAP (GreenSock Animation Platform) and its official ScrollTrigger plugin to choreograph visual elements during user scrolling.

All triggers are managed inside assets/js/app.js. You can customize the scroll trigger positions or the stagger delays:

// Example scroll trigger configuration inside app.js:
gsap.from(headers, {
    scrollTrigger: {
        trigger: section,
        start: 'top 80%', // Section entry scroll threshold
        toggleActions: 'play none none none' // Play animation once
    },
    opacity: 0,
    y: 50,
    stagger: 0.15, // Delay between consecutive element reveals
    duration: 1,
    ease: 'power3.out'
});

Swiper & lightGallery Configuration

The Coverflow app carousel is powered by Swiper.js and hooked into lightGallery.js for immersive media previews.

Swiper Parameters

You can change the autoplay speed or transition depth inside assets/js/app.js:

const swiper = new Swiper('.swiper-screens', {
    effect: 'coverflow',
    coverflowEffect: {
        rotate: 15,     // Angle rotation of adjacent slides
        stretch: 0,      
        depth: 100,     // Cinematic perspective depth
        modifier: 1.5,  // Overall intensity
        slideShadows: true,
    },
    autoplay: {
        delay: 3500,    // Slide duration in milliseconds
    }
});

Waitlist & Contact Form Setup (PHP)

The waitlist submission array sends secure emails to info@worldofinternet.in. Submissions are processed as asynchronous AJAX fetches, ensuring the user does not experience page-reload interruptions.

To change the destination email address, open php/waitlist.php and edit:

// Edit this variable (line 49 in php/waitlist.php)
$to = "info@worldofinternet.in";

Typography & Color Customization

Aether features a robust modular styling template built using CSS custom properties. You can edit all base colors inside the :root rules in assets/css/styles.css:

:root {
    --bg-dark: #090A0F;           /* Midnight Graphite Background */
    --c-indigo: #4F46E5;          /* Liquid Indigo */
    --c-lavender: #A5B4FC;        /* Digital Lavender */
    --c-cyan: #06B6D4;            /* Electric Cyan */
    --c-pink: #EC4899;            /* Spatial Pink */
    
    /* Holographic Gradient Mesh mapping */
    --g-holo: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-indigo-light) 50%, var(--c-pink) 100%);
}

Fonts are mapped locally. If you wish to switch font files, simply place your new .woff2 files inside assets/fonts/ and update the @font-face bindings in assets/css/styles.css.

Performance Optimization Guide

Despite advanced custom shaders, smooth momentum calculations, and heavy layout reveals, Aether maintains high performance. Follow these recommendations to sustain 60 FPS:

Asset Credits

• Grid Layout: Bootstrap v5.3.3
• Smooth Scroll Mechanics: Lenis Smooth Scroll
• Cinematic Timelines: GSAP and ScrollTrigger
• Interactive Canvas Backdrop: Custom WebGL shader system written by worldofinternet.in
• Carousel Slider: Swiper.js
• Lightbox Popup: lightGallery.js
• Typography: Google Fonts (Outfit & Syne) licensed under the Open Font License
• Vectored Icons: Lineicons Pack
• Holographic Devices Mockups: AI-powered premium asset renders