Developer Hero Section With Code Rain
A black developer hero in acid lime: square mono buttons, code and a live request log over falling lime code.
Features
- Black and acid lime, Geist headline, JetBrains Mono details
- Square monospaced buttons and a copy-the-install-command chip
- Code pane over a live log of requests landing one by one
- Columns of lime code falling slowly behind it, paused off screen
Best for: APIs, SDKs and developer tools that want to look like the terminal their users live in.
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 |
|---|---|---|---|
| tag | string | - | Monospaced line above the headline. |
| title | string | - | The headline. |
| accent | string | - | Optional ending in lime. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The lime button. |
| secondaryCta | { label: string; href: string } | - | Optional outlined button. |
| installCommand | string | - | A command to copy, such as npm i your-sdk. |
| facts | string[] | - | Small facts under the buttons. |
| fileName | string | - | The file name on the code pane. |
| code | string[] | - | The snippet, one string per line. |
| requests | LoggedRequest[] | - | Requests for the live log: method, path, status, latencyMs. |
| clients | Brand[] | - | Optional client logos (name and icon), in a dim row under the stats. |
| clientsLabel | string | - | Optional monospaced line above the client logos. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional built-in navbar in this hero's style. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Developer Hero Section With Code Rain free to use?
Yes. Developer Hero Section With Code Rain is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Developer Hero Section With Code Rain 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 Developer Hero Section With Code Rain in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Developer Hero Section With Code Rain need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Developer Hero Section With Code Rain 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.