マウスの動きに合わせて立体的に動くコンポーネント

About Preview

このコンポーネントを使いたい場合は、component.tsxの内容をコピーして、render.tsxを参考にコンポーネントを使ってください

Default Packages

プレビュー画面では以下のパッケージがデフォルトでインストールされています

• TailwindCSS
• framer-motion

pnpm add tailwindcss framer-motion

Component PropsType

interface YurayuraProps {
  width: number;
  height: number;
  animation?: boolean;
  className?: string;
  children?: ReactNode;
}

• width ... number
  横幅。px単位で指定する
• height ... number
  縦幅。px単位で指定する
• animation ... boolean(default=false)
  trueにすると常にゆらゆらと揺れるアニメーションが追加されます。
• className ... string (optional)
  wave componentのラッパーに当てたいtailwindのクラスをここに記述する
• children ... ReactNode