# entrance

> The page-load entrance for a landing hero: each part fades and rises 8px in turn, and the product media settles from 98% a beat later.

```ts
import { entrance } from "@sdxc/ui/landing";
```

Plays the hero entrance on its host once, on load: 600ms on a decelerating curve,
delayed by `order` steps. Hosts keep their final state, so nothing flashes afterwards.

## Signature

```ts
entrance<Node extends Element = Element>(options?: Entrance.Options): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>
```

Returns: A `css()` mixin ready for a hero part's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `Entrance.Options` | The host's place in the sequence and what kind of part it is. |

## Examples

```tsx
<h1 mix={[entrance({ order: 1 })]}>{t("hero.title")}</h1>
```

```tsx
<ProductFrame mix={[entrance({ order: 4, kind: "media" })]}>{shot}</ProductFrame>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/landing` too.

### Entrance.Options

Options accepted by entrance.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `order?` | `number` | Position in the sequence, from 0; each step starts 70ms after the previous. |
| `kind?` | `Kind` | What enters. Defaults to `"copy"`. |

### Entrance.Kind

Which part of the hero enters: `copy` rises, `media` settles in scale.

#### Signature

```ts
type Entrance.Kind = "copy" | "media"
```

One of `"copy"`, `"media"`.