web: port ClusterMAX quote carousel — logo strip + inline quote icon#394
web: port ClusterMAX quote carousel — logo strip + inline quote icon#394samharshe wants to merge 1 commit into
Conversation
Mirrors the carousel redesign from SemiAnalysisAI/ClusterMAX#201 so the two public sites stay consistent. - Carousel: replace the uppercase org-name pseudo-tab strip with a clickable infinite-marquee logo strip. Active logo lights up + gets bg-accent/60; inactive are grayscale @ 50% opacity. Falls back to uppercase name when a quote has no logo. Auto-rotates every 8s, pauses on hover/focus, respects prefers-reduced-motion. - Layout: split the bottom of the card into an active-author block (left, with logo + brand bar + name/title + external-link icon) and the existing 'See more supporters →' link (right), aligned to the same baseline. - Quote icon: moved out of the IntroSection heading and inline with the quotation paragraph itself, matching the ClusterMAX fix. - Unitalicized the long-form quote on /quotes (Sam's rule: long-form text should never be italic; carousel was already non-italic). - globals.css: add @Keyframes marquee + .animate-marquee helpers.
|
@samharshe is attempting to deploy a commit to the SemiAnalysisAI Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 2042ef8. Configure here.
| Each set carries `pr-5` so the trailing gap is baked into the 50% | ||
| translate, keeping the loop seamless. */} | ||
| <div className="overflow-hidden"> | ||
| <div className="flex w-max animate-marquee"> |
There was a problem hiding this comment.
Marquee and quote pause diverge
Medium Severity
The quote carousel's auto-advance and logo marquee animations pause independently. The quote rotation pauses on hover of the entire carousel, while the logo strip only pauses on hover or focus of the marquee element itself. This leads to scenarios where one component pauses while the other continues, creating an inconsistent user experience.
Reviewed by Cursor Bugbot for commit 2042ef8. Configure here.
| isActive ? 'grayscale-0 dark:invert' : 'grayscale dark:invert' | ||
| }`} | ||
| loading="lazy" | ||
| /> |
There was a problem hiding this comment.
Strip logos lack error fallback
Low Severity
The marquee strip renders sponsor logos with a plain img and no onError handler, while the active author row below uses CompanyLogo, which swaps to initials when the asset fails. A missing or broken file can show a broken image in the strip next to a correct fallback in the author block.
Reviewed by Cursor Bugbot for commit 2042ef8. Configure here.
| @media (prefers-reduced-motion: reduce) { | ||
| .animate-marquee { | ||
| animation: none; | ||
| } |
There was a problem hiding this comment.
Reduced motion ignores quote rotation
Medium Severity
The new prefers-reduced-motion rule disables only the logo marquee animation. The carousel still runs its 8s setInterval advance and 300ms opacity fades, so users who request reduced motion see a static strip but quotes keep changing—contrary to the PR’s stated reduced-motion support for the carousel.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 2042ef8. Configure here.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 participant
Mirrors the carousel redesign from SemiAnalysisAI/clustermax#201 so the two public sites stay consistent.
Changes
bg-accent/60; inactive are grayscale @ 50% opacity. Falls back to uppercase name when a quote has no logo. Auto-rotates every 8s, pauses on hover/focus, respectsprefers-reduced-motion.IntroSectionheading and inline with the quotation paragraph itself, matching the ClusterMAX fix./quotes(Sam's rule: long-form text should never be italic; carousel was already non-italic).@keyframes marquee+.animate-marqueehelpers (hover/focus pause, reduced-motion off).Files touched
4 files, +147/−52
packages/app/src/components/quote-carousel.tsxpackages/app/src/components/intro-section.tsxpackages/app/src/components/quotes/quotes-content.tsxpackages/app/src/app/globals.cssVerification
pnpm typecheck✅pnpm lint✅ (0 warnings, 0 errors)pnpm buildcompiled successfully; only failure was the unrelatedDATABASE_READONLY_URLruntime data-collection step (presentation-layer changes don't touch it — clean in Vercel where env vars are set)Branding notes
Kept InferenceX tokens (
text-brand/bg-brand/focus-visible:ring-brand/40) instead of ClusterMAX'sprimaryeverywhere, and kept InferenceX's analyticstrack()calls +ExternalLinkIcon+ sharedCompanyLogo/highlightBrandhelpers in@/components/quotes/quote-utils.Note
Low Risk
Presentation-only marketing UI (CSS + carousel components); no auth, data, or API changes.
Overview
Redesigns the home intro quote carousel to match the ClusterMAX carousel: the uppercase org-name tabs become a clickable infinite-marquee logo strip (duplicated row +
-50%translate inglobals.css), with active logos highlighted and inactive ones grayscale at reduced opacity, plus hover/focus pause andprefers-reduced-motionoff.Quote layout splits body and attribution: the quote icon moves from the
IntroSectionheading into the carousel quote line; author block (logo, bar, name/title) sits bottom-left with See more supporters bottom-right on one row. Long-form quotes on/quotesdrop italic styling for consistency.Reviewed by Cursor Bugbot for commit 2042ef8. Bugbot is set up for automated code reviews on this repo. Configure here.