diff --git a/src/examples/examples.ts b/src/examples/examples.ts index a806c417e..2ef2a7317 100644 --- a/src/examples/examples.ts +++ b/src/examples/examples.ts @@ -158,6 +158,7 @@ export function getExampleGalleries(locales: Locales): Gallery[] { 'Pumpkin', 'Size', 'FloatingFoods', + 'AditiAnimatedName' ], locales, ), diff --git a/static/examples/AditiAnimatedName.wp b/static/examples/AditiAnimatedName.wp new file mode 100644 index 000000000..fd5e74fd1 --- /dev/null +++ b/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°)) + ])