Animated Icons Table

1'use client'
2 
3import { forwardRef, useImperativeHandle } from 'react'
4import { motion } from 'motion/react'
5import type { Variants } from 'motion/react'
6import { ARRIVE, RETURN_TRANSITION, popIn, useHover } from '#/lib/animated-icon.ts'
7import type { IconHandle, IconProps } from '#/lib/animated-icon.ts'
8 
9// One confident turn, paired with an anticipation dip and an overshoot pop.
10const pop = popIn({ peak: 1.18, duration: 0.6 })
11const twinkle: Variants = {
12  normal: { rotate: 0, scale: 1, transition: RETURN_TRANSITION },
13  animate: {
14    rotate: [0, 360],
15    scale: pop.scale,
16    transition: {
17      rotate: { duration: 0.7, ease: ARRIVE },
18      scale: pop.transition,
19    },
20  },
21}
22 
23export const StarIcon = forwardRef<IconHandle, IconProps>(function StarIcon(
24  { size = 28, style, ...props },
25  ref,
26) {
27  const { controls, reduced, start, stop, bind } = useHover()
28  useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop }), [start, stop])
29 
30  return (
31    <div {...props} {...bind} style={{ display: 'inline-flex', overflow: 'hidden', ...style }}>
32      <motion.svg
33        xmlns="http://www.w3.org/2000/svg"
34        width={size}
35        height={size}
36        viewBox="0 0 256 256"
37        fill="none"
38        stroke="currentColor"
39        strokeWidth={18}
40        strokeLinecap="round"
41        strokeLinejoin="round"
42        initial="normal"
43        animate={controls}
44        style={{ overflow: 'visible' }}
45      >
46        <motion.path
47          variants={reduced ? undefined : twinkle}
48          style={{ transformBox: 'view-box', transformOrigin: '128px 132px' }}
49          d="M128 36 150 98 216 100 163 139 182 202 128 165 74 202 93 139 40 100 106 98 Z"
50        />
51      </motion.svg>
52    </div>
53  )
54})