src/registry/blocks/logo-cloud/logo-cloud-four/logo-cloud-four.tsx
'use client'
import { type ReactNode, useRef } from 'react'
import {
motion,
useMotionTemplate,
useMotionValue,
useReducedMotion,
useSpring,
} from 'motion/react'
import { cn } from '@/lib/utils'
type Company = {
name: string
icon: ReactNode
}
const companies: Company[] = [
{
name: 'Cursor',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
id="Ebene_1"
version="1.1"
viewBox="0 0 1655.29 278.83"
>
<defs></defs>
<path
className="st0"
d="M139.03,4.61h90.64v49.93h-87.57c-47.24,0-84.11,27.27-84.11,84.88s36.87,84.88,84.11,84.88h87.57v49.93h-94.48c-79.12,0-135.19-46.48-135.19-134.82S59.91,4.61,139.03,4.61Z"
/>
<path
className="st0"
d="M275.75,4.61h56.07v164.76c0,41.09,18.82,60.3,62.99,60.3s62.99-19.2,62.99-60.3V4.61h56.07v176.28c0,59.91-38.02,97.94-119.06,97.94s-119.06-38.41-119.06-98.32V4.61Z"
/>
<path
className="st0"
d="M806.9,81.04c0,29.96-17.28,53-40.33,62.99v.77c24.2,3.46,36.49,20.74,36.87,44.17l1.15,85.26h-56.07l-1.15-76.04c-.38-16.9-10.37-27.27-30.34-27.27h-93.33v103.31h-56.07V4.61h154.78c50.7,0,84.49,25.73,84.49,76.43h0ZM750.45,88.72c0-23.04-12.29-35.72-35.33-35.72h-91.41v71.43h92.17c21.12,0,34.57-12.67,34.57-35.72h0Z"
/>
<path
className="st0"
d="M1018.9,195.49c0-19.2-12.29-27.27-30.72-28.8l-62.22-5.76c-53.77-4.99-81.81-26.12-81.81-77.2S878.72,4.61,928.26,4.61h137.49v48.39h-133.65c-19.2,0-31.49,9.99-31.49,29.19s12.67,28.42,31.88,29.96l63.37,5.38c48.01,4.22,79.5,26.12,79.5,77.58s-33.41,79.12-80.65,79.12h-143.64v-48.39h138.26c18.05,0,29.57-12.29,29.57-30.34h0Z"
/>
<path
className="st0"
d="M1239.35,0c84.49,0,137.88,54.15,137.88,139.03s-55.69,139.8-140.18,139.8-137.88-54.92-137.88-139.8S1154.86,0,1239.35,0ZM1319.24,139.41c0-56.84-33.03-90.25-81.04-90.25s-81.04,33.41-81.04,90.25,33.03,90.25,81.04,90.25,81.04-33.41,81.04-90.25Z"
/>
<path
className="st0"
d="M1655.29,81.04c0,29.96-17.28,53-40.33,62.99v.77c24.2,3.46,36.49,20.74,36.87,44.17l1.15,85.26h-56.07l-1.15-76.04c-.38-16.9-10.37-27.27-30.34-27.27h-93.33v103.31h-56.07V4.61h154.78c50.7,0,84.49,25.73,84.49,76.43h0ZM1598.83,88.72c0-23.04-12.29-35.72-35.33-35.72h-91.41v71.43h92.17c21.12,0,34.57-12.67,34.57-35.72h0Z"
/>
</svg>
),
},
{
name: 'Better Auth',
icon: (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 51.657">
<path
className="fill-black dark:fill-white"
d="M0 25.83v22.84h15.33V33.5h15v15.17H61V3H30.33v15.17h-15V3H0zm80.11-14.89c-.06.07-.11 7.6-.11 16.75v16.64h7.23c10.6 0 12.86-.66 15.18-4.48 1.14-1.89 1.34-6.58.36-8.48-.8-1.54-3.19-3.87-3.97-3.87-.13 0-.6-.12-1.02-.27l-.78-.26 1.34-.68c2.7-1.36 3.75-3.17 3.74-6.46-.01-5.1-3-8.2-8.51-8.82-1.63-.2-13.28-.24-13.46-.07m28.72 16.64v16.75h20.67V40.5h-16.33v-11h15v-3.67h-15v-11h16.18l-.05-1.95-.05-1.96-10.2-.05-10.22-.04zm24.58-16.53c-.05.12-.07 1-.04 1.96l.05 1.74 5.29.04 5.29.05v29.49h4.17v-29.5h10.5v-4h-12.6c-10.25 0-12.6.04-12.66.22m28.53-.1c-.06.06-.1.96-.1 2v1.88h10.66v29.5h4.17v-29.5H187v-4h-12.47c-6.86 0-12.52.05-12.59.11m30.17 0c-.06.07-.11 7.6-.11 16.75v16.64h20.83V40.5H196.5v-11h15v-3.67h-15v-11h16v-4h-10.14c-5.58 0-10.19.05-10.25.11m26.56 16.64v16.75h4.16v-13h7.96l.22.55c.12.3.52 1.06.89 1.7.37.65.94 1.7 1.28 2.34a90 90 0 0 0 2.52 4.7c.08.1.56.97 1.04 1.91l.89 1.72 2.52.05c1.38.02 2.52 0 2.52-.04 0-.2-.58-1.26-.68-1.26-.06 0-.16-.2-.21-.46a6 6 0 0 0-.7-1.37c-.32-.5-.75-1.26-.95-1.67a34 34 0 0 0-1.16-2.1c-.44-.74-.8-1.4-.8-1.48 0-.07-.38-.75-.84-1.5-.46-.76-.83-1.45-.83-1.53s-.26-.58-.58-1.1c-.7-1.16-.7-1.1-.15-1.3 5.73-2.18 7.6-12.18 3.08-16.4l-.65-.64c-1.93-2.02-5.02-2.61-13.66-2.61h-5.87zm57.27-15.67c-.24.6-.44 1.2-.44 1.31s-.37 1.14-.83 2.26a20 20 0 0 0-.84 2.27c0 .12-.4 1.25-.91 2.5-.5 1.26-.92 2.39-.92 2.5s-.37 1.1-.82 2.2-.9 2.32-1.01 2.72-.53 1.54-.94 2.53c-.4 1-.73 1.91-.73 2.03 0 .13-.41 1.25-.92 2.5a27 27 0 0 0-.91 2.46c0 .1-.42 1.22-.92 2.5-.5 1.26-.92 2.4-.92 2.54 0 .13-.14.56-.33.96-.53 1.18-.58 1.14 1.9 1.14h2.23l.11-.45c.07-.25.25-.75.42-1.12s.47-1.2.68-1.84a105 105 0 0 1 1.94-5.3l.27-.62h13.06l.35.88c.2.48.63 1.7.97 2.7s.74 2.14.9 2.5c.17.37.47 1.25.68 1.96l.38 1.3h2.3c1.38 0 2.31-.07 2.31-.17 0-.09-.34-.99-.75-2a17 17 0 0 1-.75-2.08c0-.12-.37-1.15-.83-2.27a22 22 0 0 1-.84-2.26c0-.1-.4-1.2-.89-2.42a38 38 0 0 1-1-2.72 37 37 0 0 0-.95-2.54 20 20 0 0 1-.82-2.27c0-.13-.37-1.12-.8-2.21-.45-1.1-.9-2.32-1.03-2.73-.11-.42-.54-1.56-.94-2.55s-.74-1.89-.74-2-.45-1.33-.99-2.7l-.98-2.5-2.16-.05-2.16-.05zm20.96-.86c-.26.68.04 24.04.33 25.02a12.3 12.3 0 0 0 8.35 8.36c2.93.88 8.97.33 11.3-1.04a7 7 0 0 1 1.1-.57c.54 0 3.85-3.71 3.85-4.32 0-.15.11-.43.25-.62.96-1.37 1-2 1-14.97v-12h-4.33l-.08 11.91c-.1 12.97-.06 12.53-1.06 14.21-3.34 5.67-13.32 4.99-15.71-1.08l-.48-1.21-.09-11.92-.08-11.91-2.13-.05c-1.7-.04-2.14 0-2.22.19m31.27 1.77v2h10.33v29.5h4.5v-29.5h10.33v-4h-25.16zm30.16 14.75v16.75h4.34V29.5h17.5v14.83h4.16v-33.5h-4.16v15h-17.5v-15h-4.34zM95 15.3c3.37 1.28 4.08 5.96 1.29 8.48-.37.33-1.16.84-1.77 1.12l-1.1.53-4.55.05-4.54.05V14.81l4.88.07c4.43.06 4.96.1 5.79.41m138.25 0c2.71.88 4.2 3.66 3.73 6.99-.58 4.19-2.23 5.1-9.35 5.19l-4.8.05V14.81l4.63.06c4.26.05 4.72.08 5.79.43m45.92 2.8c0 .19.9 2.72 1.47 4.15.08.18.3.86.52 1.5.2.64.61 1.8.91 2.58a97 97 0 0 1 1.56 4.46c.06.16-1.04.21-5.13.21-4.14 0-5.17-.04-5.04-.2.1-.12.25-.55.34-.97.1-.4.51-1.63.94-2.72s.76-2.09.76-2.23c0-.13.1-.48.24-.77.4-.86 1.6-4.1 1.6-4.3 0-.18.53-1.62 1.04-2.84l.19-.44.3.67c.16.37.3.77.3.9m-233.5 7.73v7.5H30.5v-15h15.17zM246 27.67v1.83h15v-3.67h-15zM94.8 29.55c3.43 1.32 5.34 4.6 4.31 7.4-.24.65-.47.98-1.47 2.06-1.05 1.15-3 1.49-8.65 1.49h-4.66V29.14l4.88.06c4.05.06 5 .12 5.6.35m297.6 9.21c-2.61 1.37-2.13 5.38.71 5.84 2.46.39 4.1-1.69 3.38-4.28-.38-1.37-2.73-2.27-4.08-1.56"
></path>
</svg>
),
},
{
name: 'Framer',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="120"
height="44"
fill="none"
viewBox="0 0 120 44"
aria-hidden="true"
>
<path
fill="#000000"
d="M108.157 35.146q-2.47 0-4.435-.927-1.915-.928-3.074-2.49-1.11-1.61-1.109-3.71 0-2.733 1.814-4.442t5.191-2.343l5.897-1.171q1.763-.342 2.419-1.074.655-.732.655-2.148l.604 5.711-8.466 1.758q-1.713.34-2.671 1.22-.907.88-.907 2.44 0 1.611 1.26 2.588 1.31.975 3.527.976 1.815 0 3.327-.781 1.561-.78 2.419-2.148.907-1.416.907-3.222v-8.542q0-1.758-1.311-2.734-1.26-1.025-3.477-1.025-2.822 0-4.334 1.367t-1.764 3.856l-4.435-.585q.252-2.588 1.613-4.442 1.361-1.904 3.628-2.93 2.268-1.024 5.393-1.024 4.434 0 6.803 2.196T120 17.183v17.23h-4.384v-3.172q-.656 1.61-2.671 2.782-1.967 1.123-4.788 1.123M63.807 34.414V10.056h4.384v2.734q.504-1.416 2.218-2.441t3.98-1.025q2.22 0 4.083.927 1.865.928 2.419 2.783.655-1.71 2.42-2.685 1.813-1.025 4.03-1.025 3.831 0 5.847 2.148 2.016 2.147 2.016 6.248v16.694h-4.486V18.305q0-2.44-1.108-3.66-1.06-1.27-3.125-1.27-2.268 0-3.528 1.562-1.21 1.515-1.21 4.442v15.035h-4.484V18.305q0-2.44-1.11-3.66-1.057-1.27-3.124-1.27-2.268 0-3.528 1.562-1.21 1.515-1.21 4.442v15.035zM46.656 43.2q-4.687 0-7.61-2.099t-3.73-5.857l4.385-.928q.555 2.392 2.369 3.71 1.814 1.367 4.586 1.367 3.325 0 4.989-1.66 1.713-1.61 1.713-4.832v-3.857q-.755 1.805-2.822 2.93-2.016 1.122-4.535 1.122-3.327 0-5.846-1.464-2.52-1.515-3.931-4.198-1.411-2.685-1.411-6.2 0-3.563 1.41-6.248 1.412-2.685 3.881-4.149 2.52-1.513 5.897-1.513 2.52 0 4.586 1.122 2.115 1.074 2.872 2.685v-3.075h4.385V32.9q0 3.22-1.31 5.516-1.31 2.343-3.83 3.563-2.47 1.22-6.048 1.22m-.101-13.96q3.225 0 5.14-2.197 1.965-2.196 1.966-5.809 0-3.66-1.966-5.857t-5.14-2.197q-3.225 0-5.191 2.197-1.915 2.197-1.915 5.857 0 3.612 1.965 5.81 1.966 2.195 5.14 2.196M25.761 34.414V10.056h4.486v24.358zm-.05-27.482V0h4.586v6.932zM0 34.414V0h4.737v34.414zm.958-14.547v-4.149h19.301v4.15zm0-15.669V0h21.166v4.198z"
/>
</svg>
),
},
{
name: 'Vercel',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="2048"
height="407"
viewBox="0 0 2048 407"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M467.444 406.664L233.722 0.190918L0 406.664H467.444ZM703.186 388.161L898.51 18.668H814.024L679.286 287.007L544.547 18.668H460.061L655.385 388.161H703.186ZM2034.31 18.668V388.162H1964.37V18.668H2034.31ZM1644.98 250.25C1644.98 221.454 1650.99 196.127 1663.01 174.27C1675.03 152.412 1691.79 135.586 1713.28 123.79C1734.77 111.994 1759.91 106.095 1788.69 106.095C1814.19 106.095 1837.14 111.647 1857.54 122.749C1877.94 133.851 1894.15 150.331 1906.17 172.188C1918.19 194.046 1924.39 220.76 1924.75 252.332V268.465H1718.75C1720.2 291.363 1726.94 309.404 1738.96 322.588C1751.35 335.425 1767.93 341.843 1788.69 341.843C1801.8 341.843 1813.83 338.374 1824.75 331.435C1835.68 324.496 1843.88 315.129 1849.34 303.333L1920.93 308.537C1912.18 334.557 1895.79 355.374 1871.75 370.986C1847.7 386.599 1820.02 394.405 1788.69 394.405C1759.91 394.405 1734.77 388.507 1713.28 376.711C1691.79 364.915 1675.03 348.088 1663.01 326.231C1650.99 304.373 1644.98 279.047 1644.98 250.25ZM1852.62 224.23C1850.07 201.678 1842.97 185.199 1831.31 174.79C1819.65 164.035 1805.45 158.657 1788.69 158.657C1769.38 158.657 1753.72 164.382 1741.7 175.831C1729.67 187.28 1722.21 203.413 1719.29 224.23H1852.62ZM1526.96 174.79C1538.62 184.158 1545.9 197.168 1548.82 213.821L1620.94 210.178C1618.39 189.015 1610.93 170.627 1598.54 155.014C1586.15 139.402 1570.13 127.433 1550.45 119.106C1531.15 110.432 1509.84 106.095 1486.52 106.095C1457.74 106.095 1432.61 111.994 1411.11 123.79C1389.62 135.586 1372.86 152.412 1360.84 174.27C1348.82 196.127 1342.81 221.454 1342.81 250.25C1342.81 279.047 1348.82 304.373 1360.84 326.231C1372.86 348.088 1389.62 364.915 1411.11 376.711C1432.61 388.507 1457.74 394.405 1486.52 394.405C1510.56 394.405 1532.42 390.068 1552.09 381.395C1571.77 372.374 1587.79 359.711 1600.18 343.404C1612.57 327.098 1620.03 308.016 1622.58 286.159L1549.91 283.036C1547.36 301.424 1540.25 315.649 1528.6 325.71C1516.94 335.425 1502.91 340.282 1486.52 340.282C1463.94 340.282 1446.45 332.476 1434.06 316.863C1421.68 301.251 1415.49 279.047 1415.49 250.25C1415.49 221.454 1421.68 199.25 1434.06 183.637C1446.45 168.025 1463.94 160.219 1486.52 160.219C1502.19 160.219 1515.66 165.076 1526.96 174.79ZM1172.15 112.328H1237.24L1239.12 165.414C1243.74 150.388 1250.16 138.719 1258.39 130.407C1270.32 118.355 1286.96 112.328 1308.29 112.328H1334.87V169.148H1307.75C1292.56 169.148 1280.09 171.214 1270.32 175.346C1260.92 179.478 1253.69 186.021 1248.63 194.975C1243.93 203.928 1241.58 215.292 1241.58 229.066V388.161H1172.15V112.328ZM871.925 174.27C859.904 196.127 853.893 221.454 853.893 250.25C853.893 279.047 859.904 304.373 871.925 326.231C883.947 348.088 900.704 364.915 922.198 376.711C943.691 388.507 968.827 394.405 997.606 394.405C1028.93 394.405 1056.62 386.599 1080.66 370.986C1104.71 355.374 1121.1 334.557 1129.84 308.537L1058.26 303.333C1052.8 315.129 1044.6 324.496 1033.67 331.435C1022.74 338.374 1010.72 341.843 997.606 341.843C976.841 341.843 960.266 335.425 947.88 322.588C935.858 309.404 929.119 291.363 927.662 268.465H1133.67V252.332C1133.3 220.76 1127.11 194.046 1115.09 172.188C1103.07 150.331 1086.86 133.851 1066.46 122.749C1046.06 111.647 1023.11 106.095 997.606 106.095C968.827 106.095 943.691 111.994 922.198 123.79C900.704 135.586 883.947 152.412 871.925 174.27ZM1040.23 174.79C1051.88 185.199 1058.99 201.678 1061.54 224.23H928.208C931.123 203.413 938.591 187.28 950.612 175.831C962.634 164.382 978.298 158.657 997.606 158.657C1014.36 158.657 1028.57 164.035 1040.23 174.79Z"
fill="black"
/>
</svg>
),
},
{
name: 'OpenAI',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1604"
height="718"
viewBox="0 0 1604 718"
fill="none"
>
<g clipPath="url(#clip0_1637_2932)">
<path
d="M358.8 239.3C293.02 239.3 239.2 293.12 239.2 358.9C239.2 424.68 293.02 478.5 358.8 478.5C424.58 478.5 478.4 425.012 478.4 358.9C478.4 292.787 424.912 239.3 358.8 239.3ZM358.8 435.643C317.937 435.643 285.046 402.089 285.046 358.9C285.046 315.711 317.937 282.156 358.8 282.156C399.663 282.156 432.553 315.711 432.553 358.9C432.553 402.089 399.663 435.643 358.8 435.643Z"
fill="black"
/>
<path
d="M599.326 305.744C577.732 305.744 556.802 314.382 545.838 329V309.066H502.649V541.622H545.838V457.57C556.802 471.191 577.067 478.5 599.326 478.5C645.837 478.5 682.382 441.955 682.382 392.122C682.382 342.289 645.837 305.744 599.326 305.744ZM592.017 440.959C567.433 440.959 545.506 421.69 545.506 392.122C545.506 362.554 567.433 343.285 592.017 343.285C616.602 343.285 638.528 362.554 638.528 392.122C638.528 421.69 616.602 440.959 592.017 440.959Z"
fill="black"
/>
<path
d="M784.046 305.744C736.871 305.744 699.662 342.621 699.662 392.122C699.662 441.623 732.22 478.5 785.375 478.5C828.896 478.5 856.803 452.254 865.441 422.686H823.249C817.933 434.979 802.983 443.616 785.043 443.616C762.784 443.616 745.841 428.002 741.854 405.743H867.434V388.8C867.434 343.617 835.873 305.744 784.046 305.744ZM742.186 375.179C746.838 354.249 764.113 340.627 785.043 340.627C807.302 340.627 824.245 355.245 826.239 375.179H742.186Z"
fill="black"
/>
<path
d="M982.38 305.744C963.111 305.744 942.845 314.382 933.543 328.667V309.066H890.354V475.177H933.543V385.81C933.543 359.896 947.496 342.953 970.087 342.953C991.017 342.953 1002.31 358.9 1002.31 381.159V475.177H1045.5V374.182C1045.5 332.986 1020.25 305.744 982.38 305.744Z"
fill="black"
/>
<path
d="M1156.12 242.628L1062.1 475.184H1108.28L1128.21 424.354H1235.19L1255.12 475.184H1301.96L1208.61 242.628H1156.12ZM1143.16 385.816L1181.7 288.475L1219.9 385.816H1143.16Z"
fill="black"
/>
<path d="M1363.42 242.628H1319.57V475.184H1363.42V242.628Z" fill="black" />
</g>
<defs>
<clipPath id="clip0_1637_2932">
<rect width="1603.2" height="717.6" fill="white" transform="translate(0 0.0999756)" />
</clipPath>
</defs>
</svg>
),
},
{
name: 'GitHub',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="416"
height="95"
viewBox="0 0 416 95"
fill="none"
>
<g clipPath="url(#clip0_730_27128)">
<path
d="M41.6394 69.3848C29.0066 67.8535 20.1062 58.7617 20.1062 46.9902C20.1062 42.2051 21.8289 37.0371 24.7 33.5918C23.4558 30.4336 23.6472 23.7344 25.0828 20.959C28.9109 20.4805 34.0789 22.4902 37.1414 25.2656C40.7781 24.1172 44.6062 23.543 49.2957 23.543C53.9851 23.543 57.8132 24.1172 61.2585 25.1699C64.2253 22.4902 69.489 20.4805 73.3171 20.959C74.657 23.543 74.8484 30.2422 73.6042 33.4961C76.6667 37.1328 78.2937 42.0137 78.2937 46.9902C78.2937 58.7617 69.3933 67.6621 56.5691 69.2891C59.823 71.3945 62.0242 75.9883 62.0242 81.252L62.0242 91.2051C62.0242 94.0762 64.4167 95.7031 67.2878 94.5547C84.6101 87.9512 98.2 70.6289 98.2 49.1914C98.2 22.1074 76.1882 6.69539e-07 49.1042 4.309e-07C22.0203 1.92261e-07 0.199951 22.1074 0.199951 49.1914C0.199951 70.4375 13.6941 88.0469 31.8777 94.6504C34.4617 95.6074 36.95 93.8848 36.95 91.3008L36.95 83.6445C35.6101 84.2188 33.8875 84.6016 32.3562 84.6016C26.0398 84.6016 22.3074 81.1563 19.6277 74.7441C18.575 72.1602 17.4265 70.6289 15.2253 70.3418C14.0769 70.2461 13.6941 69.7676 13.6941 69.1934C13.6941 68.0449 15.6082 67.1836 17.5222 67.1836C20.2976 67.1836 22.6902 68.9063 25.1785 72.4473C27.0925 75.2227 29.1023 76.4668 31.4949 76.4668C33.8875 76.4668 35.4187 75.6055 37.6199 73.4043C39.2468 71.7773 40.491 70.3418 41.6394 69.3848Z"
fill="black"
/>
<g clipPath="url(#clip1_730_27128)">
<path
d="M188.937 83.0045L188.937 33.2827L202.915 33.2827L202.915 83.0045L188.937 83.0045ZM230.016 83.0045C220.727 83.0045 217.099 79.0232 217.099 70.6183L217.099 44.9611L208.252 44.9611L208.252 33.2827L217.099 33.2827L217.099 23.3737L231.078 20.1002L231.078 33.2827L241.429 33.2827L241.429 44.9611L231.078 44.9611L231.078 67.5217C231.078 70.2644 232.317 71.3261 235.059 71.3261L241.429 71.3261L241.429 83.0045L230.016 83.0045ZM327.47 83.8892C316.588 83.8892 310.66 77.8731 310.66 66.9024L310.66 33.2827L324.728 33.2827L324.728 63.1866C324.728 69.2912 327.47 72.6532 332.69 72.6532C338.706 72.6532 343.307 67.0794 343.307 59.4707L343.307 33.2827L357.374 33.2827L357.374 83.0045L343.307 83.0045L343.307 74.5996C340.653 79.9964 334.283 83.8892 327.47 83.8892ZM394.613 83.8892C387.832 83.8892 381.639 79.9964 378.687 74.4226L378.687 83.0045L364.709 83.0045L364.709 13.6417L378.776 13.6417L378.776 42.3954C381.639 36.3792 388.098 32.1325 394.613 32.1325C408.181 32.1325 415.348 41.5107 414.873 58.0551C415.348 74.4226 407.916 83.8892 394.613 83.8892ZM389.658 72.1223C396.945 72.1223 400.926 66.7255 400.452 58.0551C400.926 49.2963 396.945 43.8994 389.658 43.8994C383.851 43.8994 379.251 49.5617 378.776 57.3473L378.776 58.1436C379.251 66.1946 383.851 72.1223 389.658 72.1223ZM288.734 13.6417L288.734 41.7761L262.369 41.7761L262.369 13.6417L247.329 13.6417L247.329 83.0045L262.369 83.0045L262.369 55.224L288.734 55.224L288.734 83.0045L303.775 83.0045L303.775 13.6417L288.734 13.6417ZM150.628 84.3316C130.102 84.3316 117.185 70.2644 117.185 48.2346C117.185 26.2048 130.368 12.3146 151.247 12.3146C168.234 12.3146 178.497 19.5693 181.77 31.7786L166.553 35.406C164.695 28.7705 159.387 25.1431 151.247 25.1431C139.126 25.1431 132.579 33.1057 132.579 48.2346C132.579 63.3635 138.949 71.503 150.893 71.503C161.864 71.503 168.411 64.7791 168.411 53.366L168.411 50.7119L172.304 56.1087L149.655 56.1087L149.655 43.3686L183.628 43.3686L183.628 51.4196C183.628 72.5647 171.331 84.3316 150.628 84.3316ZM195.926 28.5936C200.615 28.5936 204.243 24.9662 204.243 20.2771C204.243 15.5881 200.615 11.9607 195.926 11.9607C191.237 11.9607 187.61 15.5881 187.61 20.2771C187.61 24.9662 191.237 28.5936 195.926 28.5936Z"
fill="black"
/>
</g>
</g>
<defs>
<clipPath id="clip0_730_27128">
<rect width="416" height="95" fill="white" />
</clipPath>
<clipPath id="clip1_730_27128">
<rect
width="298.068"
height="75.9408"
fill="white"
transform="translate(117.185 9.49258)"
/>
</clipPath>
</defs>
</svg>
),
},
{
name: 'Shopify',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 446.3 127.5"
>
<g>
<g>
<path
id="s_5_"
d="M154.4,70.9c-3.8-2.1-5.8-3.8-5.8-6.2c0-3.1,2.7-5,7-5c5,0,9.4,2.1,9.4,2.1l3.5-10.7c0,0-3.2-2.5-12.7-2.5 c-13.2,0-22.4,7.6-22.4,18.2c0,6,4.3,10.6,10,13.9c4.6,2.6,6.2,4.5,6.2,7.2c0,2.9-2.3,5.2-6.6,5.2c-6.4,0-12.4-3.3-12.4-3.3 l-3.7,10.7c0,0,5.6,3.7,14.9,3.7c13.6,0,23.3-6.7,23.3-18.7C165.3,78.9,160.3,74.3,154.4,70.9z"
/>
<path
id="h_5_"
d="M208.6,48.4c-6.7,0-11.9,3.2-16,8l-0.2-0.1l5.8-30.4H183l-14.7,77.3h15.1l5-26.4c2-10,7.1-16.1,11.9-16.1 c3.4,0,4.7,2.3,4.7,5.6c0,2.1-0.2,4.6-0.7,6.7l-5.7,30.3h15.1l5.9-31.2c0.7-3.3,1.1-7.2,1.1-9.9C220.9,53.5,216.5,48.4,208.6,48.4 z"
/>
<path
id="o_5_"
d="M255.1,48.4c-18.2,0-30.3,16.4-30.3,34.7c0,11.7,7.2,21.2,20.8,21.2c17.9,0,29.9-16,29.9-34.7 C275.6,58.7,269.3,48.4,255.1,48.4z M247.7,92.6c-5.2,0-7.3-4.4-7.3-9.9c0-8.7,4.5-22.8,12.7-22.8c5.4,0,7.1,4.6,7.1,9.1 C260.2,78.4,255.7,92.6,247.7,92.6z"
/>
<path
id="p_5_"
d="M314.3,48.4c-10.2,0-16,9-16,9h-0.2l0.9-8.1h-13.4c-0.7,5.5-1.9,13.8-3.1,20.1L272,124.6h15.1l4.2-22.4h0.3 c0,0,3.1,2,8.9,2c17.8,0,29.4-18.2,29.4-36.6C329.9,57.5,325.4,48.4,314.3,48.4z M299.9,92.9c-3.9,0-6.2-2.2-6.2-2.2l2.5-14.1 c1.8-9.4,6.7-15.7,11.9-15.7c4.6,0,6,4.3,6,8.3C314.1,78.9,308.3,92.9,299.9,92.9z"
/>
<path
id="dot_5_"
d="M351.5,26.7c-4.8,0-8.7,3.8-8.7,8.8c0,4.5,2.8,7.6,7.1,7.6h0.2c4.7,0,8.8-3.2,8.9-8.8 C359.1,29.8,356.1,26.7,351.5,26.7z"
/>
<polygon id="i_5_" points="330.3,103.2 345.5,103.2 355.8,49.6 340.5,49.6 " />
<path
id="f_5_"
d="M394.2,49.5h-10.5l0.5-2.5c0.9-5.2,3.9-9.8,9-9.8c2.7,0,4.8,0.8,4.8,0.8l3-11.8c0,0-2.6-1.3-8.2-1.3 c-5.4,0-10.7,1.5-14.8,5c-5.2,4.4-7.6,10.7-8.8,17.1l-0.4,2.5h-7l-2.2,11.4h7l-8,42.3h15.1l8-42.3h10.4L394.2,49.5z"
/>
<path
id="y_5_"
d="M430.6,49.6c0,0-9.5,23.8-13.7,36.8h-0.2c-0.3-4.2-3.7-36.8-3.7-36.8h-15.9l9.1,49.2c0.2,1.1,0.1,1.8-0.3,2.5 c-1.8,3.4-4.7,6.7-8.2,9.1c-2.8,2.1-6,3.4-8.5,4.3l4.2,12.8c3.1-0.7,9.4-3.2,14.8-8.2c6.9-6.5,13.3-16.4,19.8-30l18.5-39.7H430.6z "
/>
</g>
<g>
<path d="M74.8,14.8c0,0-1.4,0.4-3.7,1.1c-0.4-1.3-1-2.8-1.8-4.4c-2.6-5-6.5-7.7-11.1-7.7c0,0,0,0,0,0c-0.3,0-0.6,0-1,0.1 c-0.1-0.2-0.3-0.3-0.4-0.5c-2-2.2-4.6-3.2-7.7-3.1c-6,0.2-12,4.5-16.8,12.2c-3.4,5.4-6,12.2-6.7,17.5c-6.9,2.1-11.7,3.6-11.8,3.7 c-3.5,1.1-3.6,1.2-4,4.5c-0.3,2.5-9.5,72.9-9.5,72.9l75.6,13.1V14.7C75.3,14.7,75,14.8,74.8,14.8z M57.3,20.2 c-4,1.2-8.4,2.6-12.7,3.9c1.2-4.7,3.6-9.4,6.4-12.5c1.1-1.1,2.6-2.4,4.3-3.2C57,12,57.4,16.9,57.3,20.2z M49.1,4.4 c1.4,0,2.6,0.3,3.6,0.9c-1.6,0.8-3.2,2.1-4.7,3.6c-3.8,4.1-6.7,10.5-7.9,16.6c-3.6,1.1-7.2,2.2-10.5,3.2 C31.8,19.1,39.9,4.6,49.1,4.4z M37.5,59.4c0.4,6.4,17.3,7.8,18.3,22.9c0.7,11.9-6.3,20-16.4,20.6c-12.2,0.8-18.9-6.4-18.9-6.4 l2.6-11c0,0,6.7,5.1,12.1,4.7c3.5-0.2,4.8-3.1,4.7-5.1c-0.5-8.4-14.3-7.9-15.2-21.7C23.9,51.8,31.5,40.1,48.3,39 c6.5-0.4,9.8,1.2,9.8,1.2l-3.8,14.4c0,0-4.3-2-9.4-1.6C37.5,53.5,37.4,58.2,37.5,59.4z M61.3,19c0-3-0.4-7.3-1.8-10.9 c4.6,0.9,6.8,6,7.8,9.1C65.5,17.7,63.5,18.3,61.3,19z" />
<path d="M78.2,124l31.4-7.8c0,0-13.5-91.3-13.6-91.9c-0.1-0.6-0.6-1-1.1-1c-0.5,0-9.3-0.2-9.3-0.2s-5.4-5.2-7.4-7.2V124z" />
</g>
</g>
</svg>
),
},
{
name: 'sheekl',
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="400"
height="100"
viewBox="0 0 400 100"
fill="#222326"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.9266 16.3713c-.5283.5806-.4933 1.4714.0617 2.0265l68.5946 68.5946c.5551.555 1.4459.59 2.0265.0617 10.0579-9.1522 16.3713-22.3478 16.3713-37.0179C99.9807 22.402 77.5788 0 49.9445 0 35.2744 0 22.0788 6.31337 12.9266 16.3713ZM4.35334 29.3894c-.25348.5589-.12567 1.2142.30824 1.6481L68.9432 95.3191c.4339.4339 1.0892.5617 1.6481.3083 1.485-.6736 2.9312-1.4176 4.3344-2.2277.8341-.4815.9618-1.6195.2808-2.3005L8.88146 24.7742c-.68097-.681-1.81894-.5532-2.30045.2808-.81013 1.4032-1.55411 2.8494-2.22767 4.3344ZM.453579 47.796c-.300979-.301-.46112014-.7158-.4327856-1.1405.1327026-1.9891.3816396-3.9463.7400796-5.865.214926-1.1505 1.620727-1.5497 2.448307-.7222L59.9124 96.7715c.8275.8276.4283 2.2334-.7222 2.4483-1.9187.3585-3.8759.6074-5.865.7401-.4247.0283-.8395-.1318-1.1405-.4328L.453579 47.796ZM3.93331 61.7589c-1.0331-1.0331-2.70028-.1429-2.32193 1.2683C6.22104 80.2203 19.7604 93.7597 36.9535 98.3693c1.4112.3784 2.3014-1.2888 1.2683-2.3219L3.93331 61.7589ZM201.602 27.535c3.587 0 6.494-2.918 6.494-6.5175S205.189 14.5 201.602 14.5c-3.586 0-6.493 2.918-6.493 6.5175s2.907 6.5175 6.493 6.5175Zm-55.621 56.8396V14.5039h11.54v59.648h31.115v10.2227h-42.655Zm82.136-28.511v28.511h-11.166V34.8555h11.026v8.4876l.14-.0937c1.121-2.6573 2.928-4.8769 5.42-6.6589 2.491-1.8132 5.668-2.7198 9.531-2.7198 3.426 0 6.54.766 9.344 2.2978 2.803 1.5006 5.045 3.7045 6.727 6.6119 1.682 2.9074 2.523 6.4713 2.523 10.6916v30.9026h-11.166V55.0195c0-3.7514-.997-6.5963-2.99-8.5345-1.962-1.9695-4.594-2.9543-7.896-2.9543-2.118 0-4.049.4377-5.793 1.313-1.744.8754-3.13 2.2196-4.158 4.0328-1.028 1.8132-1.542 4.1422-1.542 6.9871Zm101.105 27.6669c2.554 1.0942 5.482 1.6413 8.783 1.6413 2.71 0 5.03-.3439 6.961-1.0317 1.932-.719 3.52-1.6725 4.766-2.8605 1.277-1.1879 2.289-2.4853 3.037-3.8921h.187v6.9871h10.699V50.2833c0-2.4072-.468-4.6111-1.402-6.6119-.934-2.0008-2.289-3.7358-4.065-5.2051-1.744-1.4694-3.862-2.5948-6.354-3.3763-2.491-.8129-5.295-1.2193-8.409-1.2193-4.267 0-7.958.7347-11.073 2.204-3.084 1.4381-5.497 3.3763-7.242 5.8148-1.744 2.4384-2.694 5.1895-2.85 8.2531h10.793c.124-1.438.623-2.7198 1.495-3.8452.872-1.1254 2.056-2.0008 3.551-2.626 1.495-.6565 3.223-.9848 5.186-.9848 1.962 0 3.628.3283 4.999.9848 1.401.6565 2.476 1.5475 3.223 2.6729.748 1.1254 1.122 2.4384 1.122 3.939v.3752c0 1.1254-.39 1.9538-1.168 2.4853-.748.5314-2.025.9222-3.831 1.1723-1.776.2501-4.205.5471-7.289.891-2.523.2813-4.952.7034-7.288 1.2661-2.336.5627-4.423 1.3912-6.261 2.4853-1.806 1.0942-3.239 2.5479-4.298 4.3611-1.059 1.8132-1.588 4.1422-1.588 6.987 0 3.2826.747 6.0336 2.242 8.2532 1.495 2.1884 3.52 3.8453 6.074 4.9707Zm18.081-8.3001c-1.807.9691-4.034 1.4537-6.681 1.4537-2.679 0-4.813-.5627-6.401-1.6881-1.589-1.1567-2.383-2.7355-2.383-4.7362 0-1.5631.436-2.8293 1.308-3.7984.904-.9691 2.087-1.735 3.551-2.2977 1.464-.5628 3.052-.9535 4.765-1.1724 1.246-.1875 2.461-.3751 3.645-.5627 1.183-.2188 2.289-.422 3.317-.6096 1.028-.2188 1.9-.4377 2.616-.6565.748-.2188 1.293-.4533 1.635-.7034v5.5334c0 1.9382-.451 3.7202-1.355 5.3458-.872 1.5944-2.211 2.8917-4.017 3.8921Zm26.094 9.1442V34.8555h10.745v8.1594h.141c.903-2.8136 2.32-4.955 4.251-6.4244 1.962-1.5005 4.532-2.2508 7.709-2.2508.779 0 1.48.0312 2.102.0938.655.0312 1.2.0625 1.636.0937v10.082c-.405-.0625-1.122-.1406-2.149-.2344-1.028-.0938-2.118-.1407-3.271-.1407-1.838 0-3.519.422-5.046 1.2661-1.526.8441-2.741 2.1415-3.644 3.8921-.872 1.7195-1.308 3.8922-1.308 6.5182v28.4641h-11.166Zm-177.401 0V34.8555h11.166v49.5191h-11.166Zm84.238-2.204c3.582 2.2196 7.834 3.3294 12.755 3.3294 3.8 0 7.257-.6878 10.372-2.0633 3.146-1.4068 5.762-3.3294 7.849-5.7678 2.087-2.4697 3.442-5.3146 4.065-8.5346h-10.512c-.468 1.4693-1.231 2.7667-2.29 3.8921-1.027 1.0942-2.32 1.9539-3.877 2.5792-1.558.6252-3.364.9378-5.42.9378-2.772 0-5.155-.6252-7.148-1.8757-1.962-1.2505-3.457-2.9855-4.485-5.2051-.933-2.043-1.443-4.3564-1.529-6.9402h35.915v-3.0012c0-3.8139-.561-7.284-1.682-10.4102-1.121-3.1575-2.71-5.8773-4.766-8.1594-2.055-2.3134-4.531-4.0953-7.428-5.3458-2.866-1.2505-6.058-1.8757-9.578-1.8757-4.578 0-8.627 1.1098-12.147 3.3294-3.52 2.2196-6.276 5.2833-8.27 9.191-1.993 3.9078-2.99 8.3782-2.99 13.4114 0 5.0019.966 9.4568 2.897 13.3645 1.931 3.8765 4.688 6.9246 8.269 9.1442Zm23.501-32.7783c-1.028-2.1258-2.492-3.767-4.392-4.9237-1.9-1.1567-4.142-1.7351-6.728-1.7351-2.554 0-4.781.5784-6.681 1.7351-1.868 1.1567-3.332 2.7979-4.391 4.9237-.756 1.5396-1.234 3.2903-1.434 5.2521h25.059c-.2-1.9618-.678-3.7125-1.433-5.2521Z"
/>
</svg>
),
},
]
const springConfig = {
stiffness: 220,
damping: 28,
mass: 0.7,
}
function seededRandom(index: number, offset = 0) {
const value = Math.sin((index + 1) * 999 + offset) * 10000
return value - Math.floor(value)
}
function randomBetween(index: number, min: number, max: number, offset = 0) {
return min + seededRandom(index, offset) * (max - min)
}
export default function LogoCloudFour() {
const shouldReduceMotion = Boolean(useReducedMotion())
return (
<section className="bg-background py-24">
<div className="mx-auto w-full max-w-6xl px-6">
<div className="mx-auto mb-12 max-w-2xl text-center">
<h2 className="text-3xl font-semibold tracking-tight text-balance text-zinc-950 sm:text-4xl dark:text-white">
Built with the tools teams already trust
</h2>
<p className="mt-3 text-sm leading-6 text-balance text-zinc-600 sm:text-base dark:text-zinc-400">
From design and code to auth, deployment, and AI, these are the platforms behind
fast-moving product teams.
</p>
</div>
<div className="relative isolate">
<div role="list" className="relative z-10 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
{companies.map((company, index) => (
<LogoCell
key={company.name}
company={company}
index={index}
shouldReduceMotion={shouldReduceMotion}
/>
))}
</div>
</div>
</div>
</section>
)
}
function LogoCell({
company,
index,
shouldReduceMotion,
}: {
company: Company
index: number
shouldReduceMotion: boolean
}) {
const cellRef = useRef<HTMLDivElement>(null)
const mouseX = useMotionValue(0)
const mouseY = useMotionValue(0)
const glowOpacity = useMotionValue(0)
const smoothX = useSpring(mouseX, springConfig)
const smoothY = useSpring(mouseY, springConfig)
const smoothOpacity = useSpring(glowOpacity, springConfig)
const blinkDuration = randomBetween(index, 5.5, 10, 1)
const blinkDelay = randomBetween(index, 0, 3.8, 2)
const softCardGlow = useMotionTemplate`
radial-gradient(
220px circle at ${smoothX}px ${smoothY}px,
rgb(var(--glow-card) / 0.10),
rgb(var(--glow-card) / 0.04) 34%,
transparent 70%
)
`
const borderGlow = useMotionTemplate`
radial-gradient(
180px circle at ${smoothX}px ${smoothY}px,
rgb(var(--glow-border) / 0.9),
rgb(var(--glow-border) / 0.45) 38%,
transparent 72%
)
`
function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {
const hasFinePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches
if (shouldReduceMotion || !hasFinePointer) return
const rect = cellRef.current?.getBoundingClientRect()
if (!rect) return
mouseX.set(event.clientX - rect.left)
mouseY.set(event.clientY - rect.top)
}
function handlePointerEnter(event: React.PointerEvent<HTMLDivElement>) {
if (shouldReduceMotion) return
handlePointerMove(event)
glowOpacity.set(1)
}
function handlePointerLeave() {
glowOpacity.set(0)
}
return (
<div
ref={cellRef}
role="listitem"
aria-label={company.name}
onPointerMove={handlePointerMove}
onPointerEnter={handlePointerEnter}
onPointerLeave={handlePointerLeave}
className="group/cell relative flex min-h-32 items-center justify-center overflow-visible px-8 py-10 [--glow-border:190_242_100] [--glow-card:163_230_53]"
>
{/* soft background glow */}
<motion.div
aria-hidden="true"
className="pointer-events-none absolute inset-px z-0"
style={{
background: softCardGlow,
opacity: smoothOpacity,
}}
/>
<FadedCellLines />
{/* stronger cursor border glow */}
<motion.div
aria-hidden="true"
className="pointer-events-none absolute inset-0 z-20 rounded-none p-px"
style={{
background: borderGlow,
opacity: smoothOpacity,
WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
WebkitMaskComposite: 'xor',
maskComposite: 'exclude',
}}
/>
<CornerDots index={index} shouldReduceMotion={shouldReduceMotion} />
<motion.div
className={cn(
'relative z-10 flex items-center justify-center text-zinc-950/90 transition-transform duration-300 group-hover/cell:scale-103 dark:text-white/90',
'motion-reduce:transition-none motion-reduce:group-hover/cell:scale-100',
'[&_svg]:h-8 [&_svg]:w-auto [&_svg]:max-w-32',
'[&_svg_*]:fill-current',
)}
animate={
shouldReduceMotion
? undefined
: {
opacity: [1, 1, 0.35, 1, 0.55, 1, 1],
filter: [
'grayscale(1) brightness(0.9)',
'grayscale(1) brightness(0.9)',
'grayscale(1) brightness(1.45)',
'grayscale(1) brightness(0.85)',
'grayscale(1) brightness(1.25)',
'grayscale(1) brightness(0.95)',
'grayscale(1) brightness(0.9)',
],
}
}
transition={{
duration: blinkDuration,
delay: blinkDelay,
repeat: Number.POSITIVE_INFINITY,
ease: 'easeInOut',
times: [0, 0.7, 0.73, 0.76, 0.8, 0.84, 1],
}}
>
{company.icon}
</motion.div>
</div>
)
}
function FadedCellLines() {
return (
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-10">
<span className="absolute top-0 left-0 h-px w-full bg-linear-to-r from-transparent via-zinc-300/75 to-transparent transition duration-300 group-hover/cell:via-lime-300/95 group-hover/cell:shadow-[0_0_18px_rgb(190_242_100/0.85)] dark:via-white/15" />
<span className="absolute bottom-0 left-0 h-px w-full bg-linear-to-r from-transparent via-zinc-300/75 to-transparent transition duration-300 group-hover/cell:via-lime-300/95 group-hover/cell:shadow-[0_0_18px_rgb(190_242_100/0.85)] dark:via-white/15" />
<span className="absolute top-0 left-0 h-full w-px bg-linear-to-b from-transparent via-zinc-300/75 to-transparent transition duration-300 group-hover/cell:via-lime-300/95 group-hover/cell:shadow-[0_0_18px_rgb(190_242_100/0.85)] dark:via-white/15" />
<span className="absolute top-0 right-0 h-full w-px bg-linear-to-b from-transparent via-zinc-300/75 to-transparent transition duration-300 group-hover/cell:via-lime-300/95 group-hover/cell:shadow-[0_0_18px_rgb(190_242_100/0.85)] dark:via-white/15" />
</div>
)
}
function CornerDots({ index, shouldReduceMotion }: { index: number; shouldReduceMotion: boolean }) {
const duration = randomBetween(index, 2.5, 4.8, 3)
const delay = randomBetween(index, 0, 2.2, 4)
const dots = ['left-0 top-0', 'right-0 top-0', 'bottom-0 left-0', 'bottom-0 right-0']
return (
<>
{dots.map((position, dotIndex) => (
<motion.span
key={position}
aria-hidden="true"
className={cn(
'pointer-events-none absolute z-30 size-1 rounded-full bg-zinc-400/70 transition duration-300 group-hover/cell:bg-lime-300 group-hover/cell:shadow-[0_0_14px_rgb(190_242_100/0.95)] dark:bg-white/35',
position.includes('left') && '-translate-x-1/2',
position.includes('right') && 'translate-x-1/2',
position.includes('top') && '-translate-y-1/2',
position.includes('bottom') && 'translate-y-1/2',
position,
)}
animate={
shouldReduceMotion
? undefined
: {
opacity: [0.15, 0.95, 0.25, 0.7, 0.15],
scale: [1, 1.2, 0.9, 1.08, 1],
}
}
transition={{
duration,
delay: delay + dotIndex * 0.2,
repeat: Number.POSITIVE_INFINITY,
ease: 'easeInOut',
}}
/>
))}
</>
)
}
