Skip to content

Animated bubbles #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skywalkerSam wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Animated bubbles #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
allowBuilds:
sharp: false
unrs-resolver: false
19 changes: 18 additions & 1 deletion src/app/about/_components/animated-intro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,20 @@ export default function AnimatedIntro() {
);
}, []);

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
});
});
Comment on lines +25 to +37

@coderabbitai coderabbitai Bot Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

Suggested change
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.


return (
<div className="flex min-h-screen items-center justify-center px-3">
<div className="hero-text">
Expand Down Expand Up @@ -61,7 +75,10 @@ export default function AnimatedIntro() {
</span>
</h2>
<h2>
Things<span className="text-sky-500">.</span>
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>
Comment on lines +78 to +81

@coderabbitai coderabbitai Bot Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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
fi

Repository: 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:

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.

Suggested change
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.

</h2>
</div>
</div>
Expand Down