Component Name

*desktop only

Details
Author
Margins
Added
31 May 2024
Version
V.1 - Initial Release
Description
Copy Demo Gem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus augue, auctor sit amet cursus ut, congue imperdiet quam. Phasellus ac orci sit amet diam pharetra commodo quis vel erat. In sit amet dictum turpis.
<head>
<body>
<embed>
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"ad3cf9a8-238c-f006-efd0-400de103911e","type":"Block","tag":"div","classes":["ecc5bf45-8221-9092-8211-04d5d8c83ac0"],"children":["63e1b3e2-ba97-772b-3967-47c815e2b81e","26f20979-66a9-32e7-6658-f9b2d4ac668c","9d6b4b70-b3fd-2dfc-290b-3ebf8728c139"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"target"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"63e1b3e2-ba97-772b-3967-47c815e2b81e","type":"HtmlEmbed","tag":"div","classes":["3f8f61eb-07d9-bbac-48a8-c0704baa5044"],"children":[],"v":"<svg width=\"100%\" height=\"100%\" viewBox=\"0 100 1511 450\" id=\"svg\" class=\"svg-path\">\n\t<path id=\"path\" d=\"M0.478271 946.399C33.8551 826.799 140.244 611.38 298.783 706.504C496.958 825.409 622.121 789.946 684.702 564.653C747.284 339.36 939.2 272.606 1056.02 341.446C1172.84 410.285 1343.89 358.134 1368.93 203.766C1388.95 80.2722 1471.84 17.4125 1510.78 1.41943\" fill=\"rgba(255, 0, 0, 0)\"/>\n  <div id=\"rect\" class=\"sphere\"></div>\n</svg>\n\n<style>\n  .sphere {\n    border-radius: 50%;\n    background: radial-gradient(83.4% 83.4% at 63.69% 24.31%, #6C6C6C 0%, rgba(0, 0, 0, 0.00) 100%), #000;\n  }\n</style>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"100%\" height=\"100%\" viewBox=\"0 100 1511 450\" id=\"svg\" class=\"svg-path\">\n\t<path id=\"path\" d=\"M0.478271 946.399C33.8551 826.799 140.244 611.38 298.783 706.504C496.958 825.409 622.121 789.946 684.702 564.653C747.284 339.36 939.2 272.606 1056.02 341.446C1172.84 410.285 1343.89 358.134 1368.93 203.766C1388.95 80.2722 1471.84 17.4125 1510.78 1.41943\" fill=\"rgba(255, 0, 0, 0)\"/>\n  <div id=\"rect\" class=\"sphere\"></div>\n</svg>\n\n<style>\n  .sphere {\n    border-radius: 50%;\n    background: radial-gradient(83.4% 83.4% at 63.69% 24.31%, #6C6C6C 0%, rgba(0, 0, 0, 0.00) 100%), #000;\n  }\n</style>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"26f20979-66a9-32e7-6658-f9b2d4ac668c","type":"Block","tag":"div","classes":["df433dd9-27c0-0a1c-82d9-96c0cf583970","79ddd6d5-f205-cdea-00a7-0084a44b98ab"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9d6b4b70-b3fd-2dfc-290b-3ebf8728c139","type":"Block","tag":"div","classes":["7b54958b-cceb-1640-d5b9-7d0bc8c25ac2"],"children":["4c09b49a-9351-e02e-826a-747af5fbc6e9"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4c09b49a-9351-e02e-826a-747af5fbc6e9","type":"Block","tag":"div","classes":["b3748f9c-b26a-2851-2e7e-cf0a7baab1f6"],"children":["9697f9d2-48fb-ad59-4e7b-37069c9f6972"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9697f9d2-48fb-ad59-4e7b-37069c9f6972","type":"Block","tag":"div","classes":["5eb1faee-5516-a899-fe08-7cc66ad28ab2"],"children":["6dbcac37-8ae8-f5a6-066e-b4727e7b6864","f7256274-9694-f13d-4cec-f57900a0b436","6acbf55a-32ce-6f61-b7f7-e3135fd43a05"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6dbcac37-8ae8-f5a6-066e-b4727e7b6864","type":"Block","tag":"div","classes":["9e5435af-785e-f07b-4fca-9ca08646360c"],"children":["81e2aa87-a65f-d151-92df-34b3be93e9a0"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"81e2aa87-a65f-d151-92df-34b3be93e9a0","type":"Heading","tag":"h1","classes":["fd245c8c-e5b9-88ed-4e6c-2bf5852895d2"],"children":["37d13b11-b4c8-5ae2-d1c4-1e677156e395"],"data":{"tag":"h1","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"37d13b11-b4c8-5ae2-d1c4-1e677156e395","text":true,"v":"“In an ideal world the form should feel like a warm handshake.”"},{"_id":"f7256274-9694-f13d-4cec-f57900a0b436","type":"Block","tag":"div","classes":["2265d180-95ea-dd44-4782-c500ed9bb5af","70cfb140-7850-e6a4-ea28-089424480f7a","87e7edc2-a857-1169-1c48-96791ec37e29"],"children":["1316a235-983d-09f2-0f6a-048d9a454f9e"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1316a235-983d-09f2-0f6a-048d9a454f9e","type":"Block","tag":"div","classes":["96d3d006-ab36-2f5a-3095-11441341a5f2"],"children":["3511f05a-24a4-d50a-e369-94d27e5de2d0"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3511f05a-24a4-d50a-e369-94d27e5de2d0","text":true,"v":"GSAP SVG Path Animation"},{"_id":"6acbf55a-32ce-6f61-b7f7-e3135fd43a05","type":"HtmlEmbed","tag":"div","classes":["b94c2bbe-4a14-1582-9c66-35d9977f5956"],"children":[],"v":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/MotionPathPlugin.min.js\"></script>\n\n <script>\n  // SVG Path GSAP Sphere Animation for Desktop\n  gsap.registerPlugin(MotionPathPlugin);\n\n  // Animate the motion path with ScrollTrigger\n  gsap.to(\"#rect\", {\n    duration: 10,\n    yoyo: true,\n    ease: \"power1.inOut\",\n    motionPath: {\n      path: \"#path\",\n      align: \"#path\",\n      autoRotate: true,\n      alignOrigin: [0.5, 0.5],\n    },\n    scrollTrigger: {\n      trigger: \"#target\", // Set the trigger element\n      start: \"top bottom\", \n      end: \"bottom top\", \n      scrub: 2, // Increase scrub for smoother animation\n      ease: \"power1.inOut\",\n    },\n  });\n</script>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/MotionPathPlugin.min.js\"></script>\n\n <script>\n  // SVG Path GSAP Sphere Animation for Desktop\n  gsap.registerPlugin(MotionPathPlugin);\n\n  // Animate the motion path with ScrollTrigger\n  gsap.to(\"#rect\", {\n    duration: 10,\n    yoyo: true,\n    ease: \"power1.inOut\",\n    motionPath: {\n      path: \"#path\",\n      align: \"#path\",\n      autoRotate: true,\n      alignOrigin: [0.5, 0.5],\n    },\n    scrollTrigger: {\n      trigger: \"#target\", // Set the trigger element\n      start: \"top bottom\", \n      end: \"bottom top\", \n      scrub: 2, // Increase scrub for smoother animation\n      ease: \"power1.inOut\",\n    },\n  });\n</script>","div":false,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}}],"styles":[{"_id":"2265d180-95ea-dd44-4782-c500ed9bb5af","fake":false,"type":"class","name":"margin-top","namespace":"","comb":"","styleLess":"margin-right: 0rem; margin-bottom: 0rem; margin-left: 0rem;","variants":{},"children":["70cfb140-7850-e6a4-ea28-089424480f7a","d48f0bb0-1cc6-8b76-2541-a158d99a4277"],"createdBy":"611d7f2949ba91a5af0b8e07","origin":null,"selector":null},{"_id":"96d3d006-ab36-2f5a-3095-11441341a5f2","fake":false,"type":"class","name":"Text Block","namespace":"","comb":"","styleLess":"font-family: Dmmono; font-size: 1rem; line-height: 1rem;","variants":{"small":{"styleLess":"position: relative;"},"medium":{"styleLess":"position: relative;"}},"children":[],"createdBy":"611d7f2949ba91a5af0b8e07","origin":null,"selector":null},{"_id":"79ddd6d5-f205-cdea-00a7-0084a44b98ab","fake":false,"type":"class","name":"hide","namespace":"","comb":"&","styleLess":"top: 36%; display: none; width: 450px; height: 450px;","variants":{"tiny":{"styleLess":"left: 1px; top: 18%; right: 48%; width: 275px; height: 275px;"},"medium":{"styleLess":"position: absolute; left: -84px; top: 257px; right: auto; z-index: 0; display: none; mix-blend-mode: multiply;"},"small":{"styleLess":"top: 31%; right: 47%;"}},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"7b54958b-cceb-1640-d5b9-7d0bc8c25ac2","fake":false,"type":"class","name":"padding-global","namespace":"","comb":"","styleLess":"padding-right: 5%; padding-left: 5%;","variants":{},"children":["57e29525-e84b-1abe-76c4-609c0a54fb7b"],"createdBy":"611d7f2949ba91a5af0b8e07","origin":null,"selector":null},{"_id":"df433dd9-27c0-0a1c-82d9-96c0cf583970","fake":false,"type":"class","name":"sphere","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 51%; right: 59%; bottom: auto; z-index: 0; overflow: hidden; width: 450px; height: 450px; background-image: linear-gradient(to bottom, hsla(0, 0.00%, 0.00%, 1.00),hsla(0, 0.00%, 0.00%, 1.00)); color: white;","variants":{"medium":{"styleLess":"width: 450px; height: 450px;"},"tiny":{"styleLess":"width: 275px; height: 275px;"}},"children":["79ddd6d5-f205-cdea-00a7-0084a44b98ab"],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"5eb1faee-5516-a899-fe08-7cc66ad28ab2","fake":false,"type":"class","name":"content_css-filter","namespace":"","comb":"","styleLess":"position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;","variants":{"medium":{"styleLess":"position: static;"}},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"3f8f61eb-07d9-bbac-48a8-c0704baa5044","fake":false,"type":"class","name":"svg-path","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%;","variants":{"tiny":{"styleLess":"bottom: 41%;"},"small":{"styleLess":"bottom: 38%;"},"medium":{"styleLess":"bottom: 37%;"}},"children":["c68de4ba-2c53-2fba-474e-20087de185bb"],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"ecc5bf45-8221-9092-8211-04d5d8c83ac0","fake":false,"type":"class","name":"section_gsap-svg-path","namespace":"","comb":"","styleLess":"position: relative; overflow: hidden; border-top-left-radius: 64px; border-top-right-radius: 64px; border-bottom-left-radius: 64px; border-bottom-right-radius: 64px; background-color: white; color: #0a0a0a;","variants":{"medium":{"styleLess":"border-top-left-radius: 48px; border-top-right-radius: 48px;"}},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"70cfb140-7850-e6a4-ea28-089424480f7a","fake":false,"type":"class","name":"margin-small","namespace":"","comb":"&","styleLess":"margin-top: 2rem;","variants":{},"children":["87e7edc2-a857-1169-1c48-96791ec37e29","f38372d0-3b34-113b-3d90-f133aa016511"],"createdBy":"611d7f2949ba91a5af0b8e07","origin":null,"selector":null},{"_id":"b94c2bbe-4a14-1582-9c66-35d9977f5956","fake":false,"type":"class","name":"sphere-animation","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"b3748f9c-b26a-2851-2e7e-cf0a7baab1f6","fake":false,"type":"class","name":"padding-section-medium","namespace":"","comb":"","styleLess":"padding-top: 275px; padding-bottom: 176px;","variants":{"medium":{"styleLess":"padding-top: 176px;"},"tiny":{"styleLess":"padding-top: 125px;"}},"children":["29485460-3746-71f2-9c3e-5ed3c7701f6a"],"createdBy":"611d7f2949ba91a5af0b8e07","origin":null,"selector":null},{"_id":"87e7edc2-a857-1169-1c48-96791ec37e29","fake":false,"type":"class","name":"text-color-grey","namespace":"","comb":"&","styleLess":"color: hsla(240, 0.56%, 64.90%, 1.00);","variants":{},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"fd245c8c-e5b9-88ed-4e6c-2bf5852895d2","fake":false,"type":"class","name":"Heading","namespace":"","comb":"","styleLess":"position: relative; margin-top: 0px; margin-bottom: 0px; font-family: Nanjaune; font-size: 128px; line-height: 128px; text-align: center;","variants":{"medium":{"styleLess":"position: static; font-size: 96px; line-height: 96px;"},"small":{"styleLess":"font-size: 64px; line-height: 64px;"},"tiny":{"styleLess":"margin-top: 0px; margin-bottom: 0px; font-size: 40px; line-height: 40px;"}},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null},{"_id":"9e5435af-785e-f07b-4fca-9ca08646360c","fake":false,"type":"class","name":"filter-content","namespace":"","comb":"","styleLess":"max-width: 90rem; margin-right: auto; margin-left: auto; color: white; mix-blend-mode: difference;","variants":{"tiny":{"styleLess":"max-width: 100%;"}},"children":[],"createdBy":"65a6c6dab79b638118734dec","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
V.1 - Initial Release