1053 Animated Name Examples

src/examples/examples.ts

@@ -158,6 +158,7 @@ export function getExampleGalleries(locales: Locales): Gallery[] {
                 'Pumpkin',
                 'Size',
                 'FloatingFoods',
+                'AditiAnimatedName'
             ],
             locales,
         ),

static/examples/AditiAnimatedName.wp

@@ -0,0 +1,89 @@
+Animated Name
+=== English/en
+¶A small, simple animation of my name Aditi according to my identity.
+- I'm very passionate about writing, so the 'A' is written in an ink-like
+font and rotating to imitate writing the letter somewhat.
+- Aditi is the name of the Hindu goddess of the earth, which is why
+the 'd' is spinning around and flashing blue and green.
+- My favorite color is periwinkle, and I love to listen to and make music,
+which is why 'i' is represented by an eighth note in that color and
+jumping up and down as notes do.
+- Lastly, the 't' and 'i' are combined into another musical note (two
+eighth notes beamed together), just to emphasize that I like music and
+creatively write those two letters.¶/en
+
+¶This Group arranges each letter of my name into row format so they
+show up in a horizontal line, as you can see on stage.¶/en
+Group(Row() [
+		¶Each Phrase contains one symbol to represent a letter of my name.
+		This allows me to animate each letter individually! I'm using
+		resting Sequences so that the letters move while on stage.¶/en
+		Phrase('A' face: 'Pacifico' entering: 💃({
+					0%: 🤪(opacity: 0%)
+					25%: 🤪(opacity: 25%)
+					50%: 🤪(opacity: 50%)
+					75%: 🤪(opacity: 75%)
+					100%: 🤪()
+				}) resting: 💃({
+					0%: 🤪()
+					50%: 🤪(rotation: 180°)
+					100%: 🤪(rotation: 359°)
+				} ⏳: 1s) ⏳: 1s)
+		Phrase('d' face: 'Aclonica' resting: 💃({
+					0%: 🤪(color: 🌈(0.5 100 180°) flipx: ⊤)
+					50%: 🤪(color: 🌈(27% 112 267°))
+					75%: 🤪(color: 🌈(0.5 100 180°) flipx: ⊤)
+				} ⏳: 2s) style: 'straight' ⏳: 5s color: 🌈(0.5 100 180°))
+		Phrase('♪' resting: 💃({
+					0%: 🤪(offset: ⚽(📍(0m 0.5m 0m 📐: 0°) 💨(0m/s 0m/s 0°/s)))
+					25%: 🤪()
+					50%: 🤪(offset: 📍(0m 0m 0m))
+					75%: 🤪(offset: 📍(0m -0.5m 0m))
+					100%: 🤪()
+				}) ⏳: 5s color: 🌈(74% 100 292°))
+		Phrase('♫' resting: 💃({
+					0%: 🤪(rotation: 20°)
+					50%: 🤪(rotation: -20°)
+					100%: 🤪(rotation: 20°)
+				}))
+	])
+=== Hindi/en
+¶A small, simple animation of my name¶/en
+¶अदिती¶/hi
+¶according to my identity.
+- I like to observe people rather than talk in a group setting, which is why¶/en
+¶अ¶/hi
+¶is fading in and out.
+- My favorite color is periwinkle, which is why¶/en
+¶दि¶/hi
+¶is blinking that color.
+-¶/en
+¶अदिती¶/hi
+¶is the name of the Hindu goddess of the earth, which is why¶/en
+¶ती¶/hi
+¶is spinning around and flashing blue and green.¶/en
+
+¶This Group arranges each letter of my name into row format so they
+show up in a horizontal line, as you can see on stage.¶/en
+Group(Row() [
+		¶Each Phrase contains one symbol to represent a letter of my name.
+		This allows me to animate each letter individually! I'm using
+		resting Sequences so that the letters move while on stage.¶/en
+		Phrase('अ'/hi face: 'Pacifico' resting: 💃({
+					0%: 🤪(opacity: 0%)
+					25%: 🤪(opacity: 25%)
+					50%: 🤪(opacity: 50%)
+					75%: 🤪(opacity: 75%)
+					100%: 🤪()
+				} ⏳: 2s))
+		Phrase('दि'/hi resting: 💃({
+					0%: 🤪(color: 🌈(0% 0 0°))
+					50%: 🤪(color: 🌈(74% 100 291°))
+					100%: 🤪()
+				} ⏳: 2s) ⏳: 5s color: 🌈(74% 100 292°))
+		Phrase('ती'/hi face: 'Aclonica' resting: 💃({
+					0%: 🤪(color: 🌈(0.5 100 180°) flipx: ⊤)
+					50%: 🤪(color: 🌈(27% 112 267°))
+					75%: 🤪(color: 🌈(0.5 100 180°) flipx: ⊤)
+				} ⏳: 2s) style: 'straight' ⏳: 5s color: 🌈(0.5 100 180°))
+	])