Designed for Focus Illustration

1'use client'
2 
3import { useState } from 'react'
4import { motion, useReducedMotion } from 'motion/react'
5 
6const FOCUS_DURATION = 3.6
7 
8const FOCUS_TIMES = [0, 0.12, 0.34, 0.48, 0.68, 0.8, 0.89, 0.94, 1]
9 
10const focusCircles = [
11  {
12    id: 'outer',
13    initialX: -44,
14    initialOpacity: 0.48,
15    focusScale: 1.42,
16    focusOpacity: 0.62,
17  },
18  {
19    id: 'middle',
20    initialX: 0,
21    initialOpacity: 0.38,
22    focusScale: 0.9,
23    focusOpacity: 0,
24  },
25  {
26    id: 'inner',
27    initialX: 44,
28    initialOpacity: 0.48,
29    focusScale: 0.56,
30    focusOpacity: 1,
31  },
32] as const
33 
34export function DesignedForFocusIllustration() {
35  const reduceMotion = useReducedMotion() ?? false
36  const [isHovered, setIsHovered] = useState(false)
37 
38  const shouldAnimate = isHovered && !reduceMotion
39 
40  return (
41    <div
42      aria-hidden="true"
43      className="relative h-45 w-full overflow-hidden md:h-60"
44      onPointerEnter={() => setIsHovered(true)}
45      onPointerLeave={() => setIsHovered(false)}
46    >
47      <motion.div
48        className="absolute inset-0 flex items-center justify-center"
49        initial={false}
50        animate={
51          shouldAnimate
52            ? {
53                opacity: [1, 1, 1, 1, 1, 1, 0, 0, 1],
54                filter: [
55                  'blur(0px)',
56                  'blur(0px)',
57                  'blur(0px)',
58                  'blur(0px)',
59                  'blur(0px)',
60                  'blur(0px)',
61                  'blur(8px)',
62                  'blur(8px)',
63                  'blur(0px)',
64                ],
65                scale: [1, 1, 1, 1, 1, 1, 0.94, 0.94, 1],
66              }
67            : {
68                opacity: 1,
69                filter: 'blur(0px)',
70                scale: 1,
71              }
72        }
73        transition={
74          shouldAnimate
75            ? {
76                duration: FOCUS_DURATION,
77                times: FOCUS_TIMES,
78                ease: 'easeInOut',
79                repeat: Infinity,
80                repeatDelay: 0.08,
81              }
82            : {
83                duration: 0.4,
84                ease: [0.22, 1, 0.36, 1],
85              }
86        }
87      >
88        {focusCircles.map((circle) => (
89          <motion.span
90            key={circle.id}
91            className="absolute size-22 rounded-full border border-foreground/60"
92            initial={false}
93            animate={
94              shouldAnimate
95                ? {
96                    x: [
97                      circle.initialX,
98// … truncated