aarthalabs/Aarthalabs-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Smooth 5-second auto-rotation for Hero stories and ProductShowcase cards #1

Merged
aarthalabs merged 2 commits from feature/smooth-image-rotation into main 2026-07-12 21:22:44 +00:00
Conversation 0 Commits 2 Files Changed 10 +638 -116
aarthalabs commented 2026-07-12 21:20:23 +00:00
Owner
Copy Link

What changed

  • Hero: story backdrops auto-rotate every 5 seconds with 500ms fade transitions; the manual "Another story" button still works
  • ProductShowcase: the 3 product cards rotate every 5 seconds — the active card gets a mint ring highlight, inactive cards fade to 60% opacity on mobile
  • New components: StoryBackdrop, StoryOnboarding, CountUp, and lib/stories.ts
  • Includes a follow-up fix for a missing useEffect import in Sections.tsx

How to review visually

Check out this branch and run npm run dev, then watch the hero section and scroll to "The product" section.

Verified locally: page loads with no console errors, stories and cards rotate smoothly.

## What changed - **Hero**: story backdrops auto-rotate every 5 seconds with 500ms fade transitions; the manual "Another story" button still works - **ProductShowcase**: the 3 product cards rotate every 5 seconds — the active card gets a mint ring highlight, inactive cards fade to 60% opacity on mobile - New components: `StoryBackdrop`, `StoryOnboarding`, `CountUp`, and `lib/stories.ts` - Includes a follow-up fix for a missing `useEffect` import in `Sections.tsx` ## How to review visually Check out this branch and run `npm run dev`, then watch the hero section and scroll to "The product" section. Verified locally: page loads with no console errors, stories and cards rotate smoothly.
aarthalabs added 2 commits 2026-07-12 21:20:24 +00:00 
- Hero auto-rotates story backdrops every 5 seconds with 500ms fade transitions
- ProductShowcase cards rotate with mint ring highlight on the active card
- Inactive cards fade to 60% opacity on mobile, full opacity on desktop
- New components: StoryBackdrop, StoryOnboarding, CountUp, lib/stories
- Manual Another-story control still works

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ProductShowcase crashed with ReferenceError because useEffect was
used for the card rotation interval but not imported.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
aarthalabs merged commit 010231a4fe into main 2026-07-12 21:22:44 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
aarthalabs
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: aarthalabs/Aarthalabs-Frontend#1
No description provided.
Delete Branch "feature/smooth-image-rotation"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?