It is very simple to realize the dynamic background of Link Page, just put the corresponding code into the page.

Click Framer's Site Settings button and insert the code at the End of <body> tag (you need to be a paid Framer user to do this).

20230102060604.png

Birds

<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js>"></script>
<script>
  VANTA.BIRDS({
    el: "#main",
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    backgroundColor: 0x0,
    color1: 0x521efc,
    color2: 0x14ffc7,
    colorMode: "lerp",
    wingSpan: 40.00,
    speedLimit: 10.00,
    separation: 100.00,
    alignment: 100.00,
    cohesion: 100.00
  })
</script>

Clouds

<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js>"></script>
<script>
VANTA.CLOUDS({
  el: "#main",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  skyColor: 0x0,
  cloudColor: 0x8644f7,
  cloudShadowColor: 0x6ea1ff,
  sunColor: 0x0,
  sunGlareColor: 0x0,
  sunlightColor: 0xf7b4df,
  speed: 2.60
})
</script>

Halo

<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js>"></script>
<script>
VANTA.HALO({
  el: "#main",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  baseColor: 0x5618ef,
  backgroundColor: 0x0,
  amplitudeFactor: 3.00,
  xOffset: 0.01,
  yOffset: 0.02,
  size: 1.60
})
</script>

Any questions? Feel free to private message me on Twitter.

twitter.com/FarewelltoWind