Moving Border Kinetic Glow Footer

footers

Hardware-accelerated continuous moving laser gradient border sweep wrapper.

#footer#moving-border#glow#laser

Live Interactive Preview

Component Source Code

Select language in the dropdown

MovingBorderFooter.tsx

1'use client';
2
3import React from 'react';
4
5export default function MovingBorderFooter() {
6  return (
7    <footer className="relative w-full max-w-5xl mx-auto overflow-hidden rounded-3xl p-[2px] shadow-2xl select-none">
8      <div className="absolute inset-[-100%] animate-[spin_6s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#8b5cf6_25%,#ec4899_50%,#06b6d4_75%,#3b82f6_100%)] pointer-events-none" />
9
10      <div className="relative rounded-[22px] bg-slate-950 p-8 sm:p-10 text-white">
11        <div className="flex flex-col md:flex-row items-center justify-between gap-6 pb-6 border-b border-slate-800">
12          <div className="space-y-1 text-center md:text-left">
13            <h3 className="font-black text-lg tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500">
14              AurenzaUI Moving Border
15            </h3>
16            <p className="text-xs text-slate-400">Continuous hardware-accelerated laser border sweep.</p>
17          </div>
18
19          <div className="flex items-center gap-6 text-xs font-semibold text-slate-300">
20            <a href="#" className="hover:text-cyan-400 transition">Showcase</a>
21            <a href="#" className="hover:text-cyan-400 transition">Design Systems</a>
22            <a href="#" className="hover:text-cyan-400 transition">Changelog</a>
23            <a href="#" className="hover:text-cyan-400 transition">GitHub</a>
24          </div>
25        </div>
26
27        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-xs text-slate-500">
28          <p>© 2026 AurenzaUI. Built with glowing kinetic dynamics.</p>
29          <span className="text-[11px] font-mono text-cyan-400">KINETIC ENGINE v4.2</span>
30        </div>
31      </div>
32    </footer>
33  );
34}

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/footers/MovingBorderFooter.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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