From 879bfdab68a214b5d51bbb901945f1e337ca9b4b Mon Sep 17 00:00:00 2001 From: ellipsis7449 Date: Tue, 21 Apr 2026 21:22:32 -0700 Subject: [PATCH 1/6] Aditi Animated Name Examples code --- static/examples/AditiAnimatedNameEnglish.wp | 49 +++++++++++++++++++++ static/examples/AditiAnimatedNameHindi.wp | 38 ++++++++++++++++ 2 files changed, 87 insertions(+) create mode 100644 static/examples/AditiAnimatedNameEnglish.wp create mode 100644 static/examples/AditiAnimatedNameHindi.wp diff --git a/static/examples/AditiAnimatedNameEnglish.wp b/static/examples/AditiAnimatedNameEnglish.wp new file mode 100644 index 000000000..e904c6ed4 --- /dev/null +++ b/static/examples/AditiAnimatedNameEnglish.wp @@ -0,0 +1,49 @@ +Aditi – Animated Name Example (English) +=== 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°) + })) + ]) \ No newline at end of file diff --git a/static/examples/AditiAnimatedNameHindi.wp b/static/examples/AditiAnimatedNameHindi.wp new file mode 100644 index 000000000..443cecaf8 --- /dev/null +++ b/static/examples/AditiAnimatedNameHindi.wp @@ -0,0 +1,38 @@ +Aditi – Animated Name Example (Hindi) +=== English/en +¶A small, simple animation of my name अदिती¶/hi +¶according to my identity. +- I like to observe people rather than talk in a group setting, +which is why अ¶/hi +¶is fading in and out. +- My favorite color is periwinkle, which is why दि¶/hi +¶is blinking +that color. +- अदिती¶/hi +¶is the name of the Hindu goddess of the earth, which is why +ती 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°)) + ]) \ No newline at end of file From 001a3d116be916e294ac9fd31a5a466da239fc7f Mon Sep 17 00:00:00 2001 From: ellipsis7449 Date: Tue, 21 Apr 2026 21:36:48 -0700 Subject: [PATCH 2/6] adding animated name examples to visualizations gallery --- src/examples/examples.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/examples/examples.ts b/src/examples/examples.ts index a806c417e..112521bf4 100644 --- a/src/examples/examples.ts +++ b/src/examples/examples.ts @@ -158,6 +158,8 @@ export function getExampleGalleries(locales: Locales): Gallery[] { 'Pumpkin', 'Size', 'FloatingFoods', + 'AditiAnimatedNameEnglish', + 'AditiAnimatedNameHindi' ], locales, ), From e031385f2d6692e44b052bde0aab3926815e97cf Mon Sep 17 00:00:00 2001 From: ellipsis7449 Date: Tue, 21 Apr 2026 21:40:04 -0700 Subject: [PATCH 3/6] changing project names to better fit built-in galleries --- static/examples/AditiAnimatedNameEnglish.wp | 2 +- static/examples/AditiAnimatedNameHindi.wp | 12 +++++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/static/examples/AditiAnimatedNameEnglish.wp b/static/examples/AditiAnimatedNameEnglish.wp index e904c6ed4..ea7faefba 100644 --- a/static/examples/AditiAnimatedNameEnglish.wp +++ b/static/examples/AditiAnimatedNameEnglish.wp @@ -1,4 +1,4 @@ -Aditi – Animated Name Example (English) +Animated Name (English) === 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 diff --git a/static/examples/AditiAnimatedNameHindi.wp b/static/examples/AditiAnimatedNameHindi.wp index 443cecaf8..eb7600566 100644 --- a/static/examples/AditiAnimatedNameHindi.wp +++ b/static/examples/AditiAnimatedNameHindi.wp @@ -1,16 +1,14 @@ -Aditi – Animated Name Example (Hindi) +Animated Name (Hindi) === English/en ¶A small, simple animation of my name अदिती¶/hi ¶according to my identity. -- I like to observe people rather than talk in a group setting, -which is why अ¶/hi +- I like to observe people rather than talk in a group setting, which is why अ¶/hi ¶is fading in and out. - My favorite color is periwinkle, which is why दि¶/hi -¶is blinking -that color. +¶is blinking that color. - अदिती¶/hi -¶is the name of the Hindu goddess of the earth, which is why -ती is spinning around and flashing blue and green.¶/en +¶is the name of the Hindu goddess of the earth, which is why ती¶/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 From f342a7d268e0dd26e256f724f85db68fc7bd58f1 Mon Sep 17 00:00:00 2001 From: ellipsis7449 Date: Wed, 22 Apr 2026 18:25:35 -0700 Subject: [PATCH 4/6] adding language tags --- static/examples/AditiAnimatedNameEnglish.wp | 54 +++++++++------------ 1 file changed, 23 insertions(+), 31 deletions(-) diff --git a/static/examples/AditiAnimatedNameEnglish.wp b/static/examples/AditiAnimatedNameEnglish.wp index ea7faefba..3a6c8b176 100644 --- a/static/examples/AditiAnimatedNameEnglish.wp +++ b/static/examples/AditiAnimatedNameEnglish.wp @@ -1,16 +1,19 @@ -Animated Name (English) +Animated Name (Hindi) === 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 +¶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 @@ -18,32 +21,21 @@ 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: 💃({ + Phrase('अ'/hi face: 'Pacifico' resting: 💃({ 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: 💃({ + } ⏳: 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°)) - 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°) - })) ]) \ No newline at end of file From f803e25d1845f10e2c0defdd896c166525ca389c Mon Sep 17 00:00:00 2001 From: ellipsis7449 Date: Sat, 25 Apr 2026 02:34:29 -0700 Subject: [PATCH 5/6] fixing and updating code here whoops --- static/examples/AditiAnimatedNameEnglish.wp | 54 ++++++++++++--------- static/examples/AditiAnimatedNameHindi.wp | 15 ++++-- 2 files changed, 41 insertions(+), 28 deletions(-) diff --git a/static/examples/AditiAnimatedNameEnglish.wp b/static/examples/AditiAnimatedNameEnglish.wp index 3a6c8b176..ea7faefba 100644 --- a/static/examples/AditiAnimatedNameEnglish.wp +++ b/static/examples/AditiAnimatedNameEnglish.wp @@ -1,19 +1,16 @@ -Animated Name (Hindi) +Animated Name (English) === English/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 +¶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 @@ -21,21 +18,32 @@ 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: 💃({ + Phrase('A' face: 'Pacifico' entering: 💃({ 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: 💃({ + }) 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°) + })) ]) \ No newline at end of file diff --git a/static/examples/AditiAnimatedNameHindi.wp b/static/examples/AditiAnimatedNameHindi.wp index eb7600566..3a6c8b176 100644 --- a/static/examples/AditiAnimatedNameHindi.wp +++ b/static/examples/AditiAnimatedNameHindi.wp @@ -1,13 +1,18 @@ Animated Name (Hindi) === English/en -¶A small, simple animation of my name अदिती¶/hi +¶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 अ¶/hi +- 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 दि¶/hi +- My favorite color is periwinkle, which is why¶/en +¶दि¶/hi ¶is blinking that color. -- अदिती¶/hi -¶is the name of the Hindu goddess of the earth, which is why ती¶/hi +-¶/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 From b72d742045a3ee1447d9e1fdc1d664500ed5638a Mon Sep 17 00:00:00 2001 From: ellipsis7449 Date: Mon, 27 Apr 2026 11:50:50 -0700 Subject: [PATCH 6/6] merging animated name examples into one file --- src/examples/examples.ts | 3 +- ...tedNameEnglish.wp => AditiAnimatedName.wp} | 44 ++++++++++++++++++- static/examples/AditiAnimatedNameHindi.wp | 41 ----------------- 3 files changed, 43 insertions(+), 45 deletions(-) rename static/examples/{AditiAnimatedNameEnglish.wp => AditiAnimatedName.wp} (57%) delete mode 100644 static/examples/AditiAnimatedNameHindi.wp diff --git a/src/examples/examples.ts b/src/examples/examples.ts index 112521bf4..2ef2a7317 100644 --- a/src/examples/examples.ts +++ b/src/examples/examples.ts @@ -158,8 +158,7 @@ export function getExampleGalleries(locales: Locales): Gallery[] { 'Pumpkin', 'Size', 'FloatingFoods', - 'AditiAnimatedNameEnglish', - 'AditiAnimatedNameHindi' + 'AditiAnimatedName' ], locales, ), diff --git a/static/examples/AditiAnimatedNameEnglish.wp b/static/examples/AditiAnimatedName.wp similarity index 57% rename from static/examples/AditiAnimatedNameEnglish.wp rename to static/examples/AditiAnimatedName.wp index ea7faefba..fd5e74fd1 100644 --- a/static/examples/AditiAnimatedNameEnglish.wp +++ b/static/examples/AditiAnimatedName.wp @@ -1,4 +1,4 @@ -Animated Name (English) +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 @@ -46,4 +46,44 @@ Group(Row() [ 50%: 🤪(rotation: -20°) 100%: 🤪(rotation: 20°) })) - ]) \ No newline at end of file + ]) +=== 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°)) + ]) diff --git a/static/examples/AditiAnimatedNameHindi.wp b/static/examples/AditiAnimatedNameHindi.wp deleted file mode 100644 index 3a6c8b176..000000000 --- a/static/examples/AditiAnimatedNameHindi.wp +++ /dev/null @@ -1,41 +0,0 @@ -Animated Name (Hindi) -=== English/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°)) - ]) \ No newline at end of file