feat: add an interactive World Emoji Day noodle#3038
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe PR adds a dated Emoji Day animated noodle with lazy-loaded emoji sprites, viewport-aware animation controls, registry integration, and centred landing-page tagline text. ChangesEmoji Day noodle
Sequence Diagram(s)sequenceDiagram
participant LogoVue
participant EmojiThing
participant EmojiSprites
participant Browser
LogoVue->>EmojiThing: init(sizer, emojiSetImages)
EmojiThing->>EmojiSprites: create canvases and glyph state
Browser->>EmojiThing: requestAnimationFrame
EmojiThing->>EmojiSprites: update positions and transforms
LogoVue->>EmojiThing: start(), pause(), or destroy()
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/Noodle/EmojiDay/Logo.vue`:
- Around line 48-59: Update the emoji image-loading promise in the Logo
component so each Image rejects on load failure as well as resolving on load
success. Ensure the cached emojiSetImagesPromise is cleared when Promise.all
fails, allowing later intersections to retry, and handle the rejected promise in
the caller’s initialization flow around the intersection logic.
- Around line 18-66: Enable TypeScript in the component by changing the script
setup language to ts and add strict types for loadEmojiSetImages and its image
promise, the animation handle, observer, and sizer template reference. Update
related callbacks and state declarations in loadEmojiSetImages and the lifecycle
logic to remain type-safe without changing behavior.
- Line 10: Remove the touch-action: none declaration from the logo’s styling so
the full-width region preserves native page scrolling and pinch-zoom behavior.
- Around line 86-89: Update the branch that sets running to false in the Logo
component so it only calls handle.pause() when handle exists. Preserve the
running state update and avoid throwing for instances paused before image
loading completes or before intersection initialization.
In `@app/components/Noodle/index.ts`:
- Around line 71-72: Update the World Emoji Day noodle configuration in the
visible date block to remove the dateTo property, leaving only the 17 July 2026
date so the noodle is active on that day alone.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b1d33625-df1b-4175-9ef3-1b1e75c3b55d
⛔ Files ignored due to path filters (8)
app/components/Noodle/EmojiDay/emojisets/blue.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/cloud.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/earth.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/faces.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/gold.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/green.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/hearts.pngis excluded by!**/*.pngapp/components/Noodle/EmojiDay/emojisets/red.pngis excluded by!**/*.png
📒 Files selected for processing (4)
app/components/Landing/IntroHeader.vueapp/components/Noodle/EmojiDay/Logo.vueapp/components/Noodle/EmojiDay/emoji-thing.jsapp/components/Noodle/index.ts
|
The high tech cutting edge solution used to generate the vertical emoji PNGs: 
|
jviide
force-pushed
the
emoji-day
branch
2 times, most recently
from
4fce55d to
964e20b
Compare
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
@coderabbitai full review |
✅ Action performedFull review finished. Your plan includes PR reviews subject to rate limits. More reviews will be available in 13 minutes. |
|
I love this 🧡💐 Thanks for implementing your amazing animated version in here. As this supersedes my PR, I'm gonna close mine 👍 |
|
@trueberryless Thank you, without your design this wouldn't exist. |
|
After a very quick skim, just a little "don't forget": We should still add the Noodle to the archive page: docs |
trueberryless
left a comment
trueberryless
left a comment
There was a problem hiding this comment.
I took the liberty to update the PR so it's ready to merge 🏁
|
oops, nvm 😅 |
|
Fixed an issue where the logo couldn't discover its width on iOS. |
|
Thanks for your first contribution, @jviide! 🥳 We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role. |
6 participants
🔗 Linked issue
🧭 Context
Noodle World Emoji Day on 17. July. @trueberryless submitted #3029 to add a noodle to mark the occasion.
In the related Discord conversations @graphieros suggested animations.
📚 Description
This pull request adds an animated World Emoji Day noodle based on the design by @trueberryless.
The noodle is set to be shown on July 17-19, giving a couple of days of leeway similarly to the Tetris Day noodle.
Each character in "./npmx" is split into parts, and each contains a rough polyline approximating a part of the character. Each part is also associated with a bunch of emojis.
The emojis keep track of their speed and position. For each frame each emoji is attracted to the closest point of its corresponding polyline. Each emoji is also attracted to a position on their polyline as if they were evenly distributed on the polyline, sorted by their current closest point on it.
If emojis (within the same character) get too close, they repel each other. This calculation is O(n^2) relative to the number of emojis in that character, which should be relatively small.
The code also keeps track of the pointer position, and the pointer also repels the emojis.
Instead of using the browser's built-in emojis, for compatibility reasons the code uses vertical PNG spritesheets of emojis, one per emoji "category" (like "red", "blue", "faces" etc.) The images were produced by rendering the emojis into vertical strips on my local browser, then compressed and color-reduced with squoosh.app.
As a related change, the tagline in the IntroHeader component is now centered.