Components
Loading preview...
An 8-bit chapter introduction screen built on the retro card primitive. Renders a pixelated background image with cinematic letterbox bars, a darken overlay, and a bold title plus subtitle with configurable alignment, height, and darkening.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-chapter-intro"use client";
import ChapterIntro from "@/components/ui/8bit-chapter-intro";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
<ChapterIntro
className="w-full max-w-[600px] text-white"
title="LEVEL 1: FIERY SKELETONS"
subtitle="Defeat the skeletons to unlock the gate."
backgroundSrc="/images/fiery-skeletons.png"
height="md"
align="center"
darken={0.5}
/>
</div>
);
}