See https://brm.us/antigravity for details
Created
December 7, 2025 12:53
-
-
Save anon987654321/dbda0fe660db0e981c4cc597c7096878 to your computer and use it in GitHub Desktop.
Google Antigravity with Modern CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Rework of https://antigravity.google/ using modern CSS --> | |
| <!-- See https://brm.us/antigravity for details --> | |
| <div class="header-wrapper"> | |
| <header> | |
| <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 869 113" height="21" width="161.49"><g clip-path="url(#clip0_6001_463)"><path d="M839.836 109.037C839.654 109.462 839.442 109.918 839.199 110.403C838.956 110.949 838.805 111.283 838.744 111.405H830.732C831.096 110.616 831.491 109.735 831.916 108.764C832.341 107.854 832.856 106.731 833.463 105.396C833.828 104.607 834.161 103.878 834.465 103.211C834.768 102.543 835.102 101.784 835.466 100.935C835.891 100.146 836.377 99.1443 836.923 97.9304L841.111 88.8262L821.901 45.3083H830.277L844.844 79.8131H845.026L859.046 45.3083H867.422L843.387 100.753C843.144 101.299 842.75 102.149 842.203 103.302C841.718 104.516 841.232 105.669 840.747 106.761C840.322 107.915 840.018 108.673 839.836 109.037Z" fill="#202124"></path><path d="M792.471 52.3186V45.3084H800.665V32.1984H808.403V45.3084H819.784V52.3186H808.403V77.6282C808.403 80.238 808.919 82.1802 809.951 83.4548C811.044 84.6687 812.652 85.2757 814.776 85.2757C815.748 85.2757 816.658 85.1543 817.508 84.9115C818.357 84.608 819.177 84.2135 819.966 83.7279V91.2844C818.995 91.6486 817.993 91.9217 816.961 92.1038C815.93 92.3466 814.807 92.4679 813.593 92.4679C809.708 92.4679 806.583 91.3148 804.216 89.0084C801.848 86.6413 800.665 83.4852 800.665 79.54V52.3186H792.471Z" fill="#202124"></path><path d="M778.634 91.7396V45.3083H786.373V91.7396H778.634ZM782.458 36.7504C780.941 36.7504 779.636 36.2042 778.543 35.1117C777.451 34.0192 776.905 32.7142 776.905 31.1969C776.905 29.6188 777.451 28.3139 778.543 27.2821C779.636 26.1896 780.941 25.6433 782.458 25.6433C784.036 25.6433 785.341 26.1896 786.373 27.2821C787.465 28.3139 788.012 29.6188 788.012 31.1969C788.012 32.7142 787.465 34.0192 786.373 35.1117C785.341 36.2042 784.036 36.7504 782.458 36.7504Z" fill="#202124"></path><path d="M747.697 91.7395L728.943 45.3083H737.227L751.612 82.6354H751.794L766.361 45.3083H774.463L755.527 91.7395H747.697Z" fill="#202124"></path><path d="M704.033 93.1963C700.574 93.1963 697.539 92.5286 694.929 91.1934C692.319 89.8581 690.256 88.0373 688.738 85.7309C687.282 83.3638 686.553 80.6932 686.553 77.7192C686.553 74.3203 687.434 71.4677 689.194 69.1613C690.954 66.7942 693.321 65.0341 696.295 63.8809C699.269 62.667 702.546 62.06 706.127 62.06C708.191 62.06 710.103 62.2421 711.863 62.6063C713.623 62.9098 715.141 63.3043 716.415 63.7898C717.75 64.2147 718.752 64.6395 719.419 65.0644V62.2421C719.419 58.7218 718.175 55.9299 715.687 53.8663C713.198 51.8027 710.164 50.7709 706.583 50.7709C704.033 50.7709 701.636 51.3475 699.39 52.5007C697.205 53.5932 695.476 55.1409 694.201 57.1438L688.374 52.7738C689.588 50.9529 691.106 49.3749 692.926 48.0396C694.747 46.7043 696.811 45.6725 699.117 44.9442C701.484 44.2159 703.973 43.8517 706.583 43.8517C712.895 43.8517 717.841 45.5208 721.422 48.859C725.003 52.1972 726.794 56.6886 726.794 62.3332V91.7396H719.419V85.0936H719.055C718.266 86.4289 717.143 87.7338 715.687 89.0084C714.23 90.2223 712.5 91.2237 710.497 92.0127C708.555 92.8018 706.401 93.1963 704.033 93.1963ZM704.762 86.3682C707.432 86.3682 709.86 85.7005 712.045 84.3652C714.291 83.03 716.081 81.2395 717.417 78.9938C718.752 76.7481 719.419 74.29 719.419 71.6194C718.024 70.6483 716.263 69.8593 714.139 69.2523C712.075 68.6454 709.799 68.3419 707.311 68.3419C702.88 68.3419 699.633 69.2523 697.57 71.0732C695.506 72.894 694.474 75.1397 694.474 77.8102C694.474 80.3594 695.445 82.423 697.387 84.0011C699.33 85.5791 701.788 86.3682 704.762 86.3682Z" fill="#202124"></path><path d="M658.47 91.7395V45.3083H665.844V52.7737H666.209C666.815 51.0136 667.817 49.4962 669.213 48.2216C670.67 46.8863 672.308 45.8545 674.129 45.1262C676.011 44.3372 677.862 43.9427 679.683 43.9427C681.079 43.9427 682.171 44.0337 682.96 44.2158C683.749 44.3372 684.478 44.5496 685.145 44.8531V53.2289C684.174 52.7434 683.112 52.3792 681.959 52.1364C680.866 51.8936 679.743 51.7722 678.59 51.7722C676.344 51.7722 674.281 52.4095 672.399 53.6841C670.518 54.9587 669 56.6582 667.847 58.7825C666.755 60.9068 666.209 63.2435 666.209 65.7927V91.7395H658.47Z" fill="#202124"></path><path d="M626.539 112.861C622.594 112.861 619.195 112.194 616.343 110.858C613.551 109.584 611.275 107.945 609.514 105.942C607.815 103.939 606.601 101.906 605.873 99.8423L612.974 96.838C613.945 99.3871 615.584 101.511 617.89 103.211C620.257 104.971 623.14 105.851 626.539 105.851C631.395 105.851 635.127 104.425 637.737 101.572C640.347 98.7802 641.652 94.8654 641.652 89.8277V84.6384H641.288C639.831 86.8841 637.737 88.7959 635.006 90.374C632.275 91.8914 629.088 92.65 625.447 92.65C621.441 92.65 617.769 91.6182 614.431 89.5546C611.153 87.491 608.543 84.6384 606.601 80.9967C604.659 77.2943 603.688 73.0457 603.688 68.2509C603.688 63.456 604.659 59.2377 606.601 55.5961C608.543 51.8937 611.153 49.0107 614.431 46.9471C617.769 44.8835 621.441 43.8517 625.447 43.8517C629.088 43.8517 632.275 44.6407 635.006 46.2188C637.737 47.7361 639.831 49.648 641.288 51.9544H641.652V45.3084H649.027V89.9188C649.027 95.0778 648.025 99.3568 646.022 102.756C644.08 106.155 641.409 108.673 638.01 110.312C634.672 112.012 630.849 112.861 626.539 112.861ZM626.539 85.6398C629.27 85.6398 631.789 84.9722 634.096 83.6369C636.402 82.2409 638.223 80.238 639.558 77.6282C640.954 75.0183 641.652 71.8925 641.652 68.2509C641.652 64.4878 640.954 61.3317 639.558 58.7825C638.223 56.1727 636.402 54.2001 634.096 52.8648C631.789 51.5295 629.27 50.8619 626.539 50.8619C623.808 50.8619 621.289 51.5599 618.983 52.9559C616.676 54.2911 614.825 56.2637 613.429 58.8736C612.033 61.4227 611.335 64.5485 611.335 68.2509C611.335 71.9532 612.033 75.1093 613.429 77.7192C614.825 80.2684 616.676 82.2409 618.983 83.6369C621.289 84.9722 623.808 85.6398 626.539 85.6398Z" fill="#202124"></path><path d="M588.94 91.7396V45.3083H596.679V91.7396H588.94ZM592.764 36.7504C591.247 36.7504 589.942 36.2042 588.849 35.1117C587.757 34.0192 587.211 32.7142 587.211 31.1969C587.211 29.6188 587.757 28.3139 588.849 27.2821C589.942 26.1896 591.247 25.6433 592.764 25.6433C594.342 25.6433 595.647 26.1896 596.679 27.2821C597.772 28.3139 598.318 29.6188 598.318 31.1969C598.318 32.7142 597.772 34.0192 596.679 35.1117C595.647 36.2042 594.342 36.7504 592.764 36.7504Z" fill="#202124"></path><path d="M554.23 52.3186V45.3084H562.424V32.1984H570.162V45.3084H581.542V52.3186H570.162V77.6282C570.162 80.238 570.678 82.1802 571.71 83.4548C572.802 84.6687 574.411 85.2757 576.535 85.2757C577.506 85.2757 578.417 85.1543 579.266 84.9115C580.116 84.608 580.936 84.2135 581.725 83.7279V91.2844C580.753 91.6486 579.752 91.9217 578.72 92.1038C577.688 92.3466 576.566 92.4679 575.352 92.4679C571.467 92.4679 568.341 91.3148 565.974 89.0084C563.607 86.6413 562.424 83.4852 562.424 79.54V52.3186H554.23Z" fill="#202124"></path><path d="M509.898 91.7396V45.3084H517.272V52.1365H517.636C518.85 49.8908 520.823 47.9486 523.554 46.3098C526.346 44.6711 529.381 43.8517 532.658 43.8517C538.364 43.8517 542.643 45.5208 545.495 48.859C548.409 52.1365 549.865 56.5065 549.865 61.969V91.7396H542.127V63.1525C542.127 58.6611 541.034 55.505 538.849 53.6842C536.725 51.8027 533.963 50.8619 530.564 50.8619C528.015 50.8619 525.77 51.5902 523.827 53.0469C521.885 54.4429 520.368 56.2637 519.275 58.5094C518.183 60.7551 517.636 63.1222 517.636 65.6107V91.7396H509.898Z" fill="#202124"></path><path d="M446.449 91.7396L471.212 26.5538H479.952L504.716 91.7396H496.249L489.603 73.8044H461.562L454.916 91.7396H446.449ZM486.963 66.5211L478.314 43.0323L475.764 36.0221H475.4L472.851 43.0323L464.202 66.5211H486.963Z" fill="#202124"></path><path d="M169.742 93.2042C149.435 93.2042 132.375 76.6583 132.375 56.3521C132.375 36.0458 149.435 19.5 169.742 19.5C180.973 19.5 188.959 23.9036 194.976 29.6531L187.881 36.7484C183.566 32.701 177.728 29.5542 169.742 29.5542C154.928 29.5542 143.34 41.5083 143.34 56.3422C143.34 71.176 154.928 83.1203 169.742 83.1203C179.351 83.1203 184.833 79.2609 188.336 75.7479C191.206 72.8682 193.096 68.7417 193.818 63.0714H169.484V53.0073H203.605C203.961 54.8083 204.14 56.9656 204.14 59.301C204.14 66.8516 202.071 76.2031 195.431 82.8531C188.969 89.5922 180.706 93.1844 169.742 93.1844V93.2042Z" fill="#202124"></path><path d="M255.242 69.474C255.242 83.1401 244.564 93.2042 231.472 93.2042C218.38 93.2042 207.702 83.1401 207.702 69.474C207.702 55.8078 218.38 45.7438 231.472 45.7438C244.564 45.7438 255.242 55.7188 255.242 69.474ZM244.831 69.474C244.831 60.9339 238.637 55.0953 231.462 55.0953C224.288 55.0953 218.093 60.9339 218.093 69.474C218.093 78.0141 224.288 83.8526 231.462 83.8526C238.637 83.8526 244.831 77.925 244.831 69.474Z" fill="#202124"></path><path d="M306.987 69.474C306.987 83.1401 296.309 93.2042 283.217 93.2042C270.125 93.2042 259.447 83.1401 259.447 69.474C259.447 55.8078 270.125 45.7438 283.217 45.7438C296.309 45.7438 306.987 55.7188 306.987 69.474ZM296.576 69.474C296.576 60.9339 290.382 55.0953 283.207 55.0953C276.033 55.0953 269.838 60.9339 269.838 69.474C269.838 78.0141 276.033 83.8526 283.207 83.8526C290.382 83.8526 296.576 77.925 296.576 69.474Z" fill="#202124"></path><path d="M356.486 47.1787V89.7802C356.486 107.306 346.155 114.5 333.943 114.5C322.444 114.5 315.527 106.771 312.924 100.478L321.999 96.7073C323.612 100.577 327.57 105.158 333.943 105.158C341.761 105.158 346.61 100.309 346.61 91.225V87.811H346.254C343.918 90.6906 339.425 93.2042 333.765 93.2042C321.91 93.2042 311.044 82.8729 311.044 69.563C311.044 56.2531 321.91 45.7438 333.765 45.7438C339.425 45.7438 343.918 48.2573 346.254 51.0479H346.61V47.1787H356.486ZM347.322 69.563C347.322 61.2011 341.751 55.0953 334.656 55.0953C327.56 55.0953 321.455 61.211 321.455 69.563C321.455 77.9151 327.471 83.8526 334.656 83.8526C341.84 83.8526 347.322 77.8261 347.322 69.563Z" fill="#202124"></path><path d="M374.397 22.0136V91.7594H363.977V22.0136H374.397Z" fill="#202124"></path><path d="M414.782 77.2917L422.867 82.6849C420.265 86.5542 413.971 93.2042 403.105 93.2042C389.637 93.2042 379.573 82.774 379.573 69.474C379.573 55.3625 389.726 45.7438 401.938 45.7438C414.149 45.7438 420.255 55.5406 422.234 60.8448L423.313 63.5365L391.606 76.6583C394.031 81.4182 397.801 83.8526 403.105 83.8526C408.409 83.8526 412.091 81.25 414.782 77.2917ZM389.904 68.7516L411.101 59.9443C409.933 56.9755 406.43 54.9073 402.304 54.9073C397.009 54.9073 389.637 59.5781 389.914 68.7516H389.904Z" fill="#202124"></path><path d="M89.6992 93.695C94.3659 97.195 101.366 94.8617 94.9492 88.445C75.6992 69.7783 79.7825 18.445 55.8659 18.445C31.9492 18.445 36.0325 69.7783 16.7825 88.445C9.78251 95.445 17.3658 97.195 22.0325 93.695C40.1159 81.445 38.9492 59.8617 55.8659 59.8617C72.7825 59.8617 71.6159 81.445 89.6992 93.695Z" fill="#3186FF"></path><mask id="mask0_6001_463" maskUnits="userSpaceOnUse" x="13" y="18" width="85" height="78" style="mask-type: alpha;"><path d="M89.6992 93.695C94.3659 97.195 101.366 94.8617 94.9492 88.445C75.6992 69.7783 79.7825 18.445 55.8659 18.445C31.9492 18.445 36.0325 69.7783 16.7825 88.445C9.78251 95.445 17.3658 97.195 22.0325 93.695C40.1159 81.445 38.9492 59.8617 55.8659 59.8617C72.7825 59.8617 71.6159 81.445 89.6992 93.695Z" fill="black"></path></mask><g mask="url(#mask0_6001_463)"><g filter="url(#filter0_f_6001_463)"><ellipse cx="22.7873" cy="26.8098" rx="22.7873" ry="26.8098" transform="matrix(-0.112784 0.99362 -0.99362 -0.112781 66.2473 -15.5344)" fill="#FFE432"></ellipse></g><g filter="url(#filter1_f_6001_463)"><ellipse cx="96.491" cy="35.1231" rx="29.5007" ry="30.1492" transform="rotate(76.9243 96.491 35.1231)" fill="#FC413D"></ellipse></g><g filter="url(#filter2_f_6001_463)"><ellipse cx="9.02988" cy="41.6647" rx="30.832" ry="39.9417" transform="rotate(74.1257 9.02988 41.6647)" fill="#00B95C"></ellipse></g><g filter="url(#filter3_f_6001_463)"><ellipse cx="9.02988" cy="41.6647" rx="30.832" ry="39.9417" transform="rotate(74.1257 9.02988 41.6647)" fill="#00B95C"></ellipse></g><g filter="url(#filter4_f_6001_463)"><ellipse cx="11.2212" cy="42.8915" rx="30.22" ry="33.2695" transform="rotate(45.6065 11.2212 42.8915)" fill="#00B95C"></ellipse></g><g filter="url(#filter5_f_6001_463)"><ellipse cx="75.7546" cy="104.822" rx="29.0177" ry="27.943" transform="rotate(76.9243 75.7546 104.822)" fill="#3186FF"></ellipse></g><g filter="url(#filter6_f_6001_463)"><ellipse cx="33.5661" cy="35.4043" rx="33.5661" ry="35.4043" transform="matrix(-0.409539 0.912293 -0.912294 -0.409537 101.25 -15.1674)" fill="#FBBC04"></ellipse></g><g filter="url(#filter7_f_6001_463)"><path d="M2.56802 149.695C-15.8116 142.48 15.5987 83.1163 23.4093 63.2203C31.22 43.3244 52.4514 33.0447 70.831 40.26C89.2107 47.4753 110.996 87.2162 103.185 107.112C95.3742 127.008 20.9477 156.91 2.56802 149.695Z" fill="#3186FF"></path></g><g filter="url(#filter8_f_6001_463)"><path d="M113.934 75.8079C109.013 81.5509 96.1724 78.6224 85.253 69.2667C74.3335 59.911 69.4704 47.6711 74.391 41.928C79.3116 36.185 92.1525 39.1136 103.072 48.4692C113.991 57.8249 118.855 70.0648 113.934 75.8079Z" fill="#749BFF"></path></g><g filter="url(#filter9_f_6001_463)"><ellipse cx="92.611" cy="23.7962" rx="44.2411" ry="27.5016" transform="rotate(34.0763 92.611 23.7962)" fill="#FC413D"></ellipse></g><g filter="url(#filter10_f_6001_463)"><ellipse cx="23.4949" cy="29.5887" rx="23.7071" ry="13.7869" transform="rotate(112.516 23.4949 29.5887)" fill="#FFEE48"></ellipse></g></g></g><defs><filter id="filter0_f_6001_463" x="2.49348" y="-26.5423" width="69.0899" height="61.2525" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="3.89034" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter1_f_6001_463" x="28.7524" y="-32.0333" width="135.477" height="134.313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="18.8078" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter2_f_6001_463" x="-62.2884" y="-21.9253" width="142.637" height="127.18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.9884" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter3_f_6001_463" x="-62.2884" y="-21.9253" width="142.637" height="127.18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.9884" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter4_f_6001_463" x="-52.5697" y="-20.8346" width="127.582" height="127.452" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.9884" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter5_f_6001_463" x="17.3619" y="45.4646" width="116.786" height="118.715" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.1937" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter6_f_6001_463" x="-7.44765" y="-60.4737" width="125.303" height="122.858" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="13.7698" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter7_f_6001_463" x="-27.7086" y="13.3597" width="157.119" height="162.029" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="12.297" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter8_f_6001_463" x="50.4638" y="16.981" width="87.3973" height="83.7738" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="11.0036" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter9_f_6001_463" x="34.2604" y="-28.457" width="116.701" height="104.506" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="9.29385" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter10_f_6001_463" x="-15.1522" y="-15.9493" width="77.2941" height="91.076" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="11.5027" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><clipPath id="clip0_6001_463"><rect width="869" height="113" fill="white"></rect></clipPath></defs></svg> | |
| <!-- Small Screen: Toggle --> | |
| <input class="menu-checkbox" type="checkbox" id="menu-checkbox" /> | |
| <label class="menu-button" for="menu-checkbox"> | |
| <span class="material-symbols-outlined not-sr-only" data-show-when="closed">dehaze</span> | |
| <span class="material-symbols-outlined not-sr-only" data-show-when="open">close</span> | |
| <span class="sr-only">Toggle Menu</span> | |
| </label> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Product</a></li> | |
| <li><a href="#">Use Cases</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Resources</a></li> | |
| </ul> | |
| </nav> | |
| <button><span>Download</span> <span class="material-symbols-outlined">download</span></button> | |
| </header> | |
| </div> | |
| <section id="welcome" class="center"> | |
| <h1> | |
| <span class="sr-only">Google Antigravity</span> | |
| <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 869 113" height="21" width="161.49"><g clip-path="url(#clip0_6001_463)"><path d="M839.836 109.037C839.654 109.462 839.442 109.918 839.199 110.403C838.956 110.949 838.805 111.283 838.744 111.405H830.732C831.096 110.616 831.491 109.735 831.916 108.764C832.341 107.854 832.856 106.731 833.463 105.396C833.828 104.607 834.161 103.878 834.465 103.211C834.768 102.543 835.102 101.784 835.466 100.935C835.891 100.146 836.377 99.1443 836.923 97.9304L841.111 88.8262L821.901 45.3083H830.277L844.844 79.8131H845.026L859.046 45.3083H867.422L843.387 100.753C843.144 101.299 842.75 102.149 842.203 103.302C841.718 104.516 841.232 105.669 840.747 106.761C840.322 107.915 840.018 108.673 839.836 109.037Z" fill="#202124"></path><path d="M792.471 52.3186V45.3084H800.665V32.1984H808.403V45.3084H819.784V52.3186H808.403V77.6282C808.403 80.238 808.919 82.1802 809.951 83.4548C811.044 84.6687 812.652 85.2757 814.776 85.2757C815.748 85.2757 816.658 85.1543 817.508 84.9115C818.357 84.608 819.177 84.2135 819.966 83.7279V91.2844C818.995 91.6486 817.993 91.9217 816.961 92.1038C815.93 92.3466 814.807 92.4679 813.593 92.4679C809.708 92.4679 806.583 91.3148 804.216 89.0084C801.848 86.6413 800.665 83.4852 800.665 79.54V52.3186H792.471Z" fill="#202124"></path><path d="M778.634 91.7396V45.3083H786.373V91.7396H778.634ZM782.458 36.7504C780.941 36.7504 779.636 36.2042 778.543 35.1117C777.451 34.0192 776.905 32.7142 776.905 31.1969C776.905 29.6188 777.451 28.3139 778.543 27.2821C779.636 26.1896 780.941 25.6433 782.458 25.6433C784.036 25.6433 785.341 26.1896 786.373 27.2821C787.465 28.3139 788.012 29.6188 788.012 31.1969C788.012 32.7142 787.465 34.0192 786.373 35.1117C785.341 36.2042 784.036 36.7504 782.458 36.7504Z" fill="#202124"></path><path d="M747.697 91.7395L728.943 45.3083H737.227L751.612 82.6354H751.794L766.361 45.3083H774.463L755.527 91.7395H747.697Z" fill="#202124"></path><path d="M704.033 93.1963C700.574 93.1963 697.539 92.5286 694.929 91.1934C692.319 89.8581 690.256 88.0373 688.738 85.7309C687.282 83.3638 686.553 80.6932 686.553 77.7192C686.553 74.3203 687.434 71.4677 689.194 69.1613C690.954 66.7942 693.321 65.0341 696.295 63.8809C699.269 62.667 702.546 62.06 706.127 62.06C708.191 62.06 710.103 62.2421 711.863 62.6063C713.623 62.9098 715.141 63.3043 716.415 63.7898C717.75 64.2147 718.752 64.6395 719.419 65.0644V62.2421C719.419 58.7218 718.175 55.9299 715.687 53.8663C713.198 51.8027 710.164 50.7709 706.583 50.7709C704.033 50.7709 701.636 51.3475 699.39 52.5007C697.205 53.5932 695.476 55.1409 694.201 57.1438L688.374 52.7738C689.588 50.9529 691.106 49.3749 692.926 48.0396C694.747 46.7043 696.811 45.6725 699.117 44.9442C701.484 44.2159 703.973 43.8517 706.583 43.8517C712.895 43.8517 717.841 45.5208 721.422 48.859C725.003 52.1972 726.794 56.6886 726.794 62.3332V91.7396H719.419V85.0936H719.055C718.266 86.4289 717.143 87.7338 715.687 89.0084C714.23 90.2223 712.5 91.2237 710.497 92.0127C708.555 92.8018 706.401 93.1963 704.033 93.1963ZM704.762 86.3682C707.432 86.3682 709.86 85.7005 712.045 84.3652C714.291 83.03 716.081 81.2395 717.417 78.9938C718.752 76.7481 719.419 74.29 719.419 71.6194C718.024 70.6483 716.263 69.8593 714.139 69.2523C712.075 68.6454 709.799 68.3419 707.311 68.3419C702.88 68.3419 699.633 69.2523 697.57 71.0732C695.506 72.894 694.474 75.1397 694.474 77.8102C694.474 80.3594 695.445 82.423 697.387 84.0011C699.33 85.5791 701.788 86.3682 704.762 86.3682Z" fill="#202124"></path><path d="M658.47 91.7395V45.3083H665.844V52.7737H666.209C666.815 51.0136 667.817 49.4962 669.213 48.2216C670.67 46.8863 672.308 45.8545 674.129 45.1262C676.011 44.3372 677.862 43.9427 679.683 43.9427C681.079 43.9427 682.171 44.0337 682.96 44.2158C683.749 44.3372 684.478 44.5496 685.145 44.8531V53.2289C684.174 52.7434 683.112 52.3792 681.959 52.1364C680.866 51.8936 679.743 51.7722 678.59 51.7722C676.344 51.7722 674.281 52.4095 672.399 53.6841C670.518 54.9587 669 56.6582 667.847 58.7825C666.755 60.9068 666.209 63.2435 666.209 65.7927V91.7395H658.47Z" fill="#202124"></path><path d="M626.539 112.861C622.594 112.861 619.195 112.194 616.343 110.858C613.551 109.584 611.275 107.945 609.514 105.942C607.815 103.939 606.601 101.906 605.873 99.8423L612.974 96.838C613.945 99.3871 615.584 101.511 617.89 103.211C620.257 104.971 623.14 105.851 626.539 105.851C631.395 105.851 635.127 104.425 637.737 101.572C640.347 98.7802 641.652 94.8654 641.652 89.8277V84.6384H641.288C639.831 86.8841 637.737 88.7959 635.006 90.374C632.275 91.8914 629.088 92.65 625.447 92.65C621.441 92.65 617.769 91.6182 614.431 89.5546C611.153 87.491 608.543 84.6384 606.601 80.9967C604.659 77.2943 603.688 73.0457 603.688 68.2509C603.688 63.456 604.659 59.2377 606.601 55.5961C608.543 51.8937 611.153 49.0107 614.431 46.9471C617.769 44.8835 621.441 43.8517 625.447 43.8517C629.088 43.8517 632.275 44.6407 635.006 46.2188C637.737 47.7361 639.831 49.648 641.288 51.9544H641.652V45.3084H649.027V89.9188C649.027 95.0778 648.025 99.3568 646.022 102.756C644.08 106.155 641.409 108.673 638.01 110.312C634.672 112.012 630.849 112.861 626.539 112.861ZM626.539 85.6398C629.27 85.6398 631.789 84.9722 634.096 83.6369C636.402 82.2409 638.223 80.238 639.558 77.6282C640.954 75.0183 641.652 71.8925 641.652 68.2509C641.652 64.4878 640.954 61.3317 639.558 58.7825C638.223 56.1727 636.402 54.2001 634.096 52.8648C631.789 51.5295 629.27 50.8619 626.539 50.8619C623.808 50.8619 621.289 51.5599 618.983 52.9559C616.676 54.2911 614.825 56.2637 613.429 58.8736C612.033 61.4227 611.335 64.5485 611.335 68.2509C611.335 71.9532 612.033 75.1093 613.429 77.7192C614.825 80.2684 616.676 82.2409 618.983 83.6369C621.289 84.9722 623.808 85.6398 626.539 85.6398Z" fill="#202124"></path><path d="M588.94 91.7396V45.3083H596.679V91.7396H588.94ZM592.764 36.7504C591.247 36.7504 589.942 36.2042 588.849 35.1117C587.757 34.0192 587.211 32.7142 587.211 31.1969C587.211 29.6188 587.757 28.3139 588.849 27.2821C589.942 26.1896 591.247 25.6433 592.764 25.6433C594.342 25.6433 595.647 26.1896 596.679 27.2821C597.772 28.3139 598.318 29.6188 598.318 31.1969C598.318 32.7142 597.772 34.0192 596.679 35.1117C595.647 36.2042 594.342 36.7504 592.764 36.7504Z" fill="#202124"></path><path d="M554.23 52.3186V45.3084H562.424V32.1984H570.162V45.3084H581.542V52.3186H570.162V77.6282C570.162 80.238 570.678 82.1802 571.71 83.4548C572.802 84.6687 574.411 85.2757 576.535 85.2757C577.506 85.2757 578.417 85.1543 579.266 84.9115C580.116 84.608 580.936 84.2135 581.725 83.7279V91.2844C580.753 91.6486 579.752 91.9217 578.72 92.1038C577.688 92.3466 576.566 92.4679 575.352 92.4679C571.467 92.4679 568.341 91.3148 565.974 89.0084C563.607 86.6413 562.424 83.4852 562.424 79.54V52.3186H554.23Z" fill="#202124"></path><path d="M509.898 91.7396V45.3084H517.272V52.1365H517.636C518.85 49.8908 520.823 47.9486 523.554 46.3098C526.346 44.6711 529.381 43.8517 532.658 43.8517C538.364 43.8517 542.643 45.5208 545.495 48.859C548.409 52.1365 549.865 56.5065 549.865 61.969V91.7396H542.127V63.1525C542.127 58.6611 541.034 55.505 538.849 53.6842C536.725 51.8027 533.963 50.8619 530.564 50.8619C528.015 50.8619 525.77 51.5902 523.827 53.0469C521.885 54.4429 520.368 56.2637 519.275 58.5094C518.183 60.7551 517.636 63.1222 517.636 65.6107V91.7396H509.898Z" fill="#202124"></path><path d="M446.449 91.7396L471.212 26.5538H479.952L504.716 91.7396H496.249L489.603 73.8044H461.562L454.916 91.7396H446.449ZM486.963 66.5211L478.314 43.0323L475.764 36.0221H475.4L472.851 43.0323L464.202 66.5211H486.963Z" fill="#202124"></path><path d="M169.742 93.2042C149.435 93.2042 132.375 76.6583 132.375 56.3521C132.375 36.0458 149.435 19.5 169.742 19.5C180.973 19.5 188.959 23.9036 194.976 29.6531L187.881 36.7484C183.566 32.701 177.728 29.5542 169.742 29.5542C154.928 29.5542 143.34 41.5083 143.34 56.3422C143.34 71.176 154.928 83.1203 169.742 83.1203C179.351 83.1203 184.833 79.2609 188.336 75.7479C191.206 72.8682 193.096 68.7417 193.818 63.0714H169.484V53.0073H203.605C203.961 54.8083 204.14 56.9656 204.14 59.301C204.14 66.8516 202.071 76.2031 195.431 82.8531C188.969 89.5922 180.706 93.1844 169.742 93.1844V93.2042Z" fill="#202124"></path><path d="M255.242 69.474C255.242 83.1401 244.564 93.2042 231.472 93.2042C218.38 93.2042 207.702 83.1401 207.702 69.474C207.702 55.8078 218.38 45.7438 231.472 45.7438C244.564 45.7438 255.242 55.7188 255.242 69.474ZM244.831 69.474C244.831 60.9339 238.637 55.0953 231.462 55.0953C224.288 55.0953 218.093 60.9339 218.093 69.474C218.093 78.0141 224.288 83.8526 231.462 83.8526C238.637 83.8526 244.831 77.925 244.831 69.474Z" fill="#202124"></path><path d="M306.987 69.474C306.987 83.1401 296.309 93.2042 283.217 93.2042C270.125 93.2042 259.447 83.1401 259.447 69.474C259.447 55.8078 270.125 45.7438 283.217 45.7438C296.309 45.7438 306.987 55.7188 306.987 69.474ZM296.576 69.474C296.576 60.9339 290.382 55.0953 283.207 55.0953C276.033 55.0953 269.838 60.9339 269.838 69.474C269.838 78.0141 276.033 83.8526 283.207 83.8526C290.382 83.8526 296.576 77.925 296.576 69.474Z" fill="#202124"></path><path d="M356.486 47.1787V89.7802C356.486 107.306 346.155 114.5 333.943 114.5C322.444 114.5 315.527 106.771 312.924 100.478L321.999 96.7073C323.612 100.577 327.57 105.158 333.943 105.158C341.761 105.158 346.61 100.309 346.61 91.225V87.811H346.254C343.918 90.6906 339.425 93.2042 333.765 93.2042C321.91 93.2042 311.044 82.8729 311.044 69.563C311.044 56.2531 321.91 45.7438 333.765 45.7438C339.425 45.7438 343.918 48.2573 346.254 51.0479H346.61V47.1787H356.486ZM347.322 69.563C347.322 61.2011 341.751 55.0953 334.656 55.0953C327.56 55.0953 321.455 61.211 321.455 69.563C321.455 77.9151 327.471 83.8526 334.656 83.8526C341.84 83.8526 347.322 77.8261 347.322 69.563Z" fill="#202124"></path><path d="M374.397 22.0136V91.7594H363.977V22.0136H374.397Z" fill="#202124"></path><path d="M414.782 77.2917L422.867 82.6849C420.265 86.5542 413.971 93.2042 403.105 93.2042C389.637 93.2042 379.573 82.774 379.573 69.474C379.573 55.3625 389.726 45.7438 401.938 45.7438C414.149 45.7438 420.255 55.5406 422.234 60.8448L423.313 63.5365L391.606 76.6583C394.031 81.4182 397.801 83.8526 403.105 83.8526C408.409 83.8526 412.091 81.25 414.782 77.2917ZM389.904 68.7516L411.101 59.9443C409.933 56.9755 406.43 54.9073 402.304 54.9073C397.009 54.9073 389.637 59.5781 389.914 68.7516H389.904Z" fill="#202124"></path><path d="M89.6992 93.695C94.3659 97.195 101.366 94.8617 94.9492 88.445C75.6992 69.7783 79.7825 18.445 55.8659 18.445C31.9492 18.445 36.0325 69.7783 16.7825 88.445C9.78251 95.445 17.3658 97.195 22.0325 93.695C40.1159 81.445 38.9492 59.8617 55.8659 59.8617C72.7825 59.8617 71.6159 81.445 89.6992 93.695Z" fill="#3186FF"></path><mask id="mask0_6001_463" maskUnits="userSpaceOnUse" x="13" y="18" width="85" height="78" style="mask-type: alpha;"><path d="M89.6992 93.695C94.3659 97.195 101.366 94.8617 94.9492 88.445C75.6992 69.7783 79.7825 18.445 55.8659 18.445C31.9492 18.445 36.0325 69.7783 16.7825 88.445C9.78251 95.445 17.3658 97.195 22.0325 93.695C40.1159 81.445 38.9492 59.8617 55.8659 59.8617C72.7825 59.8617 71.6159 81.445 89.6992 93.695Z" fill="black"></path></mask><g mask="url(#mask0_6001_463)"><g filter="url(#filter0_f_6001_463)"><ellipse cx="22.7873" cy="26.8098" rx="22.7873" ry="26.8098" transform="matrix(-0.112784 0.99362 -0.99362 -0.112781 66.2473 -15.5344)" fill="#FFE432"></ellipse></g><g filter="url(#filter1_f_6001_463)"><ellipse cx="96.491" cy="35.1231" rx="29.5007" ry="30.1492" transform="rotate(76.9243 96.491 35.1231)" fill="#FC413D"></ellipse></g><g filter="url(#filter2_f_6001_463)"><ellipse cx="9.02988" cy="41.6647" rx="30.832" ry="39.9417" transform="rotate(74.1257 9.02988 41.6647)" fill="#00B95C"></ellipse></g><g filter="url(#filter3_f_6001_463)"><ellipse cx="9.02988" cy="41.6647" rx="30.832" ry="39.9417" transform="rotate(74.1257 9.02988 41.6647)" fill="#00B95C"></ellipse></g><g filter="url(#filter4_f_6001_463)"><ellipse cx="11.2212" cy="42.8915" rx="30.22" ry="33.2695" transform="rotate(45.6065 11.2212 42.8915)" fill="#00B95C"></ellipse></g><g filter="url(#filter5_f_6001_463)"><ellipse cx="75.7546" cy="104.822" rx="29.0177" ry="27.943" transform="rotate(76.9243 75.7546 104.822)" fill="#3186FF"></ellipse></g><g filter="url(#filter6_f_6001_463)"><ellipse cx="33.5661" cy="35.4043" rx="33.5661" ry="35.4043" transform="matrix(-0.409539 0.912293 -0.912294 -0.409537 101.25 -15.1674)" fill="#FBBC04"></ellipse></g><g filter="url(#filter7_f_6001_463)"><path d="M2.56802 149.695C-15.8116 142.48 15.5987 83.1163 23.4093 63.2203C31.22 43.3244 52.4514 33.0447 70.831 40.26C89.2107 47.4753 110.996 87.2162 103.185 107.112C95.3742 127.008 20.9477 156.91 2.56802 149.695Z" fill="#3186FF"></path></g><g filter="url(#filter8_f_6001_463)"><path d="M113.934 75.8079C109.013 81.5509 96.1724 78.6224 85.253 69.2667C74.3335 59.911 69.4704 47.6711 74.391 41.928C79.3116 36.185 92.1525 39.1136 103.072 48.4692C113.991 57.8249 118.855 70.0648 113.934 75.8079Z" fill="#749BFF"></path></g><g filter="url(#filter9_f_6001_463)"><ellipse cx="92.611" cy="23.7962" rx="44.2411" ry="27.5016" transform="rotate(34.0763 92.611 23.7962)" fill="#FC413D"></ellipse></g><g filter="url(#filter10_f_6001_463)"><ellipse cx="23.4949" cy="29.5887" rx="23.7071" ry="13.7869" transform="rotate(112.516 23.4949 29.5887)" fill="#FFEE48"></ellipse></g></g></g><defs><filter id="filter0_f_6001_463" x="2.49348" y="-26.5423" width="69.0899" height="61.2525" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="3.89034" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter1_f_6001_463" x="28.7524" y="-32.0333" width="135.477" height="134.313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="18.8078" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter2_f_6001_463" x="-62.2884" y="-21.9253" width="142.637" height="127.18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.9884" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter3_f_6001_463" x="-62.2884" y="-21.9253" width="142.637" height="127.18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.9884" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter4_f_6001_463" x="-52.5697" y="-20.8346" width="127.582" height="127.452" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.9884" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter5_f_6001_463" x="17.3619" y="45.4646" width="116.786" height="118.715" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="15.1937" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter6_f_6001_463" x="-7.44765" y="-60.4737" width="125.303" height="122.858" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="13.7698" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter7_f_6001_463" x="-27.7086" y="13.3597" width="157.119" height="162.029" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="12.297" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter8_f_6001_463" x="50.4638" y="16.981" width="87.3973" height="83.7738" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="11.0036" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter9_f_6001_463" x="34.2604" y="-28.457" width="116.701" height="104.506" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="9.29385" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><filter id="filter10_f_6001_463" x="-15.1522" y="-15.9493" width="77.2941" height="91.076" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="11.5027" result="effect1_foregroundBlur_6001_463"></feGaussianBlur></filter><clipPath id="clip0_6001_463"><rect width="869" height="113" fill="white"></rect></clipPath></defs></svg> | |
| </h1> | |
| <p>Experience liftoff <span>with the next-generation IDE</span></p> | |
| <div class="cta"> | |
| <button><span class="material-symbols-outlined">keyboard_command_key</span> <span>Download for macOS</span></button> | |
| <button class="secondary">Explore use cases</button> | |
| </div> | |
| </section> | |
| <section id="video"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/SVCBA-pBgt0?si=OzpiqP3jpwqNGTEu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | |
| </section> | |
| <section id="product"> | |
| <h2><span class="typewriter">Antigravity is our agentic development platform, evolving the IDE into the agent-first era.</span></h2> | |
| <div class="icons"> | |
| <div class="icon"><span class="material-symbols-outlined">keyboard_return</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">keyboard_tab</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">merge</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">folder</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">deployed_code</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">dashboard_customize</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">commit</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">chat_add_on</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">device_hub</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">refresh</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">code</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">file_copy</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">code_blocks</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">keyboard_command_key</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">upload</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">terminal</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">swap_horiz</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">last_page</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">apps_outage</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">keyboard_option_key</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">recenter</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">power_settings_new</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">design_services</span></div> | |
| <div class="icon"><span class="material-symbols-outlined">widgets</span></div> | |
| </div> | |
| <div id="features"> | |
| <div class="feature"> | |
| <div class="img-wrapper"> | |
| <img src="https://antigravity.google/assets/image/landing/editor_suggestions.png" alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>An AI IDE Core</h3> | |
| <p>Google Antigravity's Editor view offers tab autocompletion, natural language code commands, and a configurable, and context-aware configurable agent.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="img-wrapper"> | |
| <img src="https://antigravity.google/assets/image/landing/task_based.png" alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>Higher-level Abstractions</h3> | |
| <p>A more intuitive task-based approach to monitoring agent activity, presenting you with essential artifacts and verification results to build trust.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="img-wrapper"> | |
| <img src="https://antigravity.google/assets/image/landing/browser_use.png" alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>Cross-surface Agents</h3> | |
| <p>Synchronized agentic control across your editor, terminal, and browser for powerful development workflows.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="img-wrapper"> | |
| <img src="https://antigravity.google/assets/image/landing/implementation_comment.png" alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>User Feedback</h3> | |
| <p>Intuitively integrate feedback across surfaces and artifacts to guide and refine the agent’s work.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="img-wrapper"> | |
| <img src="https://antigravity.google/assets/image/landing/inbox.png" alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>An Agent-First Experience</h3> | |
| <p>Manage multiple agents at the same time, across any workspace, from one central mission control view.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="developers"> | |
| <div> | |
| <h2>Built for developers for the agent-first era</h2> | |
| <p class=intro>Google Antigravity is built for user trust, whether you're a professional developer working in a large enterprise codebase, a hobbyist vibe-coding in their spare time, or anyone in between.</p> | |
| </div> | |
| <div class="carousel"> | |
| <div class="developer"> | |
| <figure> | |
| <img src="https://antigravity.google/assets/image/landing/landing-thumbnail-frontend.jpg" alt="Frontend developer"> | |
| <figcaption class="typewriter">Frontend Developer</figcaption> | |
| </figure> | |
| <h3>Frontend developer</h3> | |
| <p>Streamline UX development by leveraging browser-in-the-loop agents to automate repetitive tasks.</p> | |
| <a href="#">View case</a> | |
| </div> | |
| <div class="developer"> | |
| <figure> | |
| <img src="https://antigravity.google/assets/image/landing/landing-thumbnail-fullstack.jpg" alt="Full stack developer"> | |
| <figcaption class="typewriter">Full stack developer</figcaption> | |
| </figure> | |
| <h3>Full stack developer</h3> | |
| <p>Build production-ready applications with confidence with thoroughly designed artifacts and comprehensive verification tests.</p> | |
| <a href="#">View case</a> | |
| </div> | |
| <div class="developer"> | |
| <figure> | |
| <img src="https://antigravity.google/assets/image/landing/landing-thumbnail-enterprise.jpg" alt="Enterprise Developer"> | |
| <figcaption class="typewriter">Enterprise Developer</figcaption> | |
| </figure> | |
| <h3>Enterprise Developer</h3> | |
| <p>Streamline operations and reduce context switching by orchestrating agents across workspaces using the Agent Manager.</p> | |
| <a href="#">View case</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="who" class="center"> | |
| <div> | |
| <h3>For developers<br><span>Achieve new heights</span></h3> | |
| <button>Download</button> | |
| </div> | |
| <div> | |
| <h3>For organizations<br><span>Level up your entire team</span></h3> | |
| <button class="secondary">Notify me</button> | |
| </div> | |
| </section> | |
| <section id="beforeyougo"> | |
| <div class="card dark"> | |
| <p><span class=typewriter>Download Google Antigravity for macOS</span></p> | |
| <div class="buttons"> | |
| <button>Download for Apple Silicon</button> | |
| <button class="secondary">Download for Intel</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- <footer> | |
| <h3>Experience liftoff</h3> | |
| <dl> | |
| <dt>Product</dt> | |
| <dd> | |
| <ul> | |
| <li><a href="#">Download</a></li> | |
| <li><a href="#">Product</a></li> | |
| <li><a href="#">Docs</a></li> | |
| <li><a href="#">Changelog</a></li> | |
| </ul> | |
| </dd> | |
| <dt>Resources</dt> | |
| <dd> | |
| <ul> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Use Cases</a></li> | |
| </ul> | |
| </dd> | |
| </dl> | |
| <p>Antigravity</p> | |
| </footer> --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Ring Particles, using a CSS Houdinig PaintWorklet | |
| if ('paintWorklet' in CSS) { | |
| // Register the PaintWorklet | |
| CSS.paintWorklet.addModule( | |
| 'https://unpkg.com/css-houdini-ringparticles/dist/ringparticles.js' | |
| ); | |
| // The ring should follow the mouse on hover | |
| // In the future this can hopefull be done with CSS, | |
| // if the CSSWG ever comes to tackling https://github.com/w3c/csswg-drafts/issues/6733 | |
| let isInteractive = false; | |
| const $welcome = document.querySelector('#welcome'); | |
| $welcome.addEventListener('mousemove', (e) => { | |
| if (!isInteractive) { $welcome.classList.add('interactive'); isInteractive = true; } | |
| $welcome.style.setProperty('--ring-x', (e.clientX / window.innerWidth) * 100); | |
| $welcome.style.setProperty('--ring-y', (e.clientY / window.innerHeight) * 100); | |
| }); | |
| $welcome.addEventListener('mouseout', (e) => { | |
| $welcome.classList.remove('interactive'); isInteractive = false; | |
| $welcome.style.setProperty('--ring-x', 50); | |
| $welcome.style.setProperty('--ring-y', 50); | |
| }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Rework of https://antigravity.google/ using modern CSS */ | |
| /* See https://brm.us/antigravity for details */ | |
| @layer reset, tokens, base, components, layout, moderncss, util; | |
| @layer moderncss { | |
| @layer layout { | |
| /* Draw a particles ring in the background of the welcome screen */ | |
| /* I am using Houdini PaintWorklets for this */ | |
| @layer ring-particles { | |
| @supports (background: paint(something)) { | |
| @layer particles { | |
| #welcome { | |
| --ring-radius: 100; | |
| --ring-thickness: 600; | |
| --particle-count: 80; | |
| --particle-rows: 25; | |
| --particle-size: 2; | |
| --particle-color: navy; | |
| --particle-min-alpha: 0.1; | |
| --particle-max-alpha: 1.0; | |
| --seed: 200; | |
| background-image: paint(ring-particles); | |
| } | |
| } | |
| @layer animation { | |
| @property --animation-tick { syntax: '<number>'; inherits: false; initial-value: 0; } | |
| @property --ring-radius { syntax: '<number> | auto'; inherits: false; initial-value: auto; } | |
| @keyframes ripple { 0% { --animation-tick: 0; } 100% { --animation-tick: 1; } } | |
| @keyframes ring { 0% { --ring-radius: 150; } 100% { --ring-radius: 250; } } | |
| #welcome { | |
| animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate; | |
| } | |
| } | |
| @layer follow-mouse { | |
| @property --ring-x { syntax: '<number>'; inherits: false; initial-value: 50; } | |
| @property --ring-y { syntax: '<number>'; inherits: false; initial-value: 50; } | |
| #welcome { | |
| /* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */ | |
| transition: --ring-x 3s ease-out, | |
| --ring-y 3s ease-out; | |
| } | |
| } | |
| } | |
| } | |
| /* Draw some dynamic noise behind some of the screens */ | |
| /* I am using Houdini PaintWorklets for this */ | |
| @layer speckled-backgrounds { | |
| @supports (background: paint(something)) { | |
| #beforeyougo .card, | |
| #who > div { | |
| --extra-confettiNumber: 250; | |
| --extra-confettiLengthVariance: 1; | |
| --extra-confettiWeightVariance: 1; | |
| background-image: paint(extra-confetti); | |
| } | |
| } | |
| } | |
| @layer product { | |
| /* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */ | |
| } | |
| } | |
| @layer components { | |
| @layer button { | |
| /* Buttons in .dark containers have inverted colors */ | |
| @scope (.dark) { | |
| button { | |
| color: var(--theme-surface-on-surface); | |
| background: var(--theme-primary-on-primary); | |
| border: 1px solid var(--theme-outline-variant); | |
| &:hover, | |
| &:focus-visible { | |
| background: var(--theme-button-secondary-hover); | |
| } | |
| &.secondary { | |
| color: var(--theme-surface-surface); | |
| background: var(--theme-nav-button-hover); | |
| &:hover, | |
| &:focus-visible { | |
| background: var(--theme-button-secondary-inverse-hover); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer navbar { | |
| /* Anchor the mobile nav underneath the header */ | |
| @layer mobile { | |
| @media (width < 930px) { | |
| header { | |
| anchor-name: --header; | |
| } | |
| header nav { | |
| position: fixed; | |
| inset: auto; | |
| top: 0; /* Undo non-modern-CSS styling */ | |
| position-anchor: --header; | |
| position-area: bottom; | |
| justify-self: stretch; | |
| align-self: stretch; | |
| } | |
| } | |
| } | |
| /* Animate-in the nav on mobile when showing */ | |
| @layer mobile { | |
| @media (width < 930px) { | |
| header nav { | |
| transition: opacity .15s ease-in; | |
| @starting-style { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| /* Don’t scroll page when menu is open */ | |
| @media (width < 930px) { | |
| header:has(.menu-checkbox:checked) { | |
| &, | |
| & nav { | |
| overflow: auto; | |
| overscroll-behavior: contain; | |
| } | |
| } | |
| } | |
| /* Hidey bar – http://brm.us/hidey-bar-2 */ | |
| @layer hidey-bar { | |
| html { | |
| container-type: scroll-state; | |
| } | |
| .header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) { | |
| transition: translate 0.25s; | |
| translate: 0 0; | |
| @container scroll-state(scrolled: bottom) { | |
| translate: 0 -100%; | |
| } | |
| } | |
| } | |
| } | |
| @layer carousel { | |
| @layer scroll-snapping { | |
| @layer base-setup { | |
| @supports (scroll-padding-inline: 3rem) { | |
| .carousel { | |
| scroll-padding-inline: 3rem; | |
| scroll-snap-type: x mandatory; | |
| > * { | |
| scroll-snap-align: start; | |
| } | |
| /* @NOTE: On the orignal page the last item also snaps to the left */ | |
| /* To get this working, I’d manually add some padding to the right */ | |
| /* Defining that “some” is tricky and requires manual calculation */ | |
| /* Here I am calculating 40vi (because the entries are 60vi) minus gap */ | |
| /* So maybe we should have `auto` on scroll-padding do something? */ | |
| @media (width >= 930px) { | |
| padding-inline: 3rem calc(40vi - 3rem); | |
| } | |
| } | |
| } | |
| } | |
| @layer snapped-effects { | |
| /* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */ | |
| .carousel > * { | |
| container-type: scroll-state; | |
| @supports (container-type: scroll-state) { | |
| /* The images */ | |
| > figure { | |
| opacity: .25; | |
| transition: opacity .5s ease; | |
| @container scroll-state(snapped: x) { | |
| opacity: 1; | |
| } | |
| } | |
| /* The bylines */ | |
| > *:not(figure) { | |
| transition: opacity .5s ease, translate .5s ease; | |
| transition-delay: 0s; | |
| opacity: 0; | |
| translate: 0 calc(0.5rem * (sibling-index() - 1)) 0; | |
| @container scroll-state(snapped: x) { | |
| transition-delay: 0.2s; /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */ | |
| opacity: 1; | |
| translate: 0 0 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer niceties { | |
| .carousel { | |
| scrollbar-width: none; | |
| overscroll-behavior-x: contain; | |
| } | |
| } | |
| @layer scroll-buttons { | |
| /* @note: https://chrome.dev/carousel-configurator/ really helps here */ | |
| .carousel { | |
| position: relative; | |
| scroll-behavior: smooth; | |
| anchor-name: --carousel; | |
| &::scroll-button(*) { | |
| position: fixed; | |
| position-anchor: --carousel; | |
| position-visibility: always; | |
| font-family: "Material Symbols Outlined"; | |
| color: var(--theme-surface-on-surface); | |
| background: var(--theme-tonal-tonal); | |
| border: none; | |
| block-size: 2em; | |
| font-size: 1.3em; | |
| inline-size: 2.5em; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| border-radius: 999px; | |
| transition: opacity 0.25s ease; | |
| } | |
| /* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */ | |
| &::scroll-button(*):hover { | |
| background: #eff0f3; | |
| } | |
| &::scroll-button(*):disabled { | |
| cursor: not-allowed; | |
| opacity: 0.25; | |
| } | |
| /* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */ | |
| &::scroll-button(left) { | |
| translate: -50% 0; | |
| content: 'arrow_back' / 'Previous'; | |
| } | |
| &::scroll-button(right) { | |
| translate: 50% 0; | |
| content: 'arrow_forward' / 'Next'; | |
| } | |
| @media (width < 930px) { | |
| &::scroll-button(left), | |
| &::scroll-button(right) { | |
| position-area: center center; | |
| align-self: end; | |
| } | |
| } | |
| @media (width >= 930px) { | |
| &::scroll-button(left), | |
| &::scroll-button(right) { | |
| position-area: center center; | |
| align-self: start; | |
| justify-self: start; | |
| /* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */ | |
| left: calc(60vi - 1em); | |
| top: calc((60vi + 1em) * 9 / 16); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer animations { | |
| @layer revealing-welcome-items { | |
| #welcome { | |
| svg, .cta { | |
| transition: translate 0.5s ease, opacity 0.5s ease; | |
| @starting-style { | |
| translate: 0 50% 0; | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| @layer scroll-triggered-typewriter-effect { | |
| @supports (timeline-trigger-name: --t) { | |
| /* @ref https://codepen.io/bramus/pen/JjwxLNM */ | |
| @keyframes blink { | |
| from { opacity: 0; } | |
| } | |
| @keyframes text { | |
| from { background-size: 0 } | |
| } | |
| /* Typewriter effect */ | |
| .typewriter { | |
| background: | |
| /* highlight text */ | |
| linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat | |
| /* faded text */ | |
| transparent; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| animation: text 2s ease-in both; | |
| &::after { | |
| content: "|"; | |
| --hdr-gradient: linear-gradient( | |
| in oklch, | |
| oklch(80% .3 34), | |
| oklch(90% .3 200) | |
| ); | |
| --sdr-gradient: linear-gradient(#ff4700, #0ff); | |
| background: var(--hdr-gradient); | |
| background-clip: text; | |
| color: transparent; | |
| /* The delay is manually calculated to make the animation only start after the typewriter itself has finished */ | |
| animation: blink 0.2s 1.4s ease infinite alternate both; | |
| } | |
| } | |
| /* Typewriter Trigger in product section */ | |
| #product *:has(> .typewriter) { | |
| timeline-trigger: --t view() cover 30% cover 1000%; | |
| trigger-scope: --t; | |
| .typewriter { | |
| animation-trigger: --t play-once; | |
| &::after { | |
| animation-trigger: --t play-once; | |
| animation-delay: 1.6s; | |
| } | |
| } | |
| } | |
| /* Typewriter Trigger in Carousel */ | |
| .carousel > * { | |
| timeline-trigger: --t view(inline) | |
| entry 90% exit 50% | |
| exit 50% cover 100%; | |
| trigger-scope: --t; | |
| .typewriter { | |
| --typewriter-text-color: white; | |
| animation-trigger: --t play-forwards reset; | |
| animation-duration: 1s; | |
| &::after { | |
| animation-trigger: --t play-forwards reset; | |
| animation-delay: 0.5s; | |
| } | |
| } | |
| } | |
| /* Typewriter Trigger in Before You Go */ | |
| #beforeyougo > .card { | |
| timeline-trigger: --t view() cover 30% cover 1000%; | |
| trigger-scope: --t; | |
| .typewriter { | |
| --typewriter-text-color: white; | |
| animation-trigger: --t play-once; | |
| animation-duration: 2s; | |
| &::after { | |
| animation-trigger: --t play-once; | |
| animation-delay: 1s; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer moving-icons { | |
| @layer slide-in { | |
| @keyframes slide-in { from { translate: 100% 0 0; } } | |
| #product .icons { | |
| timeline-trigger: --t view() cover 30% cover 1000%; | |
| trigger-scope: --t; | |
| animation: slide-in 1s ease both; | |
| animation-trigger: --t play-once; | |
| } | |
| } | |
| @layer wobble { | |
| @keyframes wobble { | |
| from { | |
| translate: 0 75%; | |
| } | |
| to { | |
| translate: 0 -75%; | |
| } | |
| } | |
| #product .icon { | |
| /* @NOTE: If we had support for random(), we could even randomize the animation distance per element */ | |
| animation: wobble 4s ease infinite alternate; | |
| animation-delay: calc(mod(sibling-index(), 5) * -1s); | |
| } | |
| } | |
| } | |
| @layer product-features { | |
| /* Scroll-triggered fading of the text + images */ | |
| @supports (timeline-trigger-name: --t) { | |
| @keyframes fade-a-bit { | |
| from { opacity: 0.3; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes fake-clip-it { | |
| to { scale: 100% 0%; } | |
| } | |
| @keyframes fade-in { | |
| from { opacity: 0; } | |
| } | |
| @media (width >= 930px) { | |
| #features .feature { | |
| timeline-trigger: --t view() entry 100% cover 50%; | |
| trigger-scope: --t; | |
| h3 { | |
| animation: fade-a-bit 500ms ease both; | |
| animation-trigger: --t play-forwards play-backwards; | |
| } | |
| p { | |
| position: relative; | |
| &::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100%; | |
| transform-origin: 0 100%; | |
| background: white; | |
| animation: fake-clip-it 500ms ease both; | |
| animation-trigger: --t play-forwards play-backwards; | |
| } | |
| } | |
| /* Exclude the first one, because that one is always visible */ | |
| img:not(.feature:first-child img) { | |
| animation: fade-in 500ms ease both; | |
| animation-trigger: --t play-forwards play-backwards; /* TODO: Don’t fade out the underlying ones */ | |
| } | |
| } | |
| } | |
| } | |
| /* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */ | |
| } | |
| @layer scroll-driven-animations { | |
| /* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */ | |
| @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { | |
| @keyframes scale-up { | |
| from { | |
| scale: 0.85; | |
| } | |
| } | |
| #beforeyougo .card { | |
| animation: scale-up linear both; | |
| animation-timeline: view(); | |
| animation-range: entry 50% entry 100%; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer components { | |
| @layer button { | |
| button { | |
| background: var(--theme-primary-primary); | |
| color: var(--theme-primary-on-primary); | |
| border: 0px; | |
| border-radius: 999px; | |
| padding: 0.6em 1.5em; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.9em; | |
| cursor: pointer; | |
| transition: .15s background ease-out; | |
| &:hover, | |
| &:focus-visible { | |
| background: var(--theme-button-states-primary-hovered); | |
| } | |
| &:has(span + .material-symbols-outlined) { | |
| padding-inline-end: 1em; | |
| } | |
| &:has(.material-symbols-outlined + span) { | |
| padding-inline-start: 1em; | |
| } | |
| &.secondary { | |
| color: var(--theme-surface-on-surface); | |
| background: var(--theme-secondary-button); | |
| border: 1px solid var(--theme-outline-variant); | |
| &:hover, | |
| &:focus-visible { | |
| background: var(--theme-button-secondary-hover); | |
| } | |
| } | |
| } | |
| } | |
| @layer navbar { | |
| @layer shared { | |
| nav ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .menu-checkbox { | |
| display: none; | |
| } | |
| nav a { | |
| color: var(--theme-surface-on-surface); | |
| transition: .15s color ease-out, .15s background ease-out; | |
| text-decoration: none; | |
| &:hover, | |
| &:focus-visible { | |
| color: #000; | |
| background: var(--theme-button-states-hovered); | |
| } | |
| } | |
| } | |
| @layer mobile { | |
| @media (width < 930px) { | |
| .menu-button { | |
| cursor: pointer; | |
| width: 3.5em; | |
| border-radius: 999px; | |
| text-align: center; | |
| place-content: center; | |
| transition: .15s background ease-out; | |
| &:hover, | |
| &:focus-visible { | |
| background: var(--theme-button-states-hovered); | |
| } | |
| } | |
| nav { | |
| display: none; | |
| } | |
| nav li { | |
| font-size: 1.85em; | |
| font-weight: 350; | |
| border-bottom: 1px solid var(--theme-surface-surface-container-higher); | |
| &:first-child { | |
| border-top: 1px solid var(--theme-surface-surface-container-higher); | |
| } | |
| } | |
| nav a { | |
| display: block; | |
| padding-inline: 3rem; | |
| padding-block: 1.5rem; | |
| } | |
| /* When the menu toggle is checked */ | |
| .menu-checkbox:checked { | |
| /* Show the nav */ | |
| & ~ nav { | |
| position: fixed; | |
| inset: 0; | |
| top: 2.75em; /* This is a guess for how tall the topbar is */ | |
| display: block; | |
| background: var(--palette-grey-0); | |
| } | |
| /* Show the proper icon in the button */ | |
| & ~ .menu-button { | |
| [data-show-when="closed"] { | |
| display: none !important; | |
| } | |
| } | |
| /* Colorize the button differently */ | |
| & ~ .menu-button { | |
| background: var(--theme-primary-primary); | |
| color: var(--theme-primary-on-primary); | |
| &:hover, | |
| &:focus-visible { | |
| background: var(--theme-button-states-primary-hovered); | |
| } | |
| } | |
| } | |
| /* When the menu toggle is not checked */ | |
| .menu-checkbox:not(:checked) { | |
| /* Show the proper icon in the button */ | |
| & ~ .menu-button { | |
| [data-show-when="open"] { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| /* Hide the download button */ | |
| header button { | |
| display: none; | |
| } | |
| } | |
| } | |
| /* Large Menu */ | |
| @layer large { | |
| @media (width >= 930px) { | |
| nav ul { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 0.2rem; | |
| align-self: flex-start; | |
| } | |
| nav a { | |
| padding: 0.6em 1.2em; | |
| border-radius: 999px; | |
| color: var(--theme-surface-on-surface-variant); | |
| white-space: nowrap; | |
| &:hover, | |
| &:focus-visible { | |
| color: #000; | |
| background: var(--theme-nav-button-hover); | |
| } | |
| } | |
| .menu-button { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| @layer card { | |
| .card { | |
| border-radius: 2em; | |
| &.dark { | |
| background: var(--theme-primary-primary); | |
| color: var(--theme-surface-surface); | |
| } | |
| } | |
| } | |
| } | |
| @layer layout { | |
| @layer grid { | |
| body { | |
| margin: 0; | |
| display: grid; | |
| grid-template-columns: | |
| [fullbleed-start] | |
| 3rem | |
| [main-start] | |
| 1fr | |
| [main-end] | |
| 3rem | |
| [fullbleed-end]; | |
| grid-auto-rows: min-content; | |
| } | |
| body > * { | |
| grid-column: fullbleed; | |
| } | |
| } | |
| @layer navigation { | |
| .header-wrapper { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: var(--theme-surface-surface); | |
| z-index: 1; | |
| } | |
| header { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 2rem; | |
| align-items: center; | |
| padding-inline: 3rem; /* @TODO: Figure out if we can subgrid for this */ | |
| padding-block: 0.5rem; | |
| button, | |
| .menu-button { | |
| margin-left: auto; | |
| } | |
| } | |
| } | |
| @layer welcome { | |
| #welcome { | |
| h1 svg { | |
| height: 1em; | |
| width: auto; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| p { | |
| font-size: 4.5em; | |
| text-align: center; | |
| font-weight: 500; | |
| color: var(--theme-surface-on-surface); | |
| span { | |
| display: block; | |
| font-size: 0.7em; | |
| color: var(--theme-surface-on-surface-variant); | |
| } | |
| } | |
| .cta { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| gap: 0.3em; | |
| justify-content: center; | |
| width: 90%; | |
| margin: 0 auto; | |
| button { | |
| font-size: 1.15em; | |
| } | |
| } | |
| } | |
| } | |
| @layer video { | |
| #video { | |
| padding: 0 1em; | |
| iframe { | |
| width: 100%; | |
| height: auto; | |
| aspect-ratio: 16/9; | |
| max-height: 75vh; | |
| border-radius: 2em; | |
| overflow: clip; | |
| } | |
| } | |
| } | |
| @layer product { | |
| #product { | |
| display: grid; | |
| grid-template-columns: subgrid; | |
| > *:not(.icons) { | |
| grid-column: main; | |
| } | |
| .icons { | |
| grid-column: fullbleed; | |
| } | |
| .icons { | |
| height: max(24em, 40vb); | |
| display: flex; | |
| flex-direction: row; | |
| gap: 0.5rem; | |
| align-items: center; | |
| overflow-x: clip; | |
| .icon { | |
| flex: 0 0 clamp(4rem, 10vw, 6rem); | |
| aspect-ratio: 1; | |
| border-radius: 50%; | |
| background: #b7bfd917; | |
| border: 1px solid var(--theme-outline-variant); | |
| backdrop-filter: blur(5px); | |
| display: grid; | |
| place-content: center; | |
| span { | |
| font-size: 2em !important; | |
| } | |
| } | |
| } | |
| } | |
| #features { | |
| .feature { | |
| padding-bottom: 2rem; /* @note: if only we had `gap: x y;` */ | |
| h3 { | |
| font-weight: 350; | |
| font-size: 1.25em; | |
| line-height: 1.1; | |
| margin-block-end: 1rem; | |
| } | |
| img { | |
| border-radius: 2em; | |
| } | |
| p { | |
| font-weight: 300; | |
| line-height: 1.2; | |
| color: var(--theme-surface-on-surface-variant); | |
| } | |
| } | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-auto-rows: auto; | |
| gap: 2rem; | |
| @media (width >= 930px) { | |
| position: relative; | |
| .img-wrapper { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 50%; | |
| container-type: inline-size; | |
| } | |
| img { | |
| position: sticky; | |
| width: 100cqi; | |
| height: auto; | |
| top: calc((100svb - 100cqi) / 2); | |
| } | |
| .feature { | |
| padding-block: 15vb; | |
| grid-column: 1; | |
| display: grid; | |
| place-content: center; | |
| p { | |
| width: 60%; | |
| max-width: 60ch; | |
| text-wrap: pretty; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer developers { | |
| #developers { | |
| width: 100%; | |
| border-top: 1px solid var(--theme-outline-variant); | |
| margin-top: 2em; | |
| padding-top: 2em; | |
| display: grid; | |
| grid-template-columns: subgrid; | |
| > *:not(.carousel) { | |
| grid-column: main; | |
| } | |
| .intro { | |
| color: var(--theme-surface-on-surface-variant); | |
| font-size: 1.1em; | |
| line-height: 1.2; | |
| font-weight: 320; | |
| padding: 0.5rem 0; | |
| @media (width >= 930px) { | |
| width: calc(30vw - 1.5rem); /* TODO: This magic value is not entirely 100% accurate. Maybe if we used a cols layout throughout the site it would work nicely */ | |
| margin-left: auto; | |
| } | |
| } | |
| .carousel { | |
| grid-column: fullbleed; | |
| padding-inline: 3rem; | |
| width: 100%; | |
| overflow-x: scroll; | |
| display: flex; | |
| gap: 2rem; | |
| .developer { | |
| flex: 0 0 100%; | |
| overflow: clip; | |
| @media (width >= 930px) { | |
| flex-basis: 60vi; | |
| } | |
| figure { | |
| display: grid; | |
| place-items: center; | |
| > * { | |
| grid-area: 1 / 1; | |
| } | |
| figcaption { | |
| color: white; | |
| font-size: 2em; | |
| } | |
| } | |
| img { | |
| border-radius: 2em; | |
| } | |
| h3 { | |
| font-weight: 350; | |
| font-size: 1.25em; | |
| line-height: 1.1; | |
| margin-block-end: 0.5rem; | |
| } | |
| p { | |
| width: 40%; | |
| text-wrap: pretty; | |
| color: var(--theme-surface-on-surface-variant); | |
| letter-spacing: 0.05rem; | |
| font-weight: 300; | |
| } | |
| a { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 0.25em; | |
| color: var(--theme-surface-on-surface-variant); | |
| text-decoration: none; | |
| font-weight: 300; | |
| transition: gap 0.15s ease-in; | |
| &:hover, | |
| &:focus-visible { | |
| gap: 0.5em; | |
| } | |
| &::after { | |
| font-family: 'Material Symbols Outlined'; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-size: 24px; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| display: inline-block; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-feature-settings: 'liga'; | |
| -webkit-font-smoothing: antialiased; | |
| content: "\f46a"; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer who { | |
| #who { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| @media (width >= 930px) { | |
| flex-direction: row; | |
| justify-content: space-around; | |
| } | |
| > div { | |
| height: 40vh; | |
| display: grid; | |
| place-content: center; | |
| gap: 1em; | |
| @media (width >= 930px) { | |
| height: 80vh; | |
| } | |
| } | |
| h3 { | |
| font-weight: 400; | |
| font-size: 1.75em; | |
| line-height: 1.1; | |
| @media (width >= 930px) { | |
| font-size: 2.5em; | |
| } | |
| span { | |
| color: var(--theme-surface-on-surface-variant); | |
| } | |
| } | |
| button { | |
| font-size: 1.15em; | |
| justify-self: center; | |
| } | |
| } | |
| } | |
| @layer beforeyougo { | |
| #beforeyougo { | |
| display: grid; | |
| grid-template-columns: subgrid; | |
| height: min-content; | |
| > * { | |
| grid-column: main; | |
| } | |
| .card { | |
| width: 100%; | |
| height: auto; | |
| aspect-ratio: 4/3; | |
| max-height: 80vh; | |
| display: grid; | |
| padding: 4em; | |
| gap: 1rem; | |
| align-content: center; | |
| } | |
| p { | |
| font-size: 2em; | |
| text-wrap: pretty; | |
| margin: 0; | |
| max-width: 20ch; | |
| @media (width > 930px) { | |
| font-size: 3em; | |
| } | |
| } | |
| .buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| font-size: 1.2em; | |
| align-items: start; | |
| @media (width > 930px) { | |
| flex-direction: row; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @layer base { | |
| html { | |
| background: var(--theme-surface-surface); | |
| font-family: "Google Sans Flex", sans-serif; | |
| font-weight: 400; | |
| font-size: 16px; | |
| color: var(--theme-surface-on-surface); | |
| } | |
| section { | |
| /* Make sections fullheight */ | |
| min-height: 100dvh; | |
| &.center { | |
| /* Center their contents */ | |
| place-content: safe center; | |
| justify-items: center; | |
| } | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: 350; | |
| margin: 0.5rem 0; | |
| line-height: 1; | |
| @media (width >= 930px) { | |
| width: 50%; | |
| max-width: 25ch; | |
| } | |
| } | |
| p { | |
| color: var(--theme-surface-on-surface-variant); | |
| } | |
| @scope (.dark) { | |
| p { | |
| color: var(--theme-surface-surface); | |
| } | |
| } | |
| } | |
| @layer reset { | |
| html, body { | |
| height: 100%; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| ul[class] { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| input, textarea, select, button { | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| a:focus-visible, | |
| button:focus-visible { | |
| outline-offset: 0.2rem; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| } | |
| @layer util { | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border-width: 0; | |
| } | |
| .not-sr-only { | |
| position: static; | |
| width: auto; | |
| height: auto; | |
| padding: 0; | |
| margin: 0; | |
| overflow: visible; | |
| clip: auto; | |
| white-space: normal; | |
| } | |
| } | |
| @layer tokens { | |
| @layer colors { | |
| :root { | |
| --palette-grey-900: #2F3034; | |
| --palette-grey-800: #45474D; | |
| --palette-grey-50: #E6EAF0; | |
| --palette-grey-0: #FFFFFF; | |
| --palette-grey-1000: #212226; | |
| --palette-grey-20: #EFF2F7; | |
| --palette-grey-1200: #121317; | |
| --palette-grey-1100: #18191D; | |
| --palette-grey-10: #F8F9FC; | |
| --palette-grey-100: #E1E6EC; | |
| --palette-grey-200: #CDD4DC; | |
| --palette-grey-300: #B2BBC5; | |
| --palette-grey-400: #B7BFD9; | |
| --palette-grey-600: #AAB1CC4D; | |
| --palette-grey-1000-12: #dedfe2; | |
| --palette-grey-50-20: #414347; | |
| --palette-grey-15: #F0F1F5; | |
| --palette-grey-0-rgb: 255, 255, 255; | |
| --palette-grey-50-rgb: 230, 234, 240; | |
| --palette-grey-400-rgb: 183, 191, 217; | |
| --palette-grey-600-rgb: 170, 177, 204; | |
| --palette-grey-1000-rgb: 33, 34, 38; | |
| --palette-grey-1200-rgb: 18, 19, 23; | |
| --theme-surface-surface: var(--palette-grey-0); | |
| --theme-surface-on-surface: var(--palette-grey-1200); | |
| --theme-surface-on-surface-variant: var(--palette-grey-800); | |
| --theme-surface-surface-container: var(--palette-grey-10); | |
| --theme-surface-surface-container-high: var(--palette-grey-20); | |
| --theme-surface-surface-container-higher: var(--palette-grey-50); | |
| --theme-surface-surface-container-highest: var(--palette-grey-100); | |
| --theme-surface-inverse-surface: var(--palette-grey-1200); | |
| --theme-surface-inverse-on-surface: var(--palette-grey-10); | |
| --theme-surface-inverse-on-surface-variant: var(--palette-grey-300); | |
| --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95); | |
| --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12); | |
| --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24); | |
| --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72); | |
| --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95); | |
| --theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0); | |
| --theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01); | |
| --theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24); | |
| --theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72); | |
| --theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95); | |
| --theme-inverse-surface: var(--palette-grey-1200); | |
| --theme-outline: rgba(var(--palette-grey-1000-rgb), .12); | |
| --theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06); | |
| --theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12); | |
| --theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06); | |
| --theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06); | |
| --theme-outline-outline-variant: rgba(33, 34, 38, .06); | |
| --theme-primary-primary: var(--theme-surface-on-surface); | |
| --theme-primary-on-primary: var(--theme-surface-surface); | |
| --theme-tonal-tonal: var(--theme-surface-surface-container); | |
| --theme-tonal-on-tonal: var(--theme-surface-on-surface); | |
| --theme-outlined-outlined: var(--theme-surface-surface-transparent); | |
| --theme-outlined-on-outlined: var(--theme-surface-on-surface); | |
| --theme-protected-protected: var(--theme-surface-surface-container); | |
| --theme-protected-on-protected: var(--theme-surface-on-surface); | |
| --theme-text-text: var(--theme-surface-surface-transparent); | |
| --theme-text-on-text: var(--theme-surface-on-surface); | |
| --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant); | |
| --theme-text-link-states-hovered: var(--palette-grey-1000); | |
| --theme-text-link-states-focused: var(--palette-grey-1100); | |
| --theme-text-link-states-pressed: var(--palette-grey-1000); | |
| --theme-text-link-states-disabled: #6A6A71; | |
| --theme-button-states-primary-enabled: var(--theme-primary-primary); | |
| --theme-button-states-primary-disabled: var(--palette-grey-10); | |
| --theme-button-states-primary-hovered: var(--palette-grey-900); | |
| --theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12); | |
| --theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2); | |
| --theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2); | |
| --theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1); | |
| --theme-button-secondary-hover: var(--palette-grey-15); | |
| --theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3); | |
| --theme-button-states-tonal-enabled: var(--theme-tonal-tonal); | |
| --theme-button-states-tonal-disabled: var(--palette-grey-10); | |
| --theme-button-states-protected-enabled: var(--theme-protected-protected); | |
| --theme-button-states-protected-hovered: var(--palette-grey-20); | |
| --theme-button-states-protected-disabled: var(--palette-grey-100); | |
| --theme-button-states-outlined-enabled: var(--theme-outlined-outlined); | |
| --theme-button-states-disabled: var(--palette-grey-100); | |
| --theme-button-states-on-disabled: #6A6A71; | |
| --theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04); | |
| --theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06); | |
| --theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12); | |
| --theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0); | |
| --theme-nav-button: rgba(var(--palette-grey-400-rgb), .09); | |
| --theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2); | |
| --divider: var(--theme-outline-outline-variant); | |
| } | |
| } | |
| @layer animations { | |
| :root { | |
| --ease-in-quad: cubic-bezier(.55, .085, .68, .53); | |
| --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); | |
| --ease-in-quart: cubic-bezier(.895, .03, .685, .22); | |
| --ease-in-quint: cubic-bezier(.755, .05, .855, .06); | |
| --ease-in-expo: cubic-bezier(.95, .05, .795, .035); | |
| --ease-in-circ: cubic-bezier(.6, .04, .98, .335); | |
| --ease-out-quad: cubic-bezier(.25, .46, .45, .94); | |
| --ease-out-cubic: cubic-bezier(.215, .61, .355, 1); | |
| --ease-out-quart: cubic-bezier(.165, .84, .44, 1); | |
| --ease-out-quint: cubic-bezier(.23, 1, .32, 1); | |
| --ease-out-expo: cubic-bezier(.19, 1, .22, 1); | |
| --ease-out-circ: cubic-bezier(.075, .82, .165, 1); | |
| --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955); | |
| --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); | |
| --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); | |
| --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1); | |
| --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); | |
| --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86); | |
| --ease-out-back: cubic-bezier(.34, 1.85, .64, 1); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment