# MotionStyles

> `MotionStyles` is part of the Motion set, imported from `@jcsoftdev/ui/motion`.

Source: https://ui.jcsoftdev.com/docs/components/motion-styles

`MotionStyles` is part of the Motion set, imported from `@jcsoftdev/ui/motion`.

## Import

```ts
import { MotionStyles } from "@jcsoftdev/ui/motion";
```

## Usage

```tsx
export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};
```

_Source of the Storybook story._

## Props

This component declares no props of its own.

## Storybook stories

- [Reveal On Mount](/storybook/?path=/story/motion-motion--reveal-on-mount)
- [Staggered Cards](/storybook/?path=/story/motion-motion--staggered-cards)
- [Cross Fade List Detail](/storybook/?path=/story/motion-motion--cross-fade-list-detail)
- [Count Up In AK Pi](/storybook/?path=/story/motion-motion--count-up-in-ak-pi)
- [Highlight Rows](/storybook/?path=/story/motion-motion--highlight-rows)
- [Cross Fade Swaps Keyed Content](/storybook/?path=/story/tests-motion--cross-fade-swaps-keyed-content)
- [Cross Fade Reduced Motion Swaps At Once](/storybook/?path=/story/tests-motion--cross-fade-reduced-motion-swaps-at-once)
- [Count Up Lands On The Formatted Value](/storybook/?path=/story/tests-motion--count-up-lands-on-the-formatted-value)
- [Count Up Reduced Motion Shows The Final Value](/storybook/?path=/story/tests-motion--count-up-reduced-motion-shows-the-final-value)
- [Reveal And Stagger Reduced Motion Are Static](/storybook/?path=/story/tests-motion--reveal-and-stagger-reduced-motion-are-static)
- [Stagger Keeps Children In The Accessibility Tree](/storybook/?path=/story/tests-motion--stagger-keeps-children-in-the-accessibility-tree)
- [Highlight Row Pulses Only New Rows](/storybook/?path=/story/tests-motion--highlight-row-pulses-only-new-rows)

## Source

`packages/ui/src/motion/motion-styles.tsx`