add system font loading

improve drawing
implement staggered text
begin refactor of drawing code

app/src/components/Properties/Primitives.tsx

@@ -2,18 +2,22 @@ import { ease } from "@unom/style";
 import { motion } from "framer-motion";
 import {
   AnimatedTextEntity,
-  AnimatedBoxEntity,
+  AnimatedRectEntity,
+  AnimatedStaggeredTextEntity,
   AnimatedEllipseEntity,
 } from "primitives/AnimatedEntities";
 import { Paint, PaintStyle, PaintStyleType } from "primitives/Paint";
 import { FC } from "react";
 import { z } from "zod";
-import { AnimatedVec2Properties } from "./Values";
+import { AnimatedVec2Properties, ColorProperties } from "./Values";
 import { PropertiesProps } from "./common";
 
 type TextPropertiesProps = PropertiesProps<z.input<typeof AnimatedTextEntity>>;
+type StaggeredTextPropertiesProps = PropertiesProps<
+  z.input<typeof AnimatedStaggeredTextEntity>
+>;
 type PaintPropertiesProps = PropertiesProps<z.input<typeof Paint>>;
-type BoxPropertiesProps = PropertiesProps<z.input<typeof AnimatedBoxEntity>>;
+type RectPropertiesProps = PropertiesProps<z.input<typeof AnimatedRectEntity>>;
 type EllipsePropertiesProps = PropertiesProps<
   z.input<typeof AnimatedEllipseEntity>
 >;
@@ -45,6 +49,15 @@ export const PaintProperties: FC<PaintPropertiesProps> = ({
           ))}
         </select>
       </label>
+      {entity.style.color && (
+        <ColorProperties
+          label="Color"
+          onUpdate={(color) =>
+            onUpdate({ ...entity, style: { ...entity.style, color } })
+          }
+          entity={entity.style.color}
+        />
+      )}
     </div>
   );
 };
@@ -90,7 +103,75 @@ export const TextProperties: FC<TextPropertiesProps> = ({
   );
 };
 
-export const BoxProperties: FC<BoxPropertiesProps> = ({ entity, onUpdate }) => {
+export const StaggeredTextProperties: FC<StaggeredTextPropertiesProps> = ({
+  entity,
+  onUpdate,
+}) => {
+  return (
+    <motion.div
+      variants={{ enter: { opacity: 1, y: 0 }, from: { opacity: 0, y: 50 } }}
+      animate="enter"
+      initial="from"
+      transition={ease.quint(0.9).out}
+    >
+      <label className="flex flex-col items-start">
+        <span className="label">Text</span>
+        <input
+          value={entity.text}
+          onChange={(e) =>
+            onUpdate({
+              ...entity,
+              text: e.target.value,
+              cache: { valid: false },
+            })
+          }
+        />
+      </label>
+      <label className="flex flex-col items-start">
+        <span className="label">Size</span>
+        <input
+          value={entity.letter.paint.size}
+          onChange={(e) =>
+            onUpdate({
+              ...entity,
+              letter: {
+                ...entity.letter,
+                paint: {
+                  ...entity.letter.paint,
+                  size: Number(e.target.value),
+                },
+              },
+            })
+          }
+        ></input>
+      </label>
+      <PaintProperties
+        entity={entity.letter.paint}
+        onUpdate={(paint) =>
+          onUpdate({
+            ...entity,
+            letter: {
+              ...entity.letter,
+              paint: { ...entity.letter.paint, ...paint },
+            },
+          })
+        }
+      />
+      <AnimatedVec2Properties
+        onUpdate={(updatedEntity) =>
+          onUpdate({ ...entity, origin: updatedEntity })
+        }
+        label="Origin"
+        entity={entity.origin}
+      />
+    </motion.div>
+  );
+};
+
+export const RectProperties: FC<RectPropertiesProps> = ({
+  entity,
+  onUpdate,
+}) => {
   return (
     <div className="dark:text-white">
       <PaintProperties