Comic Hallway

Heroes

About

Scroll-driven hand-inked 3D comic corridor built from CSS planes, with clickable doors that open into content rooms and six switchable drawing styles. Use as an immersive portfolio or about-page hero.

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

Code

How Comic Hallway is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ComicHallway from '@/components/ui/comic-hallway'

const settings = {
  name: "Nate Cheng",
  handle: "<Nate/>",
  tagline: "engineer --build --scale-at-will",
  role: "Serverless Advocate & Cloud Whisperer",
  location: "IRVINE",
  drawStyle: "ink",
  showStyleSwitch: true,
}

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <ComicHallway
      name={s.name}
      handle={s.handle}
      tagline={s.tagline}
      role={s.role}
      location={s.location}
      drawStyle={s.drawStyle as "ink" | "sketch" | "oil" | "manga" | "blueprint" | "riso"}
      showStyleSwitch={s.showStyleSwitch}
    />
  )
}