feat(background): shooting stars + animated beam refresh#487
Conversation
- shooting-stars: new SVG meteor-shower component with story and docs. Credited to Sudha Shrestha, based on Jeremboo's Animated Mesh Lines. Added to the June site changelog. - animated-beam: per-beam length/speed/width/brightness via CSS variables (deterministic, SSR-safe), with some fast bright zips. Dropped getBoundingClientRect and the resize listener for CSS-clipped lanes (fixed count, even crop on both edges); beams no longer peek before their delay. Doc rewritten with a per-component changelog. - collab-card: snug leading on the live label. - docs: document the per-component Changelog convention in contributing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughDeterministic animated-beam refactor to fixed 64 lanes, new ShootingStars client component seeded by ResizeObserver with CSS-driven animations and star recycling, small CollabCard styling tweaks, and documentation/changelog updates including per-component changelog guidance. ChangesBackground Animations & Styling
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsStopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a 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 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 35d1e9185a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const ro = new ResizeObserver(() => { | ||
| const r = el.getBoundingClientRect(); | ||
| dims.current = { w: r.width, h: r.height }; | ||
| }); |
There was a problem hiding this comment.
If this component mounts while its container has 0 width or height (for example inside a hidden tab, collapsed section, or a lazily revealed panel), seed() returns before creating any dots or shooting stars. The ResizeObserver then only updates dims.current, so when the container later becomes visible the sky remains empty until a remount; the observer needs to invoke the seeding path once a non-zero size is observed.
Useful? React with 👍 / 👎.
Deploying animata with
|
| Latest commit: |
af910a4
|
| Status: | ⚡️ Build in progress... |
If the container mounts at 0x0 (hidden tab, collapsed or lazy panel), seed() bailed early and the ResizeObserver only updated dims, so the sky stayed empty until a remount. Now it seeds once a non-zero size is first observed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2 participants
What
background/shooting-stars— new component. A dark sky where SVG light streaks shoot across at varied lengths, speeds and angles over a twinkling starfield. React spawns/recycles the streaks; CSS keyframes do the motion (no animation lib, no WebGL). Streaks spawn off the top/left edge and travel in. Ships with a story, docs, and a June site-changelog entry. Credited to Sudha Shrestha, based on Jeremboo's Animated Mesh Lines.background/animated-beam— refresh. Each beam's length, speed, width and brightness now come from a deterministic per-index hash (SSR-safe, no two alike), with ~30% running as fast bright zips. RemovedgetBoundingClientRectand the resize listener in favor of CSS-clipped fixed-width lanes, and centered the field so it crops evenly on both edges instead of cutting off on the right. Beams no longer peek at their resting spot before their delay. Docs rewritten with a per-component changelog.card/collab-card— snug leading on the live label (small style fix).## Changelogsection convention (dated entries for notable changes to existing components).Notes
prefers-reduced-motion.animated-beamis now a pure component (no runtime JS);shooting-starsneeds React for spawning but the motion is CSS.parallax-sliderandneon-cursor(still in progress on the working branch) — left for a separate PR, and their changelog entries were kept out so this one is self-consistent.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements
Documentation