© 2025 by sinusmd

Matrix 3D Grid Navigation System

Welcome to the Matrix 3D Grid Navigation System documentation. This revolutionary platform transforms how users interact with digital content through an immersive 3D grid interface with advanced navigation capabilities.

The system features a sophisticated 3x3, but up to 5x5 or whatever combinations of matrix grid you imagine, where each cell represents a unique navigation point, creating a spatial interface that's both intuitive and visually stunning.

5x5 Matrix Grid - Interactive navigation system with labeled cells (1A to 5E)

System Overview

The Matrix 3D Grid Navigation System is a cutting-edge interface solution that combines spatial navigation with stunning visual effects.
Built with modern web technologies, it offers unparalleled user experience across all devices.

3x3 Matrix Grid Layout

Core Features

The Matrix 3D Grid System comes packed with powerful features designed to enhance user engagement and provide seamless navigation experiences.

  • 3D Spatial Navigation: Navigate through content in a three-dimensional space

  • Interactive Grid System: 5x5 matrix with intuitive cell-based navigation

  • Advanced Animations: 21 unique GSAP-powered animations

  • Customizable Themes: 9 pre-built color schemes

  • Responsive Design: Perfect experience on all screen sizes

First-person view of a 3D grid navigation system

The Matrix 3D Grid Navigation System is designed to be easily integrated into your existing projects. Follow the steps below to get started:

Installation Guide

Getting started with Matrix 3D Grid System is straightforward. Follow these steps to integrate it into your project.

Step 1: Download and Extract

After purchasing, download the package and extract the contents to your desired location.

Step 2: File Structure

Familiarize yourself with the project structure:

  • /css

    • stylegrid.css - main file with settings
    • theme-grid.css - separate css file for all 9 themes
    • responsive-grid.css - separate css file for responsive (no framework used)

  • /js

    • generatorexportgrid.js - settings for export your grid
    • keyboardmapgrid.js - settings for navigate with arrows and numbers from 1-9
    • responsive-grid.js - settings to improve responsiveness
    • scriptgrid.js - main file with settings
    • theme-switcher.js - settings for Theme switcher toggle

  • /images - Assets and demo content

  • index-grid.html - Main demo file

Step 3: Integration

Include the necessary CSS and JS files in your HTML project and initialize the grid system.

Grid Structure

Understanding the grid structure is essential for customizing and extending the system.
The default version is 3x3 but you can create any combination up to 5x5.
Let's switch to the next section to see how things works!

First-person view of a 3D grid navigation system

Grid Generator

Create custom grid layouts without writing code using the intuitive grid generator tool.

  • Grid Shape: Customize the grid rows and columns from 1x1 to any combinations, 2x4, 4x1, 5x5, etc.
  • Gaps: Set the values (in pixels) of the horizontal and vertical gaps between canvas.
  • Generate: In 1 second you will have the generated grid ready
  • Export Code: Copy the generated HTML, CSS and JS code to your project
First-person view of a 3D grid navigation system

VOILA! YOU HAVE YOUR CUSTOM GRID READY! NO CODE NEED IT!

Themes & Styling

Customize the appearance of your grid with 9 built-in themes or create your own using CSS variables.

First-person view of a 3D grid navigation system

3D Animations

1. Experience 21 unique 3D animations powered by GSAP (GreenSock Animation Platform) for smooth, professional transitions.

  • Activate the toggle: Click the button to activate the animation panel
  • Select an animation: After selecting an animation, go back up to the navigation map or navigate with the arrow keys to see the new animation
  • Generate code Here you have again the possibility to generate the code for your selected animation and you should put it in your project
  • Export Code: Hover the button of the animation and it appears a tiny icon to copy the code to your project
First-person view of a 3D grid navigation system

2. Now, as you can see it below in the code section, it is not so hard to do it by yourself. You just need to copy the code and paste it in your project.
In the file .js/scriptgrid.js you find the code below , paste the code and at the end of the let animationConfig, update the name of the animation.

Javascript


						const animationPresets = {
							default: {
							 initial: { scale: 0.8, rotationX: 15, rotationY: 5, duration: 0.8, ease: 'power2.out' },
							move: { rotationX: -10, rotationY: 10, rotationZ: 2, duration: 1.2, ease: 'power2.inOut' },
							restore: { scale: 1, rotationX: 0, rotationY: 0, rotationZ: 0, duration: 0.6, ease: 'power2.in' },
							background: { parallaxMultiplier: 0.2, scale: 1.1, duration: 2.5, ease: 'power2.inOut' }
						}
									};		
						// Animation configuration - use the default preset
						let animationConfig = JSON.parse(JSON.stringify(animationPresets.default));

Content Management

Add custom content to each grid canvas using the intuitive content manager tool.

  • Mouse Navigation Click on any grid cell to navigate to its corresponding content. Hover effects provide visual feedback.
  • Keyboard Shortcuts Use arrow keys (↑, ↓, ←, →) to navigate between cells. Number keys (1-25) provide direct access to specific cells.
  • Touch Gestures Swipe left/right/up/down to navigate on touch devices. Use the range bar to zoom for detailed view.
  • Map Navigator The visual map provides an overview and quick navigation to any section with a single click
First-person view of a 3D grid navigation system

To add custom content to a specific grid cell, you need to create a dedicated HTML structure for each cell's fullscreen content.
Below is an example of how to structure the HTML for the content of cell "1A". You can replicate this structure for other cells by changing the IDs and content accordingly.

HTML Structure Example:


					<!-- Zone 1A Fullscreen Content -->
					<div id="fullscreen-content-1A" class="zone-fullscreen-content" style="display: none;">
					    <div class="fullscreen-header">
					        <h1 class="fullscreen-title">Zone 1A - Custom Content</h1>
					        <p class="fullscreen-subtitle">Add your content here</p>
					    </div>
					
					    <div class="fullscreen-body">
					        <p>This div is for zone 1A. You can add any content you wish here.</p>
					    </div>
					</div>

Support & Resources

  • Support contact: Click here

  • Email Support: Click here

  • Version Updates: Check your ThemeForest account for latest versions

Note: Please include your purchase code when requesting support for faster resolution.