Components
A full-screen hero section styled like a futuristic terminal interface. Features animated glitch text, holographic image display, scanline overlays, and a reactive grid background. Perfect for tech-forward landing pages, sci-fi portfolios, or immersive product intros.
npx @21st-dev/cli add dhileepkumargm/cyberpunk-terminal-heroLoading preview...
import React from "react";
import { CyberpunkTerminalHero } from "@/components/ui/cyberpunk-terminal-hero";
export default function CyberpunkTerminalHeroDemo() {
return (
<CyberpunkTerminalHero
title="BOOT SEQUENCE: Welcome Aboard"
subtitle={{ regular: "Enter the ", glitch: "Next Frontier" }}
description="This demo overrides text and demonstrates theming with CSS variables."
ctaText="Engage Protocol"
bottomImage={{
src: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "High-tech control room",
}}
/>
);
}