8bit Chapter Intro

Cards

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8bit Chapter Intro to your project and fits it to your theme.

Code

How 8bit Chapter Intro is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}