Cyber Matrix 3x3 Loader

loaders

Cybernetic 3x3 photon grid sequencer with wave phase pulsation.

#matrix#grid#cyber#neon#loader

Live Interactive Preview

Matrix Sync...

Component Source Code

Select language in the dropdown

CyberMatrixLoader.tsx

1'use client';
2
3import React from 'react';
4
5export default function CyberMatrixLoader() {
6  return (
7    <div className="flex flex-col items-center justify-center p-6 select-none">
8      <div className="grid grid-cols-3 gap-1.5 p-3 rounded-2xl bg-slate-950 border border-cyan-500/30 shadow-[0_0_25px_rgba(6,182,212,0.15)]">
9        {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
10          <div
11            key={i}
12            style={{
13              animationDelay: `${(i % 3) * 0.15 + Math.floor(i / 3) * 0.15}s`
14            }}
15            className="h-3 w-3 rounded-md bg-cyan-400 animate-pulse shadow-[0_0_8px_#22d3ee]"
16          />
17        ))}
18      </div>
19      <span className="mt-3 text-xs font-mono font-bold text-cyan-400 tracking-widest uppercase">Matrix Sync...</span>
20    </div>
21  );
22}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/loaders/CyberMatrixLoader.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import CyberMatrix3x3Loader from '@/components/loaders/CyberMatrixLoader';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <CyberMatrix3x3Loader />
7    </main>
8  );
9}