Fast by Default Illustration

1'use client'
2 
3import { useState } from 'react'
4import { motion, useReducedMotion } from 'motion/react'
5 
6const SPEED_LINE_COUNT = 13
7 
8const speedLines = Array.from({ length: SPEED_LINE_COUNT }, (_, index) => {
9  const center = (SPEED_LINE_COUNT - 1) / 2
10  const distanceFromCenter = Math.abs(index - center) / center
11 
12  return {
13    y: 34 + index * 7.7,
14    start: 47 + distanceFromCenter * 16 + Math.sin(index * 1.25) * 7,
15    end: 254 - distanceFromCenter * 23 + Math.cos(index * 0.85) * 7,
16    thickness: 1.15 + (1 - distanceFromCenter) * 0.45,
17    opacity: 0.4 + (1 - distanceFromCenter) * 0.55,
18    direction: index <= center ? 1 : -1,
19    travel: 8 + (1 - distanceFromCenter) * 9,
20  }
21})
22 
23function createSpeedLinePath({
24  start,
25  end,
26  y,
27  thickness,
28}: {
29  start: number
30  end: number
31  y: number
32  thickness: number
33}) {
34  const taperLength = 12
35  const roundedEnd = 4
36 
37  return [
38    `M ${start} ${y}`,
39    `L ${start + taperLength} ${y - thickness}`,
40    `L ${end - roundedEnd} ${y - thickness}`,
41    `Q ${end} ${y - thickness} ${end} ${y}`,
42    `Q ${end} ${y + thickness} ${end - roundedEnd} ${y + thickness}`,
43    `L ${start + taperLength} ${y + thickness}`,
44    'Z',
45  ].join(' ')
46}
47 
48export function FastByDefaultIllustration() {
49  const reduceMotion = useReducedMotion() ?? false
50  const [isHovered, setIsHovered] = useState(false)
51 
52  return (
53    <div
54      aria-hidden="true"
55      className="relative h-45 w-full overflow-hidden md:h-60"
56      onPointerEnter={() => {
57        if (!reduceMotion) setIsHovered(true)
58      }}
59      onPointerLeave={() => {
60        if (!reduceMotion) setIsHovered(false)
61      }}
62    >
63      <svg
64        className="absolute inset-0 size-full overflow-visible text-foreground"
65        viewBox="0 0 300 160"
66        fill="none"
67        preserveAspectRatio="xMidYMid meet"
68      >
69        <defs>
70          <clipPath id="speed-lines-clip">
71            <rect x="34" y="20" width="232" height="120" rx="8" />
72          </clipPath>
73        </defs>
74        <g clipPath="url(#speed-lines-clip)">
75          {speedLines.map((line, index) => {
76            const path = createSpeedLinePath(line)
77            const travel = line.travel * line.direction
78 
79            return (
80              <motion.path
81                key={index}
82                d={path}
83                fill="currentColor"
84                initial={false}
85                animate={
86                  isHovered && !reduceMotion
87                    ? {
88// … truncated