"use client";
import { useCallback, useState } from "react";
import NumericTunnel from "@/components/ui/numeric-tunnel";
export default function NumericTunnelDemo() {
const [isComplete, setIsComplete] = useState(false);
const [instance, setInstance] = useState(0);
const handleComplete = useCallback(() => {
setIsComplete(true);
}, []);
const handleReplay = useCallback(() => {
setIsComplete(false);
setInstance((current) => current + 1);
}, []);
return (
<NumericTunnel key={instance} onComplete={handleComplete}>
<div className="relative flex h-screen w-full flex-col justify-between overflow-hidden bg-[#0e0e0c] text-white">
<img
src="https://cdn.21st.dev/assets/mirror/54/54954611e11f8afe47c25bff036f8887022cb5b8389e45568564d88aebdba1fc.jpg"
alt=""
className="absolute inset-0 h-full w-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/25 to-black/50" />
<div className="relative z-10 flex items-center justify-between px-8 py-6 max-md:px-5">
<span className="text-sm font-semibold uppercase tracking-[0.2em]">Northline</span>
<button type="button" aria-label="Menu" className="flex flex-col items-end gap-1.5">
<span className="h-0.5 w-7 bg-white" />
<span className="h-0.5 w-5 bg-white" />
</button>
</div>
<div className="relative z-10 flex max-w-3xl flex-col gap-5 px-8 pb-16 max-md:px-5 max-md:pb-10">
<p className="text-xs uppercase tracking-[0.3em] text-white/50">Studio reel — 2026</p>
<h1 className="text-[6vw] font-medium leading-[0.95] tracking-tight max-md:text-[10vw]">
We build things that move.
</h1>
<button
type="button"
onClick={handleReplay}
className={`mt-2 inline-flex w-fit items-center gap-2 rounded-full border border-white/20 bg-white/10 px-5 py-2 text-sm font-medium backdrop-blur-md transition-all duration-300 hover:scale-105 hover:bg-white/20 active:scale-95 ${
isComplete ? "opacity-100" : "pointer-events-none opacity-0"
}`}
>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 shrink-0" aria-hidden="true">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
<path d="M3 3v5h5" />
</svg>
Replay
</button>
</div>
</div>
</NumericTunnel>
);
}
Part of Hyperiux Vault — browse the full library on 21st.dev.