Animated bubbles - #44
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR adds a repeating GSAP animation for three bubble elements in the About intro. It also disables build scripts for ChangesAbout intro animation
Build script restrictions
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/about/_components/animated-intro.tsxOops! Something went wrong! :( ESLint: 9.39.4 TypeError: Converting circular structure to JSON ... [truncated 613 characters] ... 261:25) 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/app/about/_components/animated-intro.tsx`:
- Around line 25-37: Update the useGSAP bubble animation so it checks the
existing prefers-reduced-motion setting before creating the repeating gsap
tween. When reduced motion is enabled, skip the tween and leave the
.things-bubbles elements visible; preserve the current animation for users
without that preference.
- Around line 78-81: Replace the three decorative div elements following
“Things” in the heading with span elements, preserving their existing className
values and visual behavior while ensuring valid phrasing-content markup.
🪄 Autofix
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 668e14a3-71de-4d56-a970-767e95d68a79
📒 Files selected for processing (2)
pnpm-workspace.yamlsrc/app/about/_components/animated-intro.tsx
| useGSAP(() => { | ||
| gsap.to(".things-bubbles", { | ||
| repeat: -1, | ||
| duration: 1.9, | ||
| autoAlpha: 0, | ||
| stagger: 0.7, | ||
| repeatDelay: 0.3, | ||
| // ease: "power4.out", | ||
| // ease: "back.out(1)", | ||
| ease: "slow(0.7,0.7,true)", | ||
| // yoyo: true | ||
| }); | ||
| }); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Honor prefers-reduced-motion in the bubble animation.
The new repeat: -1 tween runs for every user. It does not check the (prefers-reduced-motion: reduce) preference used by the existing intro animation. If the preference is enabled, skip this tween and keep the bubbles visible.
Proposed fix
useGSAP(() => {
+ const prefersReducedMotion = window.matchMedia(
+ "(prefers-reduced-motion: reduce)",
+ ).matches;
+ if (prefersReducedMotion) return;
+
gsap.to(".things-bubbles", {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useGSAP(() => { | |
| gsap.to(".things-bubbles", { | |
| repeat: -1, | |
| duration: 1.9, | |
| autoAlpha: 0, | |
| stagger: 0.7, | |
| repeatDelay: 0.3, | |
| // ease: "power4.out", | |
| // ease: "back.out(1)", | |
| ease: "slow(0.7,0.7,true)", | |
| // yoyo: true | |
| }); | |
| }); | |
| useGSAP(() => { | |
| const prefersReducedMotion = window.matchMedia( | |
| "(prefers-reduced-motion: reduce)", | |
| ).matches; | |
| if (prefersReducedMotion) return; | |
| gsap.to(".things-bubbles", { | |
| repeat: -1, | |
| duration: 1.9, | |
| autoAlpha: 0, | |
| stagger: 0.7, | |
| repeatDelay: 0.3, | |
| // ease: "power4.out", | |
| // ease: "back.out(1)", | |
| ease: "slow(0.7,0.7,true)", | |
| // yoyo: true | |
| }); | |
| }); |
🤖 Prompt for 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.
In `@src/app/about/_components/animated-intro.tsx` around lines 25 - 37, Update
the useGSAP bubble animation so it checks the existing prefers-reduced-motion
setting before creating the repeating gsap tween. When reduced motion is
enabled, skip the tween and leave the .things-bubbles elements visible; preserve
the current animation for users without that preference.
| Things | ||
| <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div> | ||
| <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div> | ||
| <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file='src/app/about/_components/animated-intro.tsx'
if rg -n -U --pcre2 '<h[1-6]\b[^>]*>(?:(?!</h[1-6]\b)[\s\S])*<div\b[^>]*things-bubbles' "$file"; then
echo "Invalid bubble div nesting remains." >&2
exit 1
fiRepository: skywalkerSam/skywalkerSam.dev
Length of output: 545
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file='src/app/about/_components/animated-intro.tsx'
printf 'File exists and size:\n'
wc -l "$file"
printf '\nRelevant markup around h2:\n'
sed -n '70,84p' "$file" | cat -n
printf '\nAll things-bubbles markup:\n'
rg -n 'things-bubbles|<h[1-6]|</h[1-6]' "$file"Repository: skywalkerSam/skywalkerSam.dev
Length of output: 1480
🌐 Web query:
MDN HTML heading elements h1 h2 h3 h4 h5 h6 valid content phrasing elements div default display block
💡 Result:
In HTML, heading elements (h1 through h6) represent section headings and are defined to contain only phrasing content [1][2]. The div element is classified as flow content but not phrasing content; therefore, placing a div inside any heading element is invalid markup [3][4][5]. Key points regarding these elements: 1. Valid Content: Heading elements (h1–h6) must only contain phrasing content (e.g., span, em, strong, text nodes) [1][6]. Because div is not phrasing content, it is strictly prohibited inside headings [3][5]. 2. Default Display: By default, heading elements are block-level elements [1][2]. They create a block-level box in the layout, starting on a new line and occupying the full available width [1][2]. 3. Recommended Alternative: If you need to apply different styles to parts of a heading, the recommended approach is to use span elements instead of div [3][4]. Since span is phrasing content, it is valid within headings [4]. You can then use CSS to style the span as display: block if you require it to behave like a block-level element for layout purposes, while maintaining semantic validity [4]. While some browsers may render a div inside a heading without immediate visual errors, such structures fail HTML validation and are not compliant with web standards [4][5].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements
- 2: https://github.com/mdn/content/blob/main/files/en-us/web/html/reference/elements/heading_elements/index.md
- 3: https://stackoverflow.com/questions/66084722/does-html5-allow-a-block-level-element-like-div-inside-a-heading-like-h1
- 4: Allow div elements in h1, h2, h3, h4, h5, h6 elements whatwg/html#6503
- 5: https://css-tricks.com/can-include-a-certain-html-element-within-another-certain-html-element/
- 6: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories
Use phrasing elements inside the heading.
The <h2> contains <div> elements. inline-block changes CSS display, but it does not make a <div> valid inside a heading. Replace each bubble with a decorative <span>.
Proposed fix
- <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div>
- <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div>
- <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div>
+ <span aria-hidden="true" className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500" />
+ <span aria-hidden="true" className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500" />
+ <span aria-hidden="true" className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Things | |
| <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div> | |
| <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div> | |
| <div className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500"></div> | |
| Things | |
| <span aria-hidden="true" className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500" /> | |
| <span aria-hidden="true" className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500" /> | |
| <span aria-hidden="true" className="things-bubbles ml-1.5 inline-block h-4 w-4 rounded-sm bg-sky-500" /> |
🤖 Prompt for 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.
In `@src/app/about/_components/animated-intro.tsx` around lines 78 - 81, Replace
the three decorative div elements following “Things” in the heading with span
elements, preserving their existing className values and visual behavior while
ensuring valid phrasing-content markup.
1 participant
Summary by CodeRabbit
New Features
Style