'use client';
import { cn } from '@/lib/utils';
import { motion } from 'motion/react';
import { forwardRef, RefObject, useEffect, useId, useState } from 'react';
export const Icons = {
user: () => (
<svg
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='#000000'
strokeWidth='2'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' />
<circle cx='12' cy='7' r='4' />
</svg>
),
claude: () => (
<svg
width='512'
height='512'
viewBox='0 0 512 512'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0_2719_9)'>
<circle cx='256.5' cy='259.5' r='259.5' fill='#CC9B7A' />
<path
d='M318.663 149.785H275.295L354.247 362.208L397.615 362.212L318.663 149.785ZM193.337 149.785L114.385 362.212H158.64L174.572 317.604L257.418 317.6L273.525 362.212H317.78L238.654 149.785H193.337ZM189.086 278.126L215.996 203.425L243.079 278.126H189.086Z'
fill='#1F1F1E'
/>
</g>
<defs>
<clipPath id='clip0_2719_9'>
<rect width='512' height='512' fill='white' />
</clipPath>
</defs>
</svg>
),
framer: () => (
<svg
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
width='389'
height='334'
fill='none'
viewBox='0 0 389 334'
>
<path fill='url(#pattern0_1548_137)' d='M0 0H389V334H0z'></path>
<defs>
<pattern
id='pattern0_1548_137'
width='1'
height='1'
patternContentUnits='objectBoundingBox'
>
<use
transform='matrix(.00402 0 0 .00459 -.213 0)'
xlinkHref='#image0_1548_137'
></use>
</pattern>
<image
id='image0_1548_137'
width='352'
height='340'
xlinkHref='data:image/png;base64,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'
></image>
</defs>
</svg>
),
logo: () => (
<svg
width='105'
height='119'
className='w-6 h-6'
viewBox='0 0 105 119'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M0.125821 30.3477V8.11094C0.125821 5.90389 1.12007 3.97272 3.10857 2.31742C4.9645 0.772479 7.21813 0 9.86949 0H57.7925C60.9739 0 63.6915 0.938007 65.9454 2.814C68.1989 4.68999 69.3256 6.89704 69.3256 9.43514V17.7116C69.3256 20.029 69.9885 22.1809 71.3142 24.1672C72.64 26.1535 74.4959 27.6985 76.882 28.802C79.1355 30.016 81.6543 30.678 84.4383 30.7883H92.79C95.8392 30.7883 98.4904 31.6711 100.744 33.4368C102.998 35.3128 104.125 37.575 104.125 40.2235V84.6568C104.125 84.7548 104.124 84.8525 104.123 84.9499V110.67C104.123 112.936 103.129 114.92 101.14 116.62C99.2846 118.207 97.031 119 94.3795 119H46.4565C43.2751 119 40.5575 118.037 38.3037 116.11C36.0501 114.183 34.9234 111.917 34.9234 109.31V100.81C34.9234 98.4296 34.2605 96.2197 32.9348 94.1796C31.609 92.1395 29.7531 90.5528 27.3671 89.4196C25.1135 88.1728 22.5946 87.4928 19.8107 87.3795H11.459C8.40994 87.3795 5.75861 86.4728 3.50496 84.6593C1.25133 82.7328 0.124512 80.4093 0.124512 77.6894V30.6001C0.124512 30.5158 0.124949 30.4318 0.125821 30.3477ZM69.1268 85.9574V33.768C69.1268 32.9955 68.8618 32.3333 68.3314 31.7817C67.6686 31.2298 66.8732 30.9539 65.9454 30.9539H37.9075C36.9794 30.9539 36.184 31.2298 35.5212 31.7817C35.4194 31.8662 35.3255 31.9537 35.2394 32.0435L35.1222 84.3194C35.1222 85.1128 35.3872 85.7928 35.9176 86.3595C36.5805 86.926 37.3758 87.2094 38.3037 87.2094H66.3416C67.2696 87.2094 68.065 86.926 68.7279 86.3595C68.8779 86.2314 69.0109 86.0972 69.1268 85.9574Z'
fill='black'
/>
</svg>
),
typescript: () => (
<svg
xmlns='http://www.w3.org/2000/svg'
width='182'
height='178'
fill='none'
viewBox='0 0 182 178'
>
<path fill='#007ACC' d='M0 0H181.622V177.081H0z'></path>
<path
fill='#fff'
d='M144.151 73.383c4.03.985 7.691 3.203 10.523 6.373a29.101 29.101 0 014.033 5.686c.052.224-7.262 5.389-11.697 8.27-.161.114-.8-.618-1.524-1.742a9.8 9.8 0 00-3.342-3.558 9.2 9.2 0 00-4.563-1.417c-5.098-.369-8.383 2.438-8.359 7.13a6.742 6.742 0 00.724 3.313c1.122 2.437 3.205 3.9 9.746 6.88 12.042 5.448 17.211 9.04 20.401 14.144a26.592 26.592 0 013.255 10.55 26.9 26.9 0 01-1.285 11.008c-1.631 3.868-4.217 7.206-7.49 9.669-3.273 2.463-7.113 3.96-11.122 4.336a49.112 49.112 0 01-12.818-.139c-6.511-1.125-12.509-4.409-17.116-9.374a31.383 31.383 0 01-4.384-6.821c.492-.384 1.009-.73 1.548-1.034.748-.448 3.579-2.16 6.248-3.786l4.847-2.986 1.013 1.553a23.128 23.128 0 006.39 6.428 15.012 15.012 0 008.302 2.002 15.134 15.134 0 008.067-2.873 7.852 7.852 0 002.171-4.73 7.985 7.985 0 00-1.225-5.091c-1.306-1.965-3.976-3.617-11.563-7.075-5.95-2.108-11.369-5.603-15.853-10.224a23.68 23.68 0 01-4.619-8.84 37.166 37.166 0 01-.294-11.284c.891-4.32 3.023-8.246 6.109-11.249 3.085-3.003 6.974-4.936 11.14-5.537a40.562 40.562 0 0112.737.418zM104.66 80.76l.052 7.234H82.797v65.413H67.342V88.01H45.426v-7.105a73.127 73.127 0 01.19-7.293c.08-.115 13.405-.17 29.56-.14l29.399.085.085 7.204z'
></path>
</svg>
),
nextjs: () => (
<svg
xmlns='http://www.w3.org/2000/svg'
width='353'
height='353'
fill='none'
viewBox='0 0 353 353'
>
<circle cx='176.5' cy='176.5' r='176.5' fill='#fff'></circle>
<path
fill='#000'
d='M164.94.095c-.759.069-3.174.31-5.348.483-50.138 4.52-97.101 31.569-126.846 73.143C16.183 96.837 5.59 123.058 1.587 150.83.173 160.526 0 163.39 0 176.535c0 13.145.173 16.008 1.587 25.703C11.18 268.515 58.35 324.2 122.325 344.832c11.456 3.691 23.533 6.21 37.267 7.728 5.348.587 28.468.587 33.816 0 23.706-2.622 43.789-8.487 63.595-18.596 3.037-1.553 3.623-1.967 3.209-2.312-.276-.207-13.216-17.561-28.743-38.538l-28.227-38.124-35.369-52.338c-19.461-28.774-35.472-52.304-35.61-52.304-.138-.034-.276 23.219-.345 51.614-.104 49.716-.138 51.717-.759 52.89-.898 1.691-1.588 2.381-3.037 3.14-1.104.552-2.07.656-7.281.656h-5.969l-1.588-1.001a6.45 6.45 0 01-2.312-2.519l-.724-1.552.069-69.175.103-69.21 1.07-1.345c.552-.725 1.725-1.656 2.553-2.105 1.415-.69 1.967-.759 7.937-.759 7.039 0 8.212.276 10.041 2.277.518.552 19.669 29.395 42.581 64.138 22.912 34.743 54.244 82.182 69.634 105.471l27.95 42.333 1.415-.932c12.526-8.142 25.776-19.735 36.266-31.81 22.326-25.635 36.715-56.893 41.546-90.221 1.414-9.695 1.587-12.558 1.587-25.703s-.173-16.009-1.587-25.704C341.82 84.554 294.65 28.869 230.675 8.237 219.391 4.58 207.383 2.062 193.926.544c-3.313-.346-26.122-.725-28.986-.449zm72.257 106.747c1.656.828 3.002 2.415 3.485 4.071.276.897.345 20.08.276 63.31l-.104 62.033-10.938-16.767-10.973-16.768v-45.093c0-29.154.138-45.542.345-46.335.552-1.932 1.76-3.451 3.416-4.348 1.415-.724 1.932-.793 7.35-.793 5.107 0 6.004.069 7.143.69z'
></path>
</svg>
),
tailwindcss: () => (
<svg
xmlns='http://www.w3.org/2000/svg'
width='515'
height='320'
fill='none'
viewBox='0 0 515 320'
>
<path
fill='url(#paint0_linear_2162_50)'
d='M257.5 0c-68.666 0-111.584 35.556-128.75 106.667 25.75-35.557 55.791-48.89 90.125-40 19.588 5.07 33.59 19.79 49.088 36.079C293.21 129.285 322.428 160 386.25 160c68.666 0 111.584-35.556 128.75-106.667-25.75 35.557-55.791 48.89-90.125 40-19.588-5.07-33.59-19.79-49.088-36.079C350.54 30.714 321.322 0 257.5 0zM128.75 160C60.084 160 17.166 195.556 0 266.667c25.75-35.557 55.791-48.89 90.125-40 19.588 5.07 33.59 19.789 49.088 36.079C164.46 289.285 193.678 320 257.5 320c68.666 0 111.584-35.556 128.75-106.667-25.75 35.557-55.791 48.89-90.125 40-19.588-5.071-33.59-19.789-49.088-36.079C221.79 190.715 192.572 160 128.75 160z'
></path>
<defs>
<linearGradient
id='paint0_linear_2162_50'
x1='-3662.52'
x2='-2027.97'
y1='15728.6'
y2='33439.8'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#0FB3E7'></stop>
<stop offset='0' stopColor='#23E7C5'></stop>
</linearGradient>
</defs>
</svg>
),
gsap: () => (
<svg
xmlns='http://www.w3.org/2000/svg'
width='190'
height='220'
fill='none'
viewBox='0 0 190 220'
>
<path
fill='#010101'
d='M30.355 96.863c-6.268 2.946-22.859 16.206-26.054 20.135-3.319 3.929-4.302-2.21-.86-12.4 2.702-8.226 9.585-19.4 21.137-28.976 6.76-5.525 21.63-13.505 30.725-18.171 1.843-.983 25.685-11.05 46.947-16.084 1.844-.492-2.212 3.069-2.827 5.033-3.195 9.331-66.98 49.357-66.98 49.357l-2.088 1.106zm89.838 112.587c1.106 6.63.123 7.122-6.759 7.981-6.883.86-11.922-1.719-13.765-3.437-1.844-1.72-2.212-5.525-.368-8.963 1.106-2.211 2.212-2.947 2.827-5.648.614-2.578 1.106-3.193 1.597-4.174.491-.861.615-1.72.737-7.736.123-6.016 0-17.312.615-22.1.615-4.911 21.876 2.21 21.876 2.21s-5.039 12.523-6.39 15.593c-1.353 3.07-1.229 8.963-1.229 10.19 0 1.228-.492 3.683-.861 3.806-.369.123 1.229 3.315.491 5.157-.491 1.719 1.106 6.14 1.229 7.121zm8.111-187.728c-.738-4.666 0-13.875.983-15.348 3.073-4.174 19.295-4.665 22.737.246 1.475 2.21 1.351 7.366 1.106 10.682-.246 3.314-1.106 10.436-1.229 12.769-.123 1.72-17.943 4.42-21.876-.246-1.106-1.227-1.721-8.103-1.721-8.103zm36.132 175.819c7.497 5.402 13.273 6.384 17.083 8.349 3.809 1.965 2.827 5.771-3.564 6.876-5.162.982-13.273-.983-18.68-.983-5.408 0-17.452.614-20.648-1.595-3.686-2.578-2.089-7.368-2.089-7.368.983-2.7 3.441-8.717 2.704-13.628-.738-4.911-1.721-7.612-3.565-12.155-1.843-4.542-3.194-15.715-1.474-16.329 1.721-.615 1.229 0 3.441.49 2.212.491 4.671 1.228 9.464 1.228s10.077-.737 11.921-1.105c1.843-.368 3.318-.737 2.703 3.07-.614 3.806-2.457 10.927-2.581 16.452-.122 5.525-.122 11.91.247 13.015.368 1.105 3.072 2.332 5.038 3.683z'
></path>
<path
fill='#8AC640'
d='M138.137 34c-13.518 11.664-39.696 14.856-78.53 29.835C49.65 67.641 23.105 79.06 16.714 90.97c21.507-12.4 29.495 4.665 31.216 22.222 1.597 16.453 9.832 25.048 30.97 24.556 21.753-.491 28.389 12.155 34.411 27.012 11.675-56.847 30.356-67.897 42.399-77.596 25.564-20.75-5.898-57.339-17.574-53.164z'
></path>
<path
fill='#8AC640'
d='M138.136 34c-32.444 11.295-64.521 14.12-102.25 37.325C26.914 76.85 7.988 89.373 4.3 113.315 18.065 98.09 49.895 78.937 88.854 66.782c19.664-6.139 34.043-10.19 51.494-16.943C139.12 41.98 139.12 38.91 138.136 34z'
></path>
<path
fill='#010101'
d='M179.553 101.283s-2.335 7.981-7.006 10.559c0 0-3.441 1.228-10.323-2.578-1.966-1.105-3.441-4.911-3.318-6.139.123-2.947 1.966-4.297 1.966-4.297s1.967-3.316 4.302-3.193c2.335.123 6.268.491 7.497-.614 1.106-1.228 7.128 2.21 6.882 6.262zM129.41 24.055s-.491 6.262-1.351 10.19c-.123.738-3.81 1.105-6.514 2.211 5.162 14.733 36.255 14.61 40.311 7.367-1.967-1.35-5.899-3.438-7.743-4.175-1.843-.737-1.72-.614-1.843-4.052-.123-3.438-.369-9.822-.615-11.541-.246-1.72-19.295-1.72-22.245 0z'
></path>
<path
fill='#F0EFEF'
d='M130.64 24.055s0 3.56-.369 6.998c-.122 1.596-.245 2.578-.491 3.806-.123.737 4.178 3.683 5.407 10.19 5.899 13.138 19.542 6.63 25.194.369-1.966-1.35-5.161-3.192-8.848-4.666-1.844-.737-.983-2.332-1.106-5.77-.123-3.438-.615-8.472-.86-10.314-.247-1.841-15.977-2.332-18.927-.613z'
></path>
<path
fill='#010101'
d='M129.411 24.055s-.123 2.21-.491 4.788c1.597 1.596 3.686 3.806 5.285 5.157 1.106.983 3.809.86 6.268.86 2.212 0 4.178.245 5.038-.245 1.967-.983 4.793-3.438 6.391-5.28-.122-2.21-.245-4.297-.368-5.28-.124-1.72-19.174-1.72-22.123 0z'
></path>
<path
fill='#010101'
d='M140.594 33.386c-1.475 0-3.196-.123-4.547-.368-.615-.123-1.23-.491-1.721-.737-.861-.614-1.721-1.35-2.703-2.087-1.967-1.474-2.09-2.333-2.09-2.7.861-7.736-.246-14.243-.246-14.243s-.86-3.316 3.81-4.175c4.67-.86 7.496-.982 7.496-.982s2.95 0 7.497.982c4.67.86 3.81 4.175 3.81 4.175s-1.106 6.507-.246 14.242c0 .368-.122 1.227-2.089 2.7-1.721 1.228-3.072 2.579-4.424 2.825-1.352.245-3.073.368-4.547.368z'
></path>
<path
fill='#010101'
d='M140.594 4.901c-8.111 0-9.709 2.21-12.044 4.666-.491.614-.123 4.297.738 12.155h1.106s-.738-2.21-.615-4.789c.123-2.578.615-2.455.246-3.069-.491-.737-1.475-1.965.738-3.192 2.212-1.228 5.653.982 9.831 1.105 4.179-.123 7.743-2.333 9.955-1.105 2.212 1.227 1.229 2.455.738 3.192-.492.737.122.49.245 3.07.123 2.578-.615 4.788-.615 4.788h1.106c.738-7.858 1.23-11.296.861-11.91-2.09-2.7-4.178-4.788-12.29-4.91zm38.959 96.75s-2.335 7.489-6.882 10.068c-.984-.491-.861-1.228-1.721-2.333-.246-.368-1.107-.614-1.475-.982-.368-.368-.245-.983-.86-1.473-.492-.492-.861-.123-1.352-.492-.491-.49-.615-1.105-.983-1.472-.246-.246-1.229-.369-1.475-.614-.615-.615-6.021-1.72-5.776-2.947a10.67 10.67 0 011.475-3.193s2.335-3.438 4.669-3.315c2.335.123 4.548.614 5.777-.49 1.352-1.23 8.972 3.314 8.603 7.243z'
></path>
<path
fill='#010101'
d='M163.576 47.383s7.743-1.842 13.027 3.192c5.285 5.157 4.916 11.541 3.319 15.47 1.351 1.596 3.81 6.016 1.966 11.296 8.111 6.875 4.547 17.435-2.703 24.433 0 0-1.721-6.385-8.603-6.753.245-2.455-6.391-4.42-3.319-10.805-4.67-1.105-4.547-4.297-5.284-8.225-.615-3.93 1.597-28.608 1.597-28.608z'
></path>
<path
fill='#F0EFEF'
d='M160.749 50.82s8.972-4.542 14.257.615c5.284 5.157 3.809 10.804 2.212 14.733 1.351 1.596 4.547 6.14 2.58 11.541-.368 1.228-3.072 1.228-5.039 4.42 4.916-2.825 7.989-2.087 9.095 1.473 1.72 5.525-2.09 12.155-5.408 15.838 0-.123-.123-.245-.123-.368-.491 1.842-1.106 5.402-4.792 9.331-1.844 1.965-3.319 1.719-5.408 1.228-2.458-.614-3.318-1.72-6.759-3.561-1.967-1.104-.861-2.455-.861-3.56 0-.245.246-.614.615-1.105.246-.614.983-1.596 2.089-2.701 0 0 1.598-2.21 3.933-2.088 2.335.123 4.793-.367 5.408-.981 0-4.298-4.916-4.42-3.196-11.787.123-.369.738-.983 2.704-1.228-2.95-.614-4.301-.737-6.391-2.701-1.475-1.35-2.58-3.07-2.95-5.28-.736-3.805-1.966-23.818-1.966-23.818z'
></path>
<path
fill='#010101'
d='M134.819 43.086c-.737-.983-4.547-5.894-11.798-7.858-2.09-.614-3.441 1.105-5.53 2.332-.615-.368-3.319-1.596-4.793-.737-1.475.86-2.458 1.72-3.933 2.333-.738-.368-2.704-.368-4.301.245-1.598.492-4.056 1.597-6.391 4.789-1.475 5.28 26.054 1.35 26.054 1.35l10.692-2.454z'
></path>
<path
fill='#8AC640'
d='M135.064 43.086c-3.933-1.351-3.318-5.894-12.044-6.63-1.721-.123-2.827 1.227-4.056 2.086.615.615 1.229 1.597 1.598 2.578-1.106-1.227-3.072-2.823-5.039-3.192-1.844-.367-3.073.983-5.039 1.965.368.368.737.982 1.228 1.72-1.72-1.105-2.949-1.474-5.284-.615-1.598.49-4.67 1.842-7.005 5.157-1.475 5.28 24.826-.614 24.826-.614l10.815-2.455z'
></path>
<path
fill='#010101'
d='M158.17 45.05s0-1.35-.123-2.578c0-.245-.983-.86-.983-1.105l-.246-.246s1.967-1.105 3.441-.49c1.597.49 2.458 2.578 2.458 2.578 2.827-.982 3.072.123 4.424 1.596 2.95-.614 3.318.49 5.162 3.192 0 0-2.212-.368-6.513.368-4.179.614-7.62-3.438-7.62-3.315z'
></path>
<path
fill='#8AC640'
d='M157.679 44.436s.737-.614.491-.737c1.351-.737 3.195-1.596 4.055.737 2.827-.983 3.196.368 4.547 1.842 3.441-1.596 3.687.368 3.933 1.227-1.106 0-2.703.123-4.915.369-4.179.614-8.235-3.56-8.111-3.438z'
></path>
<path
fill='#010101'
d='M115.893 41.367s7.005 2.455 12.904 2.087c5.9-.491 15.977-.982 21.384 2.21 0 0 5.531-1.965 10.693-.614 5.162 1.35 14.625 10.19 11.798 19.521-.246.615-1.843 1.597-3.687 2.21 0 0 .984 4.175-.737 7.613-1.721 3.315-5.531 9.7-5.654 18.54-.122 1.473-.368 4.542-.614 6.015-9.586-.367-24.334-3.929-38.835-3.683.122-1.595.245-2.578.368-4.174h.368c-.737-4.052-.983-6.14-1.721-9.209-4.67-2.946-9.586-6.384-13.764-12.891-4.055-6.508 7.497-27.625 7.497-27.625zm47.439 66.3s7.62 27.257-1.352 38.676c0 0 1.352 5.279-1.721 10.927-.491 2.455-1.106 4.666-1.474 7.121-1.598 10.19-4.302 14.488-5.04 30.817l-7.374-.122s-.86-11.787-3.441-18.049c-1.474-3.56-7.251-8.349-7.004-13.137.245-3.683.983-6.753 7.251-11.664.491-7.121-6.637-13.874-5.531-40.394l25.686-4.175z'
></path>
<path
fill='#F0EFEF'
d='M161.12 106.562c1.966 12.523 6.513 31.063-1.721 40.148.486 2.304.527 4.679.122 6.998-.245 1.474-.737 3.07-1.351 4.788-1.229 2.947-1.721 7.244-2.09 9.823-1.597 10.19-1.597 10.682-2.335 27.011l-7.374-.123s-.86-11.786-3.441-18.047c-1.474-3.561-4.547-6.63-4.793-11.419-.245-3.683 2.335-11.05 8.481-10.804-.369-14.856-7.252-11.91-9.095-42.85l23.597-5.525zm-45.227-65.195s2.704.86 5.653 1.105c2.95.245 6.145 0 8.971-.123 5.9-.491 14.257-1.105 19.787 2.087 0 0 3.073-.983 6.391-.737 1.475.123 2.95 1.35 4.67 1.842 5.408 1.35 10.569 10.313 8.234 18.417-.246.614-1.967 0-3.933.614.368 1.72.615 5.648-1.352 9.822-2.089 4.175-4.793 9.577-4.302 19.89-12.904-.613-18.68-1.472-31.462-2.087-1.105-4.543-1.843-9.085-1.966-11.418 1.721-.86 2.703-1.596 4.056-3.07-3.687.615-5.162.369-7.374-.859-2.212-1.228-6.145-5.157-8.111-7.735-.246-.246-1.598 3.806-4.67 3.93-1.106-1.597 3.564-6.14 2.703-7.859-3.072-6.262 2.705-23.82 2.705-23.82z'
></path>
<path
fill='#010101'
d='M162.102 96.371s.246 4.42.246 5.525c0 1.228.983 4.911 1.106 6.63-1.352 2.333-7.251 7.613-17.943 9.577-10.569 2.21-24.579-14.365-24.579-14.365.368-1.596 1.597-6.262 2.458-8.717.123-.246.368-.86.368-1.105 1.107-1.596 38.344 2.455 38.344 2.455z'
></path>
<path
fill='#F0EFEF'
d='M159.399 96.74c0 3.07.491 5.28.86 7.244.614 3.561 1.597 5.894 1.597 8.227 0 7.12-9.34 5.892-17.206 6.138-10.569 2.211-19.541-14.365-19.541-14.365.738-2.824 1.229-6.015 2.335-8.717.123-1.473.369-3.315.492-4.174 14.993 0 25.562.86 31.708 1.472.246 1.351 0 3.684-.245 4.175z'
></path>
<path
fill='#010101'
d='M147.6 112.578s-6.513-14.488-26.055-10.19c-4.669 13.137-10.937 28.239-6.882 44.569-4.055 5.525-8.725 8.595-8.725 18.785s.491 11.909.491 11.909l14.379.738s4.67-6.016 6.513-12.524c.492-1.842.984-5.156.615-8.962.491-.737 2.581-2.456 2.827-5.771 0 0 7.005-3.683 11.061-12.646 3.81-8.105 2.827-15.103 5.776-25.908z'
></path>
<path
fill='#F0EFEF'
d='M147.6 112.578c-.368-1.35-5.284-14.61-23.473-10.682-10.692 28.485-6.759 40.272-5.162 45.428-7.251 9.208-10.569 11.173-9.094 29.835h9.586c4.424-6.998 5.408-9.577 5.653-18.785 0-.368-1.351.737-2.335 1.965.738-3.806 2.827-4.543 4.425-6.876.737-.982 1.351-2.455 1.351-4.42 8.603-5.77 11.799-13.014 13.642-20.504 1.475-5.156 3.195-13.628 5.407-15.961z'
></path>
<path
fill='#010101'
d='M117.246 92.811s3.318.122 6.268 1.105c2.827.982 2.827 1.596 3.933 2.824 1.106 1.228 3.81 3.07 3.319 4.911-.247.982-.861 1.228-1.721 2.087-.369.369-3.073 3.315-3.687 3.683-.369.246-.861.614-1.229.86l-1.844 1.228c-1.229.614-2.089.982-3.441.859 0 0-3.072-.123-5.039-2.21 0 0-.246-.982.246-1.473 0 0-2.581-2.21-3.318-3.683-.738-1.473-.738-3.56-.246-4.665.246-1.106 5.038-4.176 6.759-5.526zm3.073 119.464l-.369 3.07s-1.106 1.35-9.34 1.227c-8.357-.123-10.569-2.701-11.306-4.051l-.492-3.193s1.598-2.333 1.967-2.333c2.704.246 11.921 3.929 18.312 4.911.613 0 .736.246 1.228.369zm17.82-6.262c0 1.35-.123 1.35-.123 2.701 1.474 1.105 5.162 1.719 12.166 1.595 10.201-.245 19.664 3.07 31.216 1.105l.123-2.209-1.106-.123-40.925-3.315-1.351.246z'
></path>
<path
fill='#010101'
d='M147.109 210.31h3.073c6.637-.245 12.905 1.228 19.663 1.596 3.565-.123 7.989-.982 7.62-3.56l-34.903-2.947c-2.089 2.332-.492 4.297 4.547 4.911zm-40.064-51.69c1.106.737 8.602 5.157 20.769 4.543-.246 2.333-.123 6.876-5.53 14.856-2.704 3.929-5.039 10.805-5.531 19.522.124 1.965 1.229 3.683-.245 6.262.491 1.596 2.457 4.788 3.441 6.752.983 1.965 1.474 4.175-5.039 4.298-6.637.123-17.33-.614-15.854-5.77.738-2.701 2.827-5.525 3.073-6.631.246-1.105.246-4.419 2.334-6.63 1.844-6.139 1.23-12.032.861-17.557-.614-5.771-.737-14.979 1.721-19.645zm11.429-100.065c8.726-11.664 1.352-20.994-12.658-18.171-5.653 1.105-11.306 5.034-11.675 12.155-1.844.245-6.022.49-8.112 8.103-1.597 5.894-2.457 6.999-5.284 9.945-1.844 2.087.123 6.385 1.474 9.455 4.548 10.559 18.558 11.54 28.021 19.521 3.196-.86 6.513-4.42 7.497-6.752-7.989-9.455-6.268-13.138-9.464-18.049 3.442-1.228 11.307-6.016 10.201-16.206z'
></path>
<path
fill='#F0EFEF'
d='M116.752 57.819c.491-.737 1.351-2.333 1.721-2.947.123-.123 1.474 2.21 1.597 2.087 3.318-5.402 4.179-13.26.369-13.997-.861-.123-2.458-.49-3.81-.982-2.458-.86-4.67-.86-8.603-.123-5.407.982-10.815 4.911-10.815 10.56 0 .368 3.809 1.472 4.916 6.016-1.844-2.58-5.04-5.403-8.849-2.947-4.056 2.578-1.966 8.471-7.374 14.61-1.844 2.087-1.597 4.543.368 9.454 3.196 7.735 18.312 11.91 26.547 19.276 1.966-.86 3.318-2.824 4.301-4.297-5.53-5.77-7.743-11.173-9.34-15.102-1.966-4.543-4.179-7.12-8.48-10.56 2.212.86 3.933 1.72 4.915 2.456 1.106.737 2.704.86 4.179.368 5.286-1.84 8.112-9.207 8.358-13.872z'
></path>
<path
fill='#010101'
d='M170.213 59.783c-.368 4.666-3.809 2.333-5.653 1.474-3.687-1.596-7.374-2.701-11.675-2.701-4.302 0-9.832.368-14.625 1.596-6.636 1.841-8.603 1.719-11.552.245-2.95-1.596-8.111-5.525-8.111-5.525s-.123 1.228 1.106 2.824c1.597 1.965 5.162 4.42 9.954 6.016 2.336.737 4.179.245 6.269-.245 10.938-2.701 22.49-3.193 32.198 2.7.492.246 2.213-.49 2.95-1.596.983-1.595-.861-4.788-.861-4.788z'
></path>
<path
fill='#0A1825'
d='M114.295 106.562c.983.614 2.212.982 3.563 2.087 0 0-1.106 0-1.597-.491-.615-.368-1.844-1.473-1.966-1.596z'
></path>
<path
fill='#F0EFEF'
d='M149.813 9.198c-.369-1.105-3.073-3.07-9.34-3.07-6.76 0-8.726 2.088-8.848 3.193 0 .368-.492 4.298-.615 5.893 0 0 0 1.965.122 4.911.123 1.965.615 3.07.861 5.648.245 2.7.983 4.42 2.335 6.63.615.368 1.106.737 1.72.86 2.459.49 6.76.613 9.095 0 1.352-.369 3.072-2.701 3.441-4.789.491-2.578.983-4.42 1.106-6.016.246-1.595.369-5.156.491-6.139.369-2.7-.245-6.875-.368-7.12z'
></path>
<path
fill='#010101'
d='M136.908 160.953s6.514 2.824 22.613.368c0 0-4.547 22.837-2.457 34.255 0 0 2.089 2.947 17.574 8.595 0 0 6.882 1.719 6.637 5.157 0 0 .245.737-8.111.491-8.357-.246-16.223-1.719-21.754-1.719-5.53 0-11.429.245-12.412-1.351-1.106-1.473.246-5.279 1.843-7.49 1.722-2.332 1.229-4.052 1.107-8.225-.37-10.927-8.727-22.223-5.04-30.081z'
></path>
<path
fill='#8AC640'
d='M135.556 163.041c-.861 1.228.122 5.893 1.351 10.436 1.229 4.542 3.934 7.244 4.548 14.733.614 7.366.737 8.349-1.352 12.646-2.09 4.296-2.704 8.226 4.547 8.349 7.25.123 11.184-.123 18.558.982 7.374 1.105 9.954 1.474 14.01.86 4.056-.614 4.916-1.965 3.196-3.192-1.721-1.228-8.849-2.579-11.922-5.035-2.949-2.21-11.306-5.893-11.429-6.875-.368-3.316-.491-15.348.123-19.277.615-3.929 1.475-9.577 1.721-11.05.246-1.473 1.474-2.947-.615-2.456-2.089.491-9.954 1.597-15.854 1.228-5.899-.367-6.513-1.718-6.882-1.349z'
></path>
<path
fill='#010101'
d='M139.735 200.979c2.088.982 5.161 1.719 7.496 1.719 0 0-.861 4.052.492 6.507 1.351 2.456-9.832.983-9.832.983l-.491-8.718 2.335-.491zm32.567 10.559c1.967-.614 3.319-2.824 1.721-4.911-1.721-2.087-3.195-2.456-.983-2.578 2.212-.123 10.323 4.788 10.323 4.788l-4.179 3.806-6.882-1.105zm-37.115-43.71c2.827.983 7.128 1.228 10.815 1.105 3.687-.122 9.217-.614 12.782-1.841 3.564-1.228 2.089 1.35 2.089 1.35l-1.966 1.842s-4.671 1.842-12.29 1.719c-8.971-.123-11.676-1.105-11.676-1.105l.246-3.07zm.246 6.14c2.827.982 7.128 1.228 10.815 1.105 3.686-.123 8.603-.123 12.167-1.474 1.474-.49.615 1.597.615 1.597l-.615 1.104s-4.793 1.72-12.29 1.596c-8.972-.122-10.569-.86-10.569-.86l-.123-3.068z'
opacity='0.3'
></path>
<path
fill='#010101'
d='M127.322 87.9c0 .86 9.587 5.648 14.871 6.63 5.285.982 16.346 0 18.066-.368l-.246 1.72s-13.15 1.964-23.228-.737c-10.078-2.701-8.971-3.316-8.971-3.316l-.492-3.929z'
></path>
<path
fill='#F0EFEF'
d='M106.797 192.63c1.475.737 6.76 2.087 10.201 1.351.491-.123 0-8.472 1.352-12.278 1.966-5.28 5.162-9.577 6.636-18.908-5.162-.491-11.06-1.842-14.133-2.824-3.932 12.032-2.58 22.345-4.056 32.659zm8.235 7.736c.861.245 1.475 1.227 1.721.614.491-1.106-.86-3.193-.983-4.666v-.123c-1.106-.982-8.603-1.105-8.112-.614-.86 1.596-2.211 1.351-2.703 4.543-.245 1.596 1.721.246 3.564.123-3.318 2.209-7.128 5.034-7.743 7.489-.737 3.438.492 4.42 4.179 6.262 3.196.737 7.005.86 9.955.737 3.318-.614 3.933-2.21 2.95-4.42-1.476-3.315-2.459-7.613-2.828-9.945z'
></path>
<path
fill='#010101'
d='M116.385 40.876c4.055 2.332 9.709 1.719 11.798 1.596.492 0 5.408-.86 5.653-.738.491.123.491.492.491.492s-1.843.982-6.021 1.227c-3.933.245-8.603 0-11.184-1.227-3.072-1.35-.737-1.35-.737-1.35zm41.785 2.332c.737.49 5.531 2.333 7.62 4.543 1.843 1.965.86 1.842.491 1.35-.491-.614-4.301-3.192-5.776-3.805-1.475-.614-3.318-1.72-3.318-1.965 0-.245.983-.123.983-.123z'
></path>
<path
fill='#F0EFEF'
d='M115.77 94.161c3.564-.245 7.251.614 9.586 3.07 1.229 1.228 3.196 2.578 2.95 3.806 0 .368-.738 1.35-1.351 2.087-.369.491-1.475 1.596-1.844 1.965-.491.368-2.212 1.719-2.581 1.964-.368.246-.86.86-1.229.983-1.228.614-2.58.123-3.81-.491-1.228-.614.247-.737-1.106-1.719-3.317-2.333-5.161-3.93-3.809-8.472.122-.86 1.474-1.843 3.194-3.193z'
></path>
<path
fill='#010101'
d='M84.431 66.045c-11.06 4.42-39.205 18.418-47.193 22.715 6.637 4.174 9.709 14.242 10.693 24.432.122.983.245 1.843.368 2.825.123.859.246 1.473.368 1.842 0 .123 0 .368.123.49 7.252-19.767 33.182-40.64 34.166-42.236.491-.736-.615-3.928 1.106-6.997 2.213-3.93 6.514-5.65.37-3.07zm26.3 92.698c5.653-11.295 5.776-22.1 5.653-34.746 0-5.28 3.81-12.77 1.844-10.682-7.374 8.225-25.931 23.696-39.327 24.555 18.803-.613 26.177 8.841 31.83 20.873z'
opacity='0.4'
></path>
<path
fill='#010101'
d='M26.422 99.195c7.005-5.034 43.26-24.31 51.986-27.011 8.725-2.824 6.022-6.14 6.022-6.14S49.035 81.27 27.896 94.406'
></path>
<path
fill='#010101'
d='M129.658 63.712c-2.827-1.105-5.039 2.21-4.302 5.403.738 3.192 7.375 6.752 7.005 18.417-.245 9.577-2.335 13.505-2.335 13.505l-4.67-5.893s-.737-13.26-2.335-15.225c-1.597-1.964-6.636-5.525-8.602-7.366-1.967-1.843 2.211-4.298 1.966-7.736-.246-3.315 2.089-9.945 2.089-9.945l11.184 8.84zm17.083 52.304c-.246 9.208 1.844 22.837 2.704 29.344.86 6.507 1.966 6.998 0 9.945-1.967 2.824-4.547 7.49-4.547 7.49l-8.481-.737s6.76-8.595 7.128-10.191c.368-1.595-3.441-13.75-3.441-13.75l6.637-22.101zm-16.345-85.945c1.72 3.805 3.809 5.524 7.127 6.63 1.967.736 9.709 1.719 12.782-1.72 1.351-1.595.491-5.893.491-5.893l-7.005 5.648-9.463-1.719-1.106-2.824-2.826-.122z'
opacity='0.4'
></path>
<path
fill='#8AC640'
d='M131.131 38.542c3.196 2.088 11.184 4.052 13.396 4.42 2.212.491 5.776-2.332 7.497-3.069 1.844-.86 5.039-1.35 8.726 1.965.369.368-.86 1.964-.86 1.964-.124-.123-.861-.123-1.844-.614-.983-.49-1.844-.86-3.318-.737-6.146.737-7.128 2.824-12.536 1.596-5.407-1.228-6.759-2.21-12.044-1.965'
></path>
<path
stroke='#010101'
strokeLinejoin='round'
strokeMiterlimit='10'
strokeWidth='10.864'
d='M131.131 38.542c3.196 2.088 11.184 4.052 13.396 4.42 2.212.491 5.776-2.332 7.497-3.069 1.844-.86 5.039-1.35 8.726 1.965.369.368-.86 1.964-.86 1.964-.124-.123-.861-.123-1.844-.614-.983-.49-1.844-.86-3.318-.737-6.146.737-7.128 2.824-12.536 1.596-5.407-1.228-6.759-2.21-12.044-1.965'
></path>
<path
fill='#8AC640'
d='M130.026 38.911c4.055 1.72 11.921 3.56 14.133 4.052 2.212.491 5.776-1.72 7.497-2.824 3.073-1.965 7.005-.368 8.849 1.72 1.228 1.35 1.72 2.209 1.72 2.577 0 .49-1.474 0-1.474 0-.861-.368-1.844-.49-2.581-.982-.983-.491-1.967-1.228-3.441-1.105-6.145.737-7.374 2.824-12.658 1.596-5.285-1.228-6.637-2.333-12.29-1.965'
></path>
<path
fill='#010101'
d='M110.977 153.586c-.246-.245.246-.491 0-.491-1.597 0-3.81-1.228-5.039-2.947-5.285-7.612-13.028-12.645-27.038-12.277-21.016.49-29.373-8.103-30.97-24.556-.86-8.962-3.318-17.68-8.357-22.591l-2.95 1.842c5.653 4.91 7.497 12.891 8.726 23.819 1.966 16.452 15.24 24.065 30.724 24.31 16.1.245 21.876 3.56 27.898 11.664 1.966 2.578 4.179 3.438 5.899 3.806l1.107-2.579z'
></path>
<path
fill='#010101'
d='M168.001 74.64c.369 1.841 1.352 5.402 3.318 7.12.861.86.984 1.105.246 1.105s-6.145-.245-6.145-.245l-1.475-2.578 4.056-5.402z'
opacity='0.4'
></path>
</svg>
),
reactjs: () => (
<svg
xmlns='http://www.w3.org/2000/svg'
width='2194'
height='2500'
viewBox='175.7 78 490.6 436.9'
>
<g fill='#11C9FB'>
<path d='M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24s9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6z'></path>
<circle cx='420.9' cy='296.5' r='45.7'></circle>
</g>
</svg>
),
};
export interface AnimatedBeamProps {
className?: string;
containerRef: RefObject<HTMLElement | null>; // Container ref
fromRef: RefObject<HTMLElement | null>;
toRef: RefObject<HTMLElement | null>;
curvature?: number;
reverse?: boolean;
pathColor?: string;
pathWidth?: number;
pathOpacity?: number;
gradientStartColor?: string;
gradientStopColor?: string;
delay?: number;
duration?: number;
startXOffset?: number;
startYOffset?: number;
endXOffset?: number;
endYOffset?: number;
dotted?: boolean;
dotSpacing?: number;
}
const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
className,
containerRef,
fromRef,
toRef,
curvature = 0,
reverse = false, // Include the reverse prop
duration = Math.random() * 3 + 4,
delay = 0,
pathColor = 'gray',
pathWidth = 2,
pathOpacity = 0.2,
gradientStartColor = '#4d40ff',
gradientStopColor = '#4043ff',
startXOffset = 0,
startYOffset = 0,
endXOffset = 0,
endYOffset = 0,
dotted = false,
dotSpacing = 6,
}) => {
const id = useId();
const [pathD, setPathD] = useState('');
const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
const strokeDasharray = dotted ? `${dotSpacing} ${dotSpacing}` : 'none';
// Calculate the gradient coordinates based on the reverse prop
const gradientCoordinates = reverse
? {
x1: ['90%', '-10%'],
x2: ['100%', '0%'],
y1: ['0%', '0%'],
y2: ['0%', '0%'],
}
: {
x1: ['10%', '110%'],
x2: ['0%', '100%'],
y1: ['0%', '0%'],
y2: ['0%', '0%'],
};
useEffect(() => {
const updatePath = () => {
if (containerRef.current && fromRef.current && toRef.current) {
const containerRect = containerRef.current.getBoundingClientRect();
const rectA = fromRef.current.getBoundingClientRect();
const rectB = toRef.current.getBoundingClientRect();
const svgWidth = containerRect.width;
const svgHeight = containerRect.height;
setSvgDimensions({ width: svgWidth, height: svgHeight });
const startX =
rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
const startY =
rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
const endX =
rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
const endY =
rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
const controlY = startY - curvature;
const d = `M ${startX},${startY} Q ${
(startX + endX) / 2
},${controlY} ${endX},${endY}`;
setPathD(d);
}
};
// Initialize ResizeObserver
const resizeObserver = new ResizeObserver((entries) => {
// For all entries, recalculate the path
for (let entry of entries) {
updatePath();
}
});
// Observe the container element
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
// Call the updatePath initially to set the initial path
updatePath();
// Clean up the observer on component unmount
return () => {
resizeObserver.disconnect();
};
}, [
containerRef,
fromRef,
toRef,
curvature,
startXOffset,
startYOffset,
endXOffset,
endYOffset,
]);
return (
<svg
fill='none'
width={svgDimensions.width}
height={svgDimensions.height}
xmlns='http://www.w3.org/2000/svg'
className={cn(
'pointer-events-none absolute left-0 top-0 transform-gpu stroke-2',
className
)}
viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
>
<path
d={pathD}
stroke={pathColor}
strokeWidth={pathWidth}
strokeOpacity={pathOpacity}
strokeLinecap='round'
strokeDasharray={strokeDasharray}
/>
<motion.path
d={pathD}
stroke={`url(#${id})`}
strokeLinecap='round'
strokeDasharray={strokeDasharray}
initial={{
strokeWidth: pathWidth,
strokeOpacity: 0,
}}
animate={{
strokeWidth: pathWidth * 1.5, // or any scale factor you prefer
strokeOpacity: 1,
}}
transition={{
duration: 2, // adjust as needed
delay: delay, // use the same delay as the gradient animation
}}
/>
<defs>
<motion.linearGradient
className='transform-gpu'
id={id}
gradientUnits={'userSpaceOnUse'}
initial={{
x1: '0%',
x2: '0%',
y1: '0%',
y2: '0%',
}}
animate={{
x1: gradientCoordinates.x1,
x2: gradientCoordinates.x2,
y1: gradientCoordinates.y1,
y2: gradientCoordinates.y2,
}}
transition={{
delay,
duration,
ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
repeat: Infinity,
repeatDelay: 0,
}}
>
<stop stopColor={gradientStartColor} stopOpacity='0'></stop>
<stop stopColor={gradientStartColor}></stop>
<stop offset='32.5%' stopColor={gradientStopColor}></stop>
<stop
offset='100%'
stopColor={gradientStopColor}
stopOpacity='0'
></stop>
</motion.linearGradient>
</defs>
</svg>
);
};
// Add this line after your component definition
AnimatedBeam.displayName = 'AnimatedBeam';
// Then export the component
export { AnimatedBeam };
const Circle = forwardRef<
HTMLDivElement,
{ className?: string; children?: React.ReactNode }
>(({ className, children }, ref) => {
return (
<div
ref={ref}
className={cn(
'z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
className
)}
>
{children}
</div>
);
});
Circle.displayName = 'Circle';
// Then export the Circle component
export { Circle };