Animated Gradient With SVG

npx shadcn@latest add "https://fancycomponents.dev/r/animated-gradient-with-svg.json"

Animated gradients can be achieved with many different techniques (shaders, CSS gradients, etc.), this component uses simple SVG circles with a blur filter to create the effect.

1. For each color in the colors prop array, the component creates an SVG circle element
2. Each circle is given a random initial position using percentage values
3. The movement of each circle is controlled by 8 CSS variables that define target positions:
   • --tx-1 and --ty-1 for the first position
   • --tx-2 and --ty-2 for the second position
   • And so on for positions 3 and 4
4. These variables are set to random values between -0.5 and 0.5.

...
style={
    {
      ...
      "--tx-1": (Math.random() - 0.5),
      "--ty-1": (Math.random() - 0.5),
      "--tx-2": (Math.random() - 0.5),
      "--ty-2": (Math.random() - 0.5),
      "--tx-3": (Math.random() - 0.5),
      "--ty-3": (Math.random() - 0.5),
      "--tx-4": (Math.random() - 0.5),
      "--ty-4": (Math.random() - 0.5),
    } as React.CSSProperties
  }
...

5. The background-gradient animation keyframes are used to animate the circles between these positions
6. Lastly, we blur the container element which holds the circles, to create a smooth effect.

If you would like to achieve a more complex animation, you have to edit the component directly, for example:

1. Add more keyframe positions by increasing the number of --tx and --ty variables
2. Use cubic-bezier timing functions to create non-linear movement
3. Add rotation or scaling transforms

and so on.