add staggered text

rename box to rect
refactor rust

app/src/primitives/AnimatedEntities.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
-import { BoxEntity, EllipseEntity, TextEntity } from "./Entities";
+import { EllipseEntity, EntityType, RectEntity, TextEntity } from "./Entities";
 import { AnimatedVec2 } from "./Values";
+import { TextPaint } from "./Paint";
 
 export const AnimationData = z.object({
   offset: z.number(),
@@ -8,16 +9,43 @@ export const AnimationData = z.object({
   visible: z.boolean().optional().default(true),
 });
 
-export const AnimatedBoxEntity = BoxEntity.extend({
+export const AnimatedTransform = z.object({
+  /** Translates by the given animated vec2 */
+  translate: AnimatedVec2,
+  /** Skews by the given animated vec2 */
+  skew: AnimatedVec2,
+  /** Rotates by the given animated vec2 */
+  rotate: AnimatedVec2,
+  /** Scales on the x and y axis by the given animated vec2 */
+  scale: AnimatedVec2,
+});
+
+export const AnimatedStaggeredText = z.object({
+  /** Transform applied to the whole layer. */
+  transform: AnimatedTransform,
+  /** The staggered delay that is applied for each letter. Gets multiplied by the index of the letter. */
+  stagger: z.number().min(0),
+  /** These properties get applied to each letter */
+  letter: z.object({
+    transform: AnimatedTransform,
+    paint: TextPaint,
+  }),
+  text: z.string(),
+  animation_data: AnimationData,
+  type: z.literal(EntityType.Enum.StaggeredText),
+});
+
+export const AnimatedRectEntity = RectEntity.extend({
   position: AnimatedVec2,
   size: AnimatedVec2,
   origin: AnimatedVec2,
-
+  transform: AnimatedTransform.optional(),
   animation_data: AnimationData,
 });
 
 export const AnimatedTextEntity = TextEntity.extend({
   origin: AnimatedVec2,
+  transform: AnimatedTransform.optional(),
   animation_data: AnimationData,
 });
 
@@ -25,12 +53,14 @@ export const AnimatedEllipseEntity = EllipseEntity.extend({
   radius: AnimatedVec2,
   position: AnimatedVec2,
   origin: AnimatedVec2,
+  transform: AnimatedTransform.optional(),
   animation_data: AnimationData,
 });
 
 export const AnimatedEntity = z.discriminatedUnion("type", [
-  AnimatedBoxEntity,
+  AnimatedRectEntity,
   AnimatedTextEntity,
+  AnimatedStaggeredText,
   AnimatedEllipseEntity,
 ]);
 

app/src/primitives/Entities.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { Vec2 } from "./Values";
 import { Paint, TextPaint } from "./Paint";
 
-const EntityTypeOptions = ["Text", "Ellipse", "Box"] as const;
+const EntityTypeOptions = ["Text", "Ellipse", "Rect", "StaggeredText"] as const;
 
 export const EntityType = z.enum(EntityTypeOptions);
 
@@ -10,11 +10,29 @@ export const GeometryEntity = z.object({
   paint: Paint,
 });
 
-export const BoxEntity = GeometryEntity.extend({
-  type: z.literal(EntityType.Enum.Box),
+export const Transform = z.object({
+  skew: Vec2,
+  rotate: Vec2,
+  translate: Vec2,
+  scale: Vec2,
+});
+
+export const StaggeredText = z.object({
+  letter: z.object({
+    position: Vec2,
+    transform: Transform,
+    paint: TextPaint,
+  }),
+  text: z.string(),
+  type: z.literal(EntityType.Enum.StaggeredText),
+});
+
+export const RectEntity = GeometryEntity.extend({
+  type: z.literal(EntityType.Enum.Rect),
   size: Vec2,
   position: Vec2,
   origin: Vec2,
+  transform: z.nullable(Transform),
 });
 
 export const EllipseEntity = GeometryEntity.extend({
@@ -22,6 +40,7 @@ export const EllipseEntity = GeometryEntity.extend({
   radius: Vec2,
   position: Vec2,
   origin: Vec2,
+  transform: z.nullable(Transform),
 });
 
 export const TextEntity = z.object({
@@ -29,10 +48,11 @@ export const TextEntity = z.object({
   paint: TextPaint,
   origin: Vec2,
   text: z.string(),
+  transform: z.nullable(Transform),
 });
 
 export const Entity = z.discriminatedUnion("type", [
-  BoxEntity,
+  RectEntity,
   EllipseEntity,
   TextEntity,
 ]);