feat(home): add scroll-reveal animations to homepage sections by PRODHOSH · Pull Request #224 · vishnukothakapu/linkid

PRODHOSH · 2026-05-25T11:14:54Z

🏢 organization

girlscript summer of code 2026 (gssoc'26)
nexus spring of code 2026 (nsoc'26)
none (general contribution)

📋 summary

add a small scroll reveal wrapper and use it on each home section so they fade in on scroll

🔗 related issue

closes #142

🔄 type of change

✅ checklist

code quality

my branch is up to date with main
npm run lint passes with no errors
npm run build completes successfully
no console.log statements left in the code
no new typescript errors introduced

changes

i have manually tested my changes in the browser
i tested on both desktop and mobile viewport
i tested in both light mode and dark mode (if ui change)
i tested edge cases (empty states, invalid inputs, long strings)

documentation

i have updated the readme if needed
i have added comments to complex logic

Summary by CodeRabbit

New Features
- Scroll-triggered reveal animations added to key page sections (stats, features, demo, call-to-action)
- Section items animate sequentially with staggered delays to improve visual hierarchy
- Accessibility-friendly: respects users’ reduced-motion preference and falls back to immediate visibility when enabled

vercel · 2026-05-25T11:14:59Z

@PRODHOSH is attempting to deploy a commit to the vishnukothakapu's projects Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-05-25T11:15:05Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4e6f51ac-327d-4cef-9ff0-dbe203a62960

📥 Commits

Reviewing files that changed from the base of the PR and between 03dc352 and b96ab1f.

📒 Files selected for processing (1)

app/page.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

app/page.tsx

📝 Walkthrough

Walkthrough

A new client ScrollReveal component detects prefers-reduced-motion and uses an IntersectionObserver to toggle a visible state; it’s applied across the homepage to reveal stats items (with per-item delays), the Features header, Demo content, and the Call To Action on scroll.

Changes

Homepage Scroll Reveal Animations

Layer / File(s)	Summary
ScrollReveal component definition `app/components/ScrollReveal.tsx`	New client component `ScrollReveal` with `children`, optional `className`, and optional `delay`. Checks `prefers-reduced-motion`, uses an `IntersectionObserver` to set visible state on intersection, and renders a wrapper `<div>` with dynamic `transitionDelay` and classes that toggle fade/translate states.
Homepage integration (import + stats) `app/page.tsx`	Adds `ScrollReveal` import and wraps the stats rendering loop so each `StatCard` is inside a `ScrollReveal` with a computed delay (key moved to the wrapper).
Features header reveal `app/page.tsx`	Wraps the Features `SectionHeader` in `ScrollReveal` to animate when scrolled into view.
Demo section reveal `app/page.tsx`	Wraps the Demo section header and `DemoRow` content in `ScrollReveal`, replacing the prior static structure.
Call To Action reveal `app/page.tsx`	Wraps the Call To Action main content block in `ScrollReveal` to reveal on intersection.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

vishnukothakapu/linkid#248: Modifies app/page.tsx styling for the same homepage sections that are wrapped with ScrollReveal here.

Suggested labels

type:feature

Suggested reviewers

vedhapprakashni

Poem

🐰
I peek and nudge as sections wake and slide,
A gentle drift, a soft reveal applied.
For quiet eyes, I stay my quiet part,
Then tiptoe in to brighten scrolling hearts.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: adding scroll-reveal animations to homepage sections, which matches the core functionality implemented.
Linked Issues check	✅ Passed	The pull request successfully implements all coding requirements from issue `#142`: a lightweight ScrollReveal component using IntersectionObserver, applied to major homepage sections with fade and delay animations, meeting all acceptance criteria.
Out of Scope Changes check	✅ Passed	All changes are directly within scope: the new ScrollReveal component and its integration into homepage sections align with issue `#142` requirements; no extraneous modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

app/components/ScrollReveal.tsx (1)
16-20: ⚡ Quick win

ESLint false positive—suppress with an explanatory comment.

The ESLint warning about synchronous setState in an effect is a false positive here. Checking prefers-reduced-motion (an external browser API) and syncing React state is a valid useEffect use case. Because this is a Next.js client component that pre-renders on the server, you cannot move the check to useState(() => ...) lazy initialization (window is unavailable during SSR).
🔇 Suppress the warning with an inline comment
   useEffect(() => {
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing external media query state on mount; alternative (lazy useState init) breaks SSR
       setVisible(true);
       return;
     }
🤖 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 `@app/components/ScrollReveal.tsx` around lines 16 - 20, The ESLint warning
about setting state synchronously inside the useEffect in the ScrollReveal
component is a false positive; suppress it by adding an inline ESLint disable
comment immediately above the line that calls setVisible(true) (the useEffect
block that checks window.matchMedia("(prefers-reduced-motion:
reduce)").matches), and include a brief explanatory comment that this check runs
only on the client (window unavailable during SSR) so the state update is
intentional and safe; ensure the comment references the rule being disabled
(e.g., the react/no-did-mount-set-state or similar) and mentions Next.js
client-only behavior to document why suppression is needed.

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

Nitpick comments:
In `@app/components/ScrollReveal.tsx`:
- Around line 16-20: The ESLint warning about setting state synchronously inside
the useEffect in the ScrollReveal component is a false positive; suppress it by
adding an inline ESLint disable comment immediately above the line that calls
setVisible(true) (the useEffect block that checks
window.matchMedia("(prefers-reduced-motion: reduce)").matches), and include a
brief explanatory comment that this check runs only on the client (window
unavailable during SSR) so the state update is intentional and safe; ensure the
comment references the rule being disabled (e.g., the
react/no-did-mount-set-state or similar) and mentions Next.js client-only
behavior to document why suppression is needed.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 395ba3bb-7a00-4a7d-bf5e-d39ea26e1d15

📥 Commits

Reviewing files that changed from the base of the PR and between 5e5e434 and 938e141.

📒 Files selected for processing (2)

app/components/ScrollReveal.tsx
app/page.tsx

PRODHOSH · 2026-05-25T11:25:30Z

hii @vishnukothakapu

i’ve raised this pr under gssoc’26.
please review my pr and assign the appropriate labels based on the gssoc scoring system attached below.

thanks 🙌

vercel · 2026-05-25T12:51:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
linkid	Ready	Preview, Comment	Jun 10, 2026 2:56pm

vedhapprakashni · 2026-05-27T13:33:57Z

hi @PRODHOSH. pls resolve conflicts

vedhapprakashni · 2026-06-06T15:02:25Z

hey @PRODHOSH pls resolve conflicts

PRODHOSH · 2026-06-10T14:00:28Z

resolved all the merge conflicts @vedhapprakashni
pls check now

feat(home): add scroll-reveal animations to homepage sections

938e141

coderabbitai Bot reviewed May 25, 2026

View reviewed changes

vishnukothakapu added level:intermediate type:design labels May 25, 2026

vishnukothakapu requested a review from vedhapprakashni May 25, 2026 12:52

vishnukothakapu assigned PRODHOSH May 25, 2026

vercel Bot deployed to Preview May 25, 2026 12:52 View deployment

vishnukothakapu added the gssoc:approved label May 27, 2026

Merge branch 'main' into feat/scroll-reveal-home

03dc352

vercel Bot deployed to Preview June 3, 2026 13:12 View deployment

vedhapprakashni added the mentor:vedhapprakashni label Jun 6, 2026

Merge branch 'main' into feat/scroll-reveal-home

b96ab1f

vercel Bot deployed to Preview June 10, 2026 14:56 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(home): add scroll-reveal animations to homepage sections#224

feat(home): add scroll-reveal animations to homepage sections#224
PRODHOSH wants to merge 3 commits into
vishnukothakapu:mainfrom
PRODHOSH:feat/scroll-reveal-home

PRODHOSH commented May 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented May 25, 2026

Uh oh!

coderabbitai Bot commented May 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

PRODHOSH commented May 25, 2026

Uh oh!

vercel Bot commented May 25, 2026 •

edited

Loading

Uh oh!

vedhapprakashni commented May 27, 2026

Uh oh!

vedhapprakashni commented Jun 6, 2026

Uh oh!

PRODHOSH commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

PRODHOSH commented May 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🏢 organization

📋 summary

🔗 related issue

🔄 type of change

✅ checklist

Summary by CodeRabbit

Uh oh!

vercel Bot commented May 25, 2026

Uh oh!

coderabbitai Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

PRODHOSH commented May 25, 2026

Uh oh!

vercel Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vedhapprakashni commented May 27, 2026

Uh oh!

vedhapprakashni commented Jun 6, 2026

Uh oh!

PRODHOSH commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

PRODHOSH commented May 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 25, 2026 •

edited

Loading

vercel Bot commented May 25, 2026 •

edited

Loading