entrance
The page-load entrance for a landing hero.
import { entrance } from "@sdxc/ui/landing";Usage
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
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 | Required | Description |
|---|---|---|---|
options | Entrance.Options | No | The host's place in the sequence and what kind of part it is. |
Examples
<h1 mix={[entrance({ order: 1 })]}>{t("hero.title")}</h1><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.
Interface
Entrance.Options
Options accepted by entrance.
| Member | Type | Required | Description |
|---|---|---|---|
order | number | No | Position in the sequence, from 0; each step starts 70ms after the previous. |
kind | Kind | No | What enters. Defaults to "copy". |
Type
Entrance.Kind
Which part of the hero enters: copy rises, media settles in scale.
type Entrance.Kind = "copy" | "media"