You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

295 lines
18 KiB

"use client";
export function AnimatedCopilotOrb() {
return (
<svg
width="1612"
height="865"
viewBox="-168.508 -11 1612 865"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-full h-full object-contain object-center select-none pointer-events-none"
>
{/* Ambient Background Glow */}
<g className="animate-ambient-glow">
<g filter="url(#filter0_f_1429_12168)">
<path fillRule="evenodd" clipRule="evenodd" d="M514.081 250.023C537.054 249.41 557.255 261.359 575.225 275.656C596.248 292.382 622.942 309.842 622.992 336.673C623.042 363.518 599.132 385.181 575.452 397.917C556.713 407.995 535.335 394.075 514.081 395.246C490.12 396.567 466.052 417.498 445.534 405.078C423.572 391.784 415.174 362.218 417.315 336.673C419.331 312.637 438.128 294.94 456.118 278.831C472.819 263.876 491.65 250.62 514.081 250.023Z" fill="url(#paint0_linear_1429_12168)"/>
</g>
<g filter="url(#filter1_f_1429_12168)">
<path fillRule="evenodd" clipRule="evenodd" d="M824.081 405.023C847.054 404.41 867.255 416.359 885.225 430.656C906.248 447.382 932.942 464.842 932.992 491.673C933.042 518.518 909.132 540.181 885.452 552.917C866.713 562.995 845.335 549.075 824.081 550.246C800.12 551.567 776.052 572.498 755.534 560.078C733.572 546.784 725.174 517.218 727.315 491.673C729.331 467.637 748.128 449.94 766.118 433.831C782.819 418.876 801.65 405.62 824.081 405.023Z" fill="url(#paint1_linear_1429_12168)"/>
</g>
<g filter="url(#filter2_f_1429_12168)">
<path fillRule="evenodd" clipRule="evenodd" d="M568.61 456.023C591.471 455.41 611.575 467.359 629.457 481.656C650.378 498.382 676.943 515.842 676.992 542.673C677.042 569.518 653.248 591.181 629.682 603.917C611.035 613.995 589.761 600.075 568.61 601.246C544.765 602.567 520.814 623.498 500.396 611.078C478.54 597.784 470.183 568.218 472.314 542.673C474.319 518.637 493.026 500.94 510.928 484.831C527.548 469.876 546.288 456.62 568.61 456.023Z" fill="url(#paint2_linear_1429_12168)"/>
</g>
</g>
{/* Main Orb Color-Morphing Entity */}
<g className="animate-orb-color-cycle">
{/* Core Sphere (Base Glow & Dark Volume) */}
<g className="animate-sphere-pulse" style={{ transformOrigin: "637.492px 421.5px" }}>
<g filter="url(#filter3_f_1429_12168)" style={{ mixBlendMode: "screen" }}>
<circle cx="637.492" cy="421.5" r="218.5" fill="url(#paint3_linear_1429_12168)"/>
</g>
<g filter="url(#filter4_iii_1429_12168)">
<circle cx="637.492" cy="421.5" r="218.5" fill="#03070D"/>
</g>
</g>
{/* Orbiting Energy Ring (Ellipse 760) */}
<g
className="animate-orbit-ring"
style={{ transformOrigin: "637.492px 421.5px" }}
>
<g filter="url(#filter5_d_1429_12168)" style={{ mixBlendMode: "plus-lighter" }}>
<path d="M409.521 398.102C418.386 343.271 447.011 289.756 488.325 252.374C529.628 215.002 583.571 193.786 643.129 203.414C702.738 213.051 761.779 252.583 803.709 303.489C845.648 354.406 870.311 416.506 861.474 471.168C852.633 525.851 815.522 570.727 765.614 599.536C715.707 628.345 653.088 641.032 593.414 631.384C474.061 612.089 391.822 507.581 409.521 398.102Z" stroke="url(#paint4_linear_1429_12168)" strokeWidth="2" shapeRendering="crispEdges"/>
</g>
</g>
{/* Masked Spherical Interior */}
<mask id="mask0_1429_12168" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="418" y="203" width="438" height="437">
<circle cx="637.492" cy="421.5" r="218.5" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_1429_12168)">
{/* Liquid Internal Glow Blob */}
<g className="animate-blob-drift" style={{ transformOrigin: "637.492px 421.5px" }}>
<g filter="url(#filter6_fn_1429_12168)" style={{ mixBlendMode: "plus-lighter" }}>
<circle cx="753.203" cy="514.742" r="218.5" fill="url(#paint5_linear_1429_12168)"/>
</g>
</g>
{/* Central 4-Pointed Star with Refracting Spotlight */}
<g className="animate-star-glow" style={{ transformOrigin: "636.929px 420.938px" }}>
<g filter="url(#filter7_f_1429_12168)">
<mask id="mask1_1429_12168" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="530" y="314" width="214" height="214">
<path d="M636.929 314.216C650.189 380.791 676.69 407.551 743.652 420.938C676.674 434.325 650.173 461.085 636.929 527.661C623.67 461.085 597.169 434.309 530.207 420.938C597.184 407.551 623.686 380.791 636.929 314.216Z" fill="white"/>
</mask>
<g mask="url(#mask1_1429_12168)">
<path d="M743.652 314.216H530.207V527.661H743.652V314.216Z" fill="white"/>
<g className="animate-star-spotlight">
<g filter="url(#filter8_f_1429_12168)">
<path d="M757.524 387.854H629.457V538.333H757.524V387.854Z" fill="#0066FF"/>
</g>
</g>
</g>
</g>
</g>
{/* Radiating Flare Energy Waves */}
<g className="animate-energy-waves" style={{ transformOrigin: "671.757px 545.636px" }}>
<g style={{ mixBlendMode: "screen" }}>
<g filter="url(#filter9_f_1429_12168)">
<path d="M275.199 1129.8L1068.31 1129.8V455.766C1068.31 455.766 923.117 545.635 671.757 545.636C420.397 545.638 275.199 455.763 275.199 455.763V1129.8Z" fill="#0029B2"/>
</g>
<g filter="url(#filter10_f_1429_12168)">
<path d="M275.199 1073.63L1068.31 1073.63V511.936C1068.31 511.936 921.465 601.806 671.757 601.806C422.05 601.806 275.199 511.933 275.199 511.933V1073.63Z" fill="#3D6FE5"/>
</g>
<g filter="url(#filter11_f_1429_12168)">
<path d="M275.199 1017.46L1068.31 1017.46V568.105C1068.31 568.105 921.465 657.975 671.757 657.975C422.05 657.975 275.199 568.103 275.199 568.103V1017.46Z" fill="#4B80FF"/>
</g>
<g filter="url(#filter12_f_1429_12168)" style={{ mixBlendMode: "plus-lighter" }}>
<path d="M275.199 961.289L1068.31 961.29V624.274C1068.31 624.274 920.845 714.145 671.757 714.145C422.669 714.145 275.199 624.272 275.199 624.272V961.289Z" fill="#2D4D99"/>
</g>
<g filter="url(#filter13_f_1429_12168)">
<path d="M275.199 905.12L1068.31 905.121V680.443C1068.31 680.443 921.465 770.314 671.757 770.314C422.05 770.314 275.199 680.442 275.199 680.442V905.12Z" fill="white"/>
</g>
</g>
</g>
{/* Twin Contour Rings */}
<g
className="animate-contour-rings"
style={{ transformOrigin: "637.492px 421.5px" }}
>
<g opacity="0.5" style={{ mixBlendMode: "screen" }}>
<path d="M634.122 207.12C692.119 207.12 745.705 221.614 784.78 255.26C823.836 288.889 848.502 341.743 848.502 418.691C848.502 495.632 822.976 548.487 783.484 582.12C743.972 615.771 690.384 630.263 634.122 630.263C521.756 630.263 419.742 535.398 419.742 418.691C419.742 301.978 518.302 207.12 634.122 207.12Z" stroke="url(#paint6_linear_1429_12168)" strokeWidth="1.5"/>
</g>
<g opacity="0.5" style={{ mixBlendMode: "screen" }}>
<path d="M640.864 211.614C698.861 211.614 752.447 226.107 791.522 259.753C830.578 293.383 855.244 346.236 855.244 423.185C855.244 500.126 829.718 552.981 790.227 586.614C750.715 620.265 697.126 634.756 640.864 634.756C528.498 634.756 426.484 539.891 426.484 423.185C426.484 306.471 525.044 211.614 640.864 211.614Z" stroke="url(#paint7_linear_1429_12168)" strokeWidth="1.5"/>
</g>
</g>
</g>
</g>
{/* SVG Filters & Linear Gradients */}
<defs>
<filter id="filter0_f_1429_12168" x="166.992" y="0" width="706" height="659" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter1_f_1429_12168" x="476.992" y="155" width="706" height="659" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter2_f_1429_12168" x="221.992" y="206" width="705" height="659" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter3_f_1429_12168" x="318.992" y="103" width="637" height="637" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter4_iii_1429_12168" x="418.992" y="203" width="437" height="441" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="50"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.195532 0 0 0 0 0.697115 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1429_12168"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="16"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.1875 0 0 0 0 0.572368 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_1429_12168" result="effect2_innerShadow_1429_12168"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0"/>
<feBlend mode="plus-lighter" in2="effect2_innerShadow_1429_12168" result="effect3_innerShadow_1429_12168"/>
</filter>
<filter id="filter5_d_1429_12168" x="396.225" y="188.201" width="477.937" height="455.275" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="4.95"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.301961 0 0 0 0 0.890196 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1429_12168"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1429_12168" result="shape"/>
</filter>
<filter id="filter6_fn_1429_12168" x="386.703" y="148.242" width="733" height="733" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="74" result="effect1_foregroundBlur_1429_12168"/>
<feTurbulence type="fractalNoise" baseFrequency="0.20000000298023224 0.20000000298023224" stitchTiles="stitch" numOctaves="3" result="noise" seed="5948" />
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/>
</feComponentTransfer>
<feComposite operator="in" in2="effect1_foregroundBlur_1429_12168" in="coloredNoise1" result="noise1Clipped" />
<feComponentTransfer in="alphaNoise" result="coloredNoise2">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/>
</feComponentTransfer>
<feComposite operator="in" in2="effect1_foregroundBlur_1429_12168" in="coloredNoise2" result="noise2Clipped" />
<feFlood floodColor="#ADD1FF" result="color1Flood" />
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
<feFlood floodColor="rgba(255, 255, 255, 0)" result="color2Flood" />
<feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" />
<feMerge result="effect2_noise_1429_12168">
<feMergeNode in="effect1_foregroundBlur_1429_12168" />
<feMergeNode in="color1" />
<feMergeNode in="color2" />
</feMerge>
</filter>
<filter id="filter7_f_1429_12168" x="520.207" y="304.216" width="233.445" height="233.445" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter8_f_1429_12168" x="504.457" y="262.854" width="378.066" height="400.479" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="62.5" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter9_f_1429_12168" x="75.1992" y="255.763" width="1193.12" height="1074.04" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter10_f_1429_12168" x="115.199" y="351.933" width="1113.12" height="881.697" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter11_f_1429_12168" x="155.199" y="448.103" width="1033.12" height="689.357" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter12_f_1429_12168" x="155.199" y="504.272" width="1033.12" height="577.018" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<filter id="filter13_f_1429_12168" x="155.199" y="560.442" width="1033.12" height="464.679" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1429_12168"/>
</filter>
<linearGradient id="paint0_linear_1429_12168" x1="395.077" y1="250" x2="653.061" y2="262.422" gradientUnits="userSpaceOnUse">
<stop stopColor="#7641E0"/>
<stop offset="1" stopColor="#3E47FD"/>
</linearGradient>
<linearGradient id="paint1_linear_1429_12168" x1="705.077" y1="405" x2="963.061" y2="417.422" gradientUnits="userSpaceOnUse">
<stop stopColor="#4143E0"/>
<stop offset="1" stopColor="#3E47FD"/>
</linearGradient>
<linearGradient id="paint2_linear_1429_12168" x1="450.184" y1="456" x2="706.92" y2="468.302" gradientUnits="userSpaceOnUse">
<stop stopColor="#A229CA"/>
<stop offset="1" stopColor="#3E47FD"/>
</linearGradient>
<linearGradient id="paint3_linear_1429_12168" x1="637.492" y1="203" x2="637.492" y2="772.661" gradientUnits="userSpaceOnUse">
<stop stopColor="#0029B3"/>
<stop offset="0.1" stopColor="#0038BF"/>
<stop offset="0.2" stopColor="#0E4ACC"/>
<stop offset="0.3" stopColor="#255CD9"/>
<stop offset="0.4" stopColor="#3D6FE6"/>
<stop offset="0.5" stopColor="#487EFF"/>
<stop offset="0.65" stopColor="#4B80FF"/>
<stop offset="0.8" stopColor="#5D8BFF"/>
<stop offset="1" stopColor="#ADBFFF"/>
</linearGradient>
<linearGradient id="paint4_linear_1429_12168" x1="410.811" y1="383.86" x2="1002.54" y2="479.523" gradientUnits="userSpaceOnUse">
<stop stopColor="#D3DDFF"/>
<stop offset="0.1" stopColor="#0038BF"/>
<stop offset="0.2" stopColor="#ADBFFF"/>
<stop offset="0.3" stopColor="#255CD9"/>
<stop offset="0.4" stopColor="#3D6FE6"/>
<stop offset="0.5" stopColor="#D4DEFF"/>
<stop offset="0.65" stopColor="#4B80FF"/>
<stop offset="0.8" stopColor="#5D8BFF"/>
<stop offset="1" stopColor="#ADBFFF"/>
</linearGradient>
<linearGradient id="paint5_linear_1429_12168" x1="753.203" y1="296.242" x2="753.203" y2="865.902" gradientUnits="userSpaceOnUse">
<stop stopColor="#0029B3"/>
<stop offset="0.1" stopColor="#0038BF"/>
<stop offset="0.2" stopColor="#0E4ACC"/>
<stop offset="0.3" stopColor="#255CD9"/>
<stop offset="0.4" stopColor="#3D6FE6"/>
<stop offset="0.5" stopColor="#487EFF"/>
<stop offset="0.65" stopColor="#4B80FF"/>
<stop offset="0.8" stopColor="#5D8BFF"/>
<stop offset="1" stopColor="#ADBFFF"/>
</linearGradient>
<linearGradient id="paint6_linear_1429_12168" x1="634.122" y1="206.37" x2="634.122" y2="759.922" gradientUnits="userSpaceOnUse">
<stop stopColor="#0029B3"/>
<stop offset="0.1" stopColor="#0038BF"/>
<stop offset="0.2" stopColor="#0E4ACC"/>
<stop offset="0.3" stopColor="#255CD9"/>
<stop offset="0.4" stopColor="#3D6FE6"/>
<stop offset="0.5" stopColor="#487EFF"/>
<stop offset="0.65" stopColor="#4B80FF"/>
<stop offset="0.8" stopColor="#5D8BFF"/>
<stop offset="1" stopColor="#ADBFFF"/>
</linearGradient>
<linearGradient id="paint7_linear_1429_12168" x1="640.864" y1="210.864" x2="640.864" y2="764.416" gradientUnits="userSpaceOnUse">
<stop stopColor="#0029B3"/>
<stop offset="0.1" stopColor="#0038BF"/>
<stop offset="0.2" stopColor="#0E4ACC"/>
<stop offset="0.3" stopColor="#255CD9"/>
<stop offset="0.4" stopColor="#3D6FE6"/>
<stop offset="0.5" stopColor="#487EFF"/>
<stop offset="0.65" stopColor="#4B80FF"/>
<stop offset="0.8" stopColor="#5D8BFF"/>
<stop offset="1" stopColor="#ADBFFF"/>
</linearGradient>
</defs>
</svg>
);
}