紙吹雪をふらせる React のコンポーネントを作成してみます。作成物は以下になります。 hbsnow-sandbox/example-css-confetti 準備 hbsnow/template-nextjs-tailwindcss 上記をテンプレートとして使用します。今回 tailwindcss は使用せず、また Next.js ですが styled-jsx を使用せず CSS Modules のみで作成していきます。 紙吹雪の紙のコンポーネントを作成する 紙吹雪を回転させる Piece.tsx という紙吹雪の紙部分のコンポーネントを作っていきます。 コンポーネントには紙の長さと高さ、色を指定できるようにしておきます。 // components/Piece/Piece.tsx import { ComponentPropsWithoutRef, CSSProperties, for