3D perspective-projected retro wireframe synth terrain with continuous horizon acceleration, custom angles, and speed warping.
"use client";
import React, { useState } from "react";
import { CyberRetroGrid } from "@/components/ui/cyber-matrix-retro-grid";
export default function CyberRetroGridDemo() {
const [speed, setSpeed] = useState(12);
return (
<div className="relative flex min-h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl bg-[#08090d] p-8 text-white select-none border border-slate-800 shadow-2xl">
{/* 3D Cyber Retro Grid */}
<CyberRetroGrid
angle={68}
cellSize={45}
speed={speed}
darkLineColor="rgba(56, 189, 248, 0.35)"
opacity={0.7}
/>
{/* Cyber Horizon Glow */}
<div className="pointer-events-none absolute top-1/4 h-32 w-96 rounded-full bg-cyan-500/20 blur-[100px]" />
<div className="pointer-events-none absolute top-1/3 h-1 w-3/4 max-w-lg bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-60 blur-[1px]" />
{/* Floating Center Glassmorphic Terminal Card */}
<div className="relative z-10 flex max-w-lg flex-col items-center rounded-3xl border border-cyan-500/30 bg-slate-950/75 p-8 text-center shadow-[0_0_50px_rgba(6,182,212,0.25)] backdrop-blur-xl">
{/* Terminal Header Tag */}
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-cyan-400/30 bg-cyan-950/50 px-3.5 py-1 text-xs font-mono text-cyan-300">
<span className="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-ping" />
GRID PROTOCOL V4.2
</div>
<h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
Infinite Synth Grid
</h1>
<p className="mt-3 text-sm text-slate-300 leading-relaxed">
Perspective-projected retro wireframe terrain with continuous horizon acceleration and customizable shader parameters.
</p>
{/* Speed Adjustment Buttons */}
<div className="mt-5 flex items-center gap-2 font-mono text-xs text-slate-400">
<span>WARP SPEED:</span>
{[20, 12, 6].map((s) => (
<button
key={s}
onClick={() => setSpeed(s)}
className={`rounded-lg px-2.5 py-1 transition-all ${
speed === s
? "bg-cyan-500/20 border border-cyan-400 text-cyan-300 font-bold"
: "bg-slate-900 border border-slate-800 text-slate-400 hover:text-white"
}`}
>
{s === 20 ? "CRUISE" : s === 12 ? "WARP" : "HYPER"}
</button>
))}
</div>
{/* Action Button Linking to Scriptly */}
<div className="mt-6 flex flex-wrap items-center justify-center gap-3">
<a
href="https://scriptly.store/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-cyan-500/25 transition-all duration-200 hover:from-cyan-400 hover:to-blue-500 hover:shadow-cyan-500/40 hover:-translate-y-0.5 active:translate-y-0"
>
<span>Explore Scriptly Store</span>
<svg
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
/>
</svg>
</a>
</div>
</div>
{/* Footer Backlink Attribution */}
<a
href="https://scriptly.store/"
target="_blank"
rel="noopener noreferrer"
className="relative z-10 mt-8 inline-flex items-center gap-1.5 font-mono text-xs text-slate-500 hover:text-cyan-400 transition-colors"
>
<span>Engineered for commercial grade projects at</span>
<span className="font-semibold text-cyan-400 underline underline-offset-4">Scriptly.store ↗</span>
</a>
</div>
);
}