API Hero Section With Pixel Art Image
A web-data API hero drawn like a technical sheet: mono key-hint buttons on the left, and a pixel-art painting carrying a live agent console on the right.
Features
- Buttons carry their keyboard shortcut as a small key that sinks on hover; press the letter to follow it
- A copy-prompt button puts the agent setup prompt on the clipboard, with a chevron to read it first
- The agent console plays on its own: tabs slide from mode to mode while each prompt types itself out
- When a prompt completes, its reply lands as JSON over the painting and the Page / JSON toggle flips
- A slow Ken Burns pan across the pixel-art painting, framed by drafting crosshairs between hairline rails
- Everything holds still for reduced motion; on phones the painting stacks under the copy
Best for: APIs, scrapers and data tools for AI agents that want a calm, technical first screen with the product playing live.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | - | A short mono label above the headline, set in brackets. |
| title | string | - | The headline's first line. |
| accent | string | - | The headline's second line, in grey. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string; hotkey: string } | - | The orange button and its shortcut letter. |
| setup | { label: string; prompt: string; tools: AgentTool[] } | - | The copy-prompt button: its label, the prompt it copies and small app icons. |
| specs | { value: string; label: string }[] | - | Three facts in a ruled strip under the buttons. |
| painting | { src: string; alt: string } | - | A wide painting or photo; its right side shows on narrow frames. |
| modes | AgentMode[] | - | Console tabs: label, icon, the prompt typed, its option, a status line and the JSON reply. |
| hasShortcuts | boolean | true | Whether pressing a button's letter follows it. |
| nav | { brand; links: Cta[]; cta: KeyedCta; secondaryCta?: KeyedCta } | - | Optional built-in navbar in this hero's style. |
| className | string | - | Extra classes for the section. |
FAQ
Is the API Hero Section With Pixel Art Image free to use?
Yes. API Hero Section With Pixel Art Image is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does API Hero Section With Pixel Art Image work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use API Hero Section With Pixel Art Image in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does API Hero Section With Pixel Art Image need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is API Hero Section With Pixel Art Image accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.