@hey-mirror/base

| Prop | Default | Type | Description | | ------------- | ----------- | --------------- | -------------------------------------------------------------------------------- | | aspectRatio | 9/16 | number | Defines the wrapper aspect ratil. Easiest to do as a fraction: width / height. | | children | -- | ReactNode | Everything you want for your HeyMirror! | | className | "" | string | Used for styling the root component | | theme | (see below) | CSSProperties | Provide consistent tokens for modules to use! |

Theme

| Attribute | Default | | --------------------------- | --------------- | | backgroundColor | 'black' | | color | 'white' | | unit | 24 | | elementTransitionDuration | '350ms' | | pageTransitionDuration | '450ms' | | transitionTimingFunction | 'ease-in-out' |

HeyMirror provides a theme option to maintain key aspects of UI behavior consistent throughout a user's experience.

Setting a theme is optional (and all of the properties are, too!). We've provided sensible defaults.

backgroundColor and color will be set on your HeyMirror. Everything else is there for you or module developers to pull into your implementations, so everything feels a bit more coherent.

pageTransitionDuration should be used when more than 20% of the application is changing. Otherwise? Use elementTransitionDuration. Our in-house example is that layer transitions such as the persistent layer fading (while a module is active) uses pageTransitionDuration. Animating a piece of a module would probably use elementTransitionDuration.

All of these can be overwritten for individual pieces of modules, but we recommend using them as much as you can. We're all in this to make a good, easy-to-use, predictable HeyMirror experience. Coherent interfaces are pretty darn important.