Features

A w.* element animates its values with nothing else. Each thing it does beyond that is a Feature, given to a WardicProvider or a LazyWardic, so a page ships only those it uses. A wardic.* element has every one.

import { domAnimation, layout } from "@wardic/solid" // or "@wardic/solid/unstable/v2"

<WardicProvider env={DomLive} features={[domAnimation, layout]}>…</WardicProvider>

Feature	What it brings
`hover`	`whileHover`, and hovering's callbacks or events
`press`	`whileTap`, and the tap's, from a pointer and the keyboard
`focus`	`whileFocus`
`inView`	`whileInView`, `viewport`, and the viewport's callbacks or events
`pan`	The pan's callbacks or events
`drag`	`drag` and its props, `dragControls`, and the drag's callbacks or events
`layout`	`layout`, `layoutId`, `layoutScroll` and `layoutRoot`
`colors`	`oklch()`, `oklab()`, `lab()`, `lch()`, `hwb()` and `color()`. Hex, `rgb()`, `hsl()` and the colour names need none.
`domAnimation`	Motion's set: `hover`, `press`, `focus` and `inView`.
`domMax`	Motion's other set: every Feature.

A list can nest them: [domAnimation, layout]. A prop whose Feature isn't there does nothing, and development warns once, naming the Feature. See Shipping less for what each costs.

Coming from Motion

Motion's domAnimation and domMax are here by the same names, and Wardic splits them further, a Feature for each gesture. Motion's layout comes only in domMax; here it's a Feature of its own.

Types

Feature: one Feature.
Features: one, or a list of them, nested or not.
FeatureLoad: a function that loads them: () => Promise<Features>.
FeaturesProp: what features takes: Features, or a FeatureLoad.