Tween easing

import { motion } from 'motion-solidjs'

export const meta = {
  slug: 'tween',
  title: 'Tween easing',
  category: 'animations',
  description: 'A linear tween with custom cubic-bezier easing.',
  tag: 'tween',
} as const

export default function Tween() {
  return (
    <motion.div class="h-3 w-44 overflow-hidden rounded-full bg-card">
      <motion.div
        class="h-full rounded-full bg-grad-mint"
        animate={{ width: ['0%', '100%', '0%'] }}
        transition={{
          duration: 2.4,
          ease: [0.65, 0, 0.35, 1],
          repeat: Infinity,
        }}
      />
    </motion.div>
  )
}