# Hero signup

A full screen waitlist hero on a soft, drifting mesh gradient: the email field validates as you type and its button grows into the confirmation with your place in line.

- ID: `hero-signup`
- Import: `animui/hero-signup`
- Category: block
- Runtime exports: `HeroSignup`
- Declaration: `types/pro/hero-signup.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: hero-section, newsletter-signup, cta-section

```tsx
import { HeroSignup } from 'animui/hero-signup';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info hero-signup` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface HeroSignupProps {
  title?: string;
  description?: string;
  placeholder?: string | number | boolean | ReactNode;
  buttonLabel?: string;
  shortButtonLabel?: string;
  footnote?: string | number | boolean | ReactNode;
  count?: string | number | boolean | ReactNode;
  people?: string | number | boolean | ReactNode;
  proof?: string | number | boolean | ReactNode;
  hue?: string | number | boolean | ReactNode;
  onSubscribe?: () => void;
  onStateChange?: () => void;
  className?: string;
}

export declare const HeroSignup: ComponentType<HeroSignupProps>;

export default HeroSignup;
```