Landing page examples - Would be greatly appreciated.

[martinAlt335]

Hello Matt,

Just wanted to ask if the landing page source code could be shared? I'm interested in replicating the ball animation on the landing page 1:1 and then working from there but looking through compiled code for the options used is a bit of a pain.

Would greatly appreciate it, thanks a million!

[mattgperry]

Sure, although its quite a lot more involved because of the clip-path and also uses a private React api. But hope this helps:

 const shadow = (size) =>
    `circle(${size}px at calc(50% + 5px) calc(50% + 5px))`

  const options = {
    offset: [0, 0.3, 0.5, 0.8, 1],
    repeat: Infinity,
    duration: 3,
    easing: [[0.17, 0.02, 0.22, 1], "linear", [0.17, 0.02, 0.22, 1], "linear"],
  }

  return (
    <SimpleContainer style="static" inViewport="animate">
      <CircleShadow
        poses={{
          static: {
            clipPath: shadow(65),
          },
          animate: {
            clipPath: [
              shadow(65),
              shadow(105),
              shadow(105),
              shadow(65),
              shadow(65),
            ],
            options: options as any,
          },
        }}
      />
      <Circle
        poses={{
          static: {
            scale: 1,
          },
          animate: {
            scale: [1, 1.4, 1.4, 1, 1],
            options: options as any,
          },
        }}
        style={{ transformOrigin: "90% 90%" }}
      />
    </SimpleContainer>
  )

[martinAlt335]

Cheers for getting back to me. Much appreciated, thanks.