add trail animation component

packages/animation/src/Trail.stories.tsx

@@ -0,0 +1,45 @@
+import { BoxProps, Card } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import type { TrailProps } from './Trail.tsx'
+import { Trail } from './Trail.tsx'
+
+const TestCard = () => (
+  <Card sx={{
+    width: '300px', height: '300px', display: 'flex', bgcolor: 'green',
+  }}
+  />
+)
+
+const testCards = Array.from({ length: 5 }, (_, index) => <TestCard key={index} />)
+
+export default {
+  title: 'animations/Trail',
+  component: Trail,
+} as Meta
+
+const DefaultProps: TrailProps = {
+  open: true,
+  gap: 2,
+  fullWidth: true,
+  display: 'flex',
+  flexDirection: 'row',
+}
+
+const Template: StoryFn<typeof Trail> = args => <Trail {...args} />
+
+const Default = Template.bind({})
+Default.args = { children: [], ...DefaultProps }
+
+const WithChildren = Template.bind({})
+WithChildren.args = { children: testCards, ...DefaultProps }
+
+const WithChildrenProps = Template.bind({})
+WithChildrenProps.args = {
+  children: testCards, ...DefaultProps, flexDirection: 'column', fullWidth: false,
+}
+
+export {
+  Default, WithChildren, WithChildrenProps,
+}

packages/animation/src/Trail.tsx

@@ -0,0 +1,38 @@
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
+import { a, useTrail } from '@react-spring/web'
+import React, { isValidElement } from 'react'
+
+export interface TrailProps extends BoxProps {
+  fullWidth?: boolean
+  open: boolean
+}
+
+export const Trail: React.FC<TrailProps> = ({
+  fullWidth, open, children, ...props
+}) => {
+  // Ensure children is an array for iteration
+  const childArray = isValidElement(children) ? [children] : (children as React.ReactNode[])
+  const childArrayWithKey = childArray.map((child, index) => ({ child, key: index }))
+  const resolvedWidth = fullWidth ? '100%' : 'auto'
+
+  const trail = useTrail(childArrayWithKey.length, {
+    config: {
+      friction: 200, mass: 5, tension: 2000,
+    },
+    from: { opacity: 0, y: 20 },
+    display: 'flex',
+    opacity: open ? 1 : 0,
+    y: open ? 0 : 20,
+  })
+
+  return (
+    <Box width={resolvedWidth} {...props}>
+      {trail.map(({ ...style }, index) => (
+        <a.div key={childArrayWithKey[index].key} style={{ ...style, width: resolvedWidth }}>
+          <a.div className={`trail-${index}`}>{childArrayWithKey[index].child}</a.div>
+        </a.div>
+      ))}
+    </Box>
+  )
+}

packages/animation/src/index.ts

@@ -1 +1,2 @@
 export * from './RotationAnimation.tsx'
+export * from './Trail.tsx'