How do I write custom values in variants?

[EloB]

I'm trying to use framer-motion with variants, canvas and typescript. I'm not sure how to do it the correct way.

Is there a better way to write canvas or could this be a feature request for framer-motion?

Here is my working code at the moment.

const variants: Variants = {
  enter: {
    customValue1: 0,
    customValue2: 0,
  } as any, // <!--I don't want to do this.
  idle: {
    customValue1: 1,
    customValue2: 0,
  } as any, // <!-- I don't want to do this.
  active: {
    customValue1: 1,
    customValue2: 1,
  } as any, // <!-- I don't want to do this.
  leave: {
    customValue1: 0,
    customValue2: 0,
  } as any, // <!-- I don't want to do this.
};

const Painter = (props: PainterProps) => {
  const ref = useRef<HTMLCanvasElement>(null);

  const render = useMemo(() => {
    let ctx: CanvasRenderingContext2D;
    return (values: ResolvedValues) => {
      ctx ??= ref.current?.getContext("2d");
      
      // Render stuff to canvas...
    };
  }, []);
  
  return (
    <motion.canvas
      {...props}
      ref={ref}
      variants={variants}
      onUpdate={(...args) => {
        props.onUpdate?.(...args);
        render(...args);
      }}
    />
  );
};