add system font loading

improve drawing
implement staggered text
begin refactor of drawing code

app/src/example.ts

@@ -3,12 +3,15 @@ import { Color } from "primitives/Paint";
 import { Timeline } from "primitives/Timeline";
 import { staticAnimatedNumber, staticAnimatedVec2 } from "primitives/Values";
 import { z } from "zod";
+import { v4 as uuid } from "uuid";
 
 function buildRect1(
   offset: number,
   color: z.infer<typeof Color>
 ): z.input<typeof AnimatedEntity> {
   return {
+    id: uuid(),
+    cache: {},
     type: "Rect",
     paint: {
       style: {
@@ -58,6 +61,8 @@ function buildRect(
 ): z.input<typeof AnimatedEntity> {
   return {
     type: "Rect",
+    id: uuid(),
+    cache: {},
     paint: {
       style: {
         type: "Fill",
@@ -126,6 +131,8 @@ function buildText(
 ): z.input<typeof AnimatedEntity> {
   return {
     type: "Text",
+    id: uuid(),
+    cache: {},
     paint: {
       style: {
         type: "Fill",
@@ -179,6 +186,9 @@ function buildStaggeredText(
   return {
     type: "StaggeredText",
     text,
+    cache: {},
+    id: uuid(),
+    origin: staticAnimatedVec2(1280 / 2, 720 / 2),
     transform: {
       translate: staticAnimatedVec2(0, 0),
       rotate: staticAnimatedVec2(0, 0),
@@ -186,17 +196,17 @@ function buildStaggeredText(
       scale: staticAnimatedVec2(1, 1),
     },
     animation_data: {
-      offset: 0,
-      duration: 2,
+      offset,
+      duration: 5.0,
     },
-    stagger: 2.0,
+    stagger: 0.05,
     letter: {
       paint: {
         style: {
           type: "Fill",
           color,
         },
-        size: 30,
+        size: 90,
         align: "Center",
       },
       transform: {
@@ -208,12 +218,22 @@ function buildStaggeredText(
             {
               keyframes: {
                 values: [
+                  {
+                    interpolation: {
+                      type: "Spring",
+                      stiffness: 200,
+                      mass: 1,
+                      damping: 15,
+                    },
+                    value: 0.0,
+                    offset: 0.0,
+                  },
                   {
                     interpolation: {
                       type: "Linear",
                     },
                     value: 1.0,
-                    offset: 0.0,
+                    offset: 4.0,
                   },
                 ],
               },
@@ -223,8 +243,10 @@ function buildStaggeredText(
                 values: [
                   {
                     interpolation: {
-                      type: "EasingFunction",
-                      easing_function: "CircOut",
+                      type: "Spring",
+                      stiffness: 200,
+                      mass: 1,
+                      damping: 15,
                     },
                     value: 0.0,
                     offset: 0.0,
@@ -248,7 +270,13 @@ function buildStaggeredText(
 
 export const EXAMPLE_ANIMATED_ENTITIES: Array<z.input<typeof AnimatedEntity>> =
   [
-    buildStaggeredText("Hallo", 0.0, { value: [30, 30, 30, 1.0] }),
+    buildStaggeredText("Ehrenmann?", 2.0, {
+      value: [255, 255, 255, 1.0],
+    }),
+    buildText("Wie gehts?", 2.5, 40, 40, { value: [200, 200, 200, 1.0] }),
+    buildRect(0.6, { value: [30, 30, 30, 1.0] }),
+    buildRect(0.4, { value: [20, 20, 20, 1.0] }),
+    buildRect(0.2, { value: [10, 10, 10, 1.0] }),
     buildRect(0, { value: [0, 0, 0, 1.0] }),
   ];
 
@@ -259,6 +287,7 @@ export const EXAMPLE_ANIMATED_ENTITIES_2: Array<
     value: [255, 255, 255, 1.0],
   }),
   buildText("Wie gehts?", 1.5, 40, 30, { value: [255, 255, 255, 1.0] }),
+  buildRect(0.8, { value: [40, 40, 40, 1.0] }),
   buildRect(0.6, { value: [30, 30, 30, 1.0] }),
   buildRect(0.4, { value: [20, 20, 20, 1.0] }),
   buildRect(0.2, { value: [10, 10, 10, 1.0] }),