# Hero section

Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.

- ID: `hero-section`
- Import: `animui/hero-section`
- Category: blocks
- Runtime exports: `HeroCadence`, `HeroContent`, `HeroLumen`, `HeroMesh`, `HeroRelay`, `HeroSection`, `HeroSectionBlock`, `default`
- Declaration: `types/free/blocks/hero-section.d.ts`
- Type provenance: emitted-original-typescript
- Related: site-header, logo-marquee, hero-signup

```tsx
import { HeroCadence } from 'animui/hero-section';
```

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-section` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
export { HeroCadence, HeroContent, HeroLumen, HeroMesh, HeroRelay, HeroSection, HeroSectionBlock, default } from '../registry/blocks/hero-section/hero-section.js';
export type { HeroAction, HeroInstallCommand, HeroMeshPoint, HeroSectionProps, HeroSectionVariant } from '../registry/blocks/hero-section/hero-section.js';
```