feat: introduce gif generation api

[twlite]

Description

With this update, canvacord will be able to generate GIFs using builder api. This API works via stateful builders, which should be familiar to react developers. Along with GIF api, this update introduces hooks (similar to react). For example, the useState hook triggers re-render when updated.

Motivation and Context

GIF generation has been unnecessarily complicated to manage. Canvacord allows you to create gifs via react-like components :D

/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */
import { JSX, useState, Font, createGIF, Builder } from "canvacord";
import { createWriteStream } from "fs";

function Rotation() {
  const [count, setCount] = useState(0);

  setCount(count + 1);

  return (
    <div className="h-full w-full bg-indigo-600 flex items-center justify-center">
      <h1
        className="text-9xl text-white font-bold"
        style={{ transform: `rotate(${count}deg)` }}
      >
        {count}°
      </h1>
    </div>
  );
}

class Demo extends Builder {
  constructor() {
    super(512, 512);
  }

  public async render() {
    return <Rotation />;
  }
}

// load font
Font.loadDefault();

const demo = new Demo();
demo.setIterations(360);

const gif = createGIF(demo, {
  repeat: 0,
  delay: 15,
  dispose: 0,
  framerate: 15,
  quality: 10,
});

gif.then((stream) => {
  stream.pipe(createWriteStream(`${__dirname}/output/test.gif`));
});

Screenshots (if appropriate):

This is the resulting GIF

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [x] I have added tests to cover my changes.
• [x] All new and existing tests passed.

[netlify[bot]]

✅ Deploy Preview for canvacord ready!

Name	Link
🔨 Latest commit	03dbc10dc862c74934e8bc451e1da7679959166d
🔍 Latest deploy log	https://app.netlify.com/sites/canvacord/deploys/659ad35c9f8d1c0008506299
😎 Deploy Preview	https://deploy-preview-196--canvacord.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.