@hey-mirror/base

@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.