combination Plumeria css-in-js and firemotion

Hello, In this example, I explain it together @plumeria with firemotion's useAnimation hook. First, like In this way, you can use it as a single component, with the scope closed as a single page file, Take a look at the styles variable.

Animation.tsx

'use client';

import { ReactNode } from 'react';
import useFiremotion from 'firemotion';
import { css } from '@plumeria/core';

type AnimationProps = {
  children: ReactNode;
};

const styles = css.create({
  base: {
    opacity: 1,
    transition: 'all 0.6877777s',
    scale: 1,
  },

  init: {
    opacity: 0,
    scale: 1.1,
  },

  exit: {
    opacity: 0,
    transition: 'all 0.17s',
    scale: 1.1,
  },
});

const Animation = ({ children }: AnimationProps): JSX.Element => {
  const animate = useFiremotion(styles.base, [styles.init, styles.exit], 0.2);

  return <main className={animate}>{children}</main>;
};

export default Animation;

In this way, using @plumeria you can write Next.js components in a React Native like way.

how to use Animation component

In this example, I've created a wrapper component that provides animations.

import Animation from 'components/Animation';

const Page = () => {
  return (
    <Animation>
      <h1>hello world</h1>
    </Animation>
  );
};

export default Page;