Scroll-Triggered Cards

import * as motion from 'motion/react-client'
import type { Variants } from 'motion/react'

const cardVariants: Variants = {
  offscreen: {
    y: 300,
  },
  onscreen: {
    y: 50,
    rotate: -10,
    transition: {
      type: 'spring',
      bounce: 0.4,
      duration: 0.8,
    },
  },
}

interface CardProps {
  emoji: string
  hueA: number
  hueB: number
}

function Card({ emoji, hueA, hueB }: CardProps) {
  const hue = (h: number) => `hsl(${h}, 100%, 50%)`
  const background = `linear-gradient(306deg, ${hue(hueA)}, ${hue(hueB)})`

  return (
    <motion.div
      className="card-container"
      initial="offscreen"
      whileInView="onscreen"
      viewport={{ amount: 0.8 }}
    >
      <div className="splash" style={{ background }} />
      <motion.div className="card" variants={cardVariants}>
        {emoji}
      </motion.div>
    </motion.div>
  )
}

const food: [string, number, number][] = [
  ['🍅', 340, 10],
  ['🍊', 20, 40],
  ['🍋', 60, 90],
  ['🍐', 80, 120],
]

export default function ScrollTriggered() {
  return (
    <div className="container">
      {food.map(([emoji, hueA, hueB]) => (
        <Card key={emoji} emoji={emoji} hueA={hueA} hueB={hueB} />
      ))}
    </div>
  )
}