Landing Page Performance Polish#694
Conversation
Perf: remove 12 infinite framer-motion badge animations (hero bubbles cut entirely — redundant with the logo row), CSS-driven showcase progress bar, keep all four showcase tabs mounted with a CSS crossfade instead of AnimatePresence remount/re-decode, drop blur() glow filters, swap drop-shadow for box-shadow on screenshot frames, and autoplay all demo clips near-viewport with IO play/pause (faststart mp4s stream instantly). Layout: hero CTAs reduced to Mac + iOS buttons with quiet GitHub/Docs links, smaller headline/equation, device trio resized to stay fully on-screen on laptops, showcase tabs moved beside the section title, and the showcase copy column widened. Hygiene: untrack apps/web/.vite-dev.log and gitignore it; allow trycloudflare hosts on the dev server for preview tunnels. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
|
@copilot review but do not make fixes |
📝 WalkthroughWalkthroughThis PR removes the AgentBadge/HeroAgentBadges hero overlay feature and its usage in HomePage, tunes sizing/spacing in CompetitorEquation and Lede, replaces CSS filter-based shadows with boxShadow across DeviceComposition and ShipShowcase, reworks ShipShowcase's tab animation from framer-motion crossfades to CSS-driven transitions with a new keyframe, adjusts FeatureGrid autoplay timing, and updates Vite dev-server config and gitignore. ChangesMarketing Site Visual and Behavior Updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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
🧹 Nitpick comments (1)
apps/web/src/components/editorial/CompetitorEquation.tsx (1)
123-123: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueConsider switching this
drop-shadowfilter toboxShadowfor consistency.The PR's stated goal is replacing
drop-shadowfilters withboxShadowfor performance across screenshot/device frames (as done inDeviceComposition/ShipShowcase). This ADE icon still usesdrop-shadow-[0_14px_48px_rgba(124,58,237,0.6)], which remains a more expensive filter-based shadow.🤖 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 `@apps/web/src/components/editorial/CompetitorEquation.tsx` at line 123, The ADE icon styling in CompetitorEquation still uses a filter-based drop-shadow, which is inconsistent with the rest of the PR’s boxShadow migration. Update the icon’s className styling to use a boxShadow-based shadow instead of drop-shadow, following the same approach used in DeviceComposition and ShipShowcase, and keep the existing size/shape classes unchanged.
🤖 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 `@apps/web/src/components/editorial/ShipShowcase.tsx`:
- Around line 764-769: The stacked panels in ShipShowcase currently rely on DOM
paint order, so backward transitions can show the outgoing panel above the
incoming one during the fade. Update the panel container/className logic in the
ShipShowcase grid cell to assign an explicit z-index based on selection/order so
the active panel always renders on top during the 420ms transition, preventing
the incorrect crossfade.
- Around line 754-776: The current tab stack in ShipShowcase keeps every panel
mounted, so the hidden ImageStage media still gets eagerly fetched. Update the
tab rendering logic around TABS.map, active, and ImageStage so inactive tabs do
not receive their image src or are not rendered until first activation, then
remain mounted afterward to preserve the existing crossfade behavior.
---
Nitpick comments:
In `@apps/web/src/components/editorial/CompetitorEquation.tsx`:
- Line 123: The ADE icon styling in CompetitorEquation still uses a filter-based
drop-shadow, which is inconsistent with the rest of the PR’s boxShadow
migration. Update the icon’s className styling to use a boxShadow-based shadow
instead of drop-shadow, following the same approach used in DeviceComposition
and ShipShowcase, and keep the existing size/shape classes unchanged.
🪄 Autofix (Beta)
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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 42147f79-87bd-4bf9-8425-62e2d58268dc
⛔ Files ignored due to path filters (1)
apps/web/.vite-dev.logis excluded by!**/*.log
📒 Files selected for processing (11)
apps/web/.gitignoreapps/web/src/app/pages/HomePage.tsxapps/web/src/components/editorial/AgentBadge.tsxapps/web/src/components/editorial/CompetitorEquation.tsxapps/web/src/components/editorial/DeviceComposition.tsxapps/web/src/components/editorial/FeatureGrid.tsxapps/web/src/components/editorial/HeroAgentBadges.tsxapps/web/src/components/editorial/Lede.tsxapps/web/src/components/editorial/ShipShowcase.tsxapps/web/src/styles/globals.cssapps/web/vite.config.ts
💤 Files with no reviewable changes (2)
- apps/web/src/components/editorial/HeroAgentBadges.tsx
- apps/web/src/components/editorial/AgentBadge.tsx
There was a problem hiding this comment.
Pull request overview
quality · Phase 1 Thermo Dual-Review → Synthesize + Fix · COMPLETE
This PR polishes the marketing landing page in apps/web with a focus on smoother animations and reduced rendering cost (lighter shadows/filters, CSS-driven progress, and updated media playback behavior).
Changes:
- Reworks the ShipShowcase rotation/progress to use a keyed CSS animation and crossfade transitions (removing
framer-motionpresence transitions). - Adjusts landing-page hero/layout sizing and device compositions (replacing several
filtereffects withbox-shadow). - Improves demo-tile video playback behavior via IntersectionObserver tuning, and cleans up/ignores a committed Vite dev log.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| apps/web/vite.config.ts | Allows .trycloudflare.com hosts for Vite dev server. |
| apps/web/src/styles/globals.css | Adds @keyframes ship-progress for the showcase progress bar. |
| apps/web/src/components/editorial/ShipShowcase.tsx | Reworks showcase transitions/progress; replaces filter effects with box shadows. |
| apps/web/src/components/editorial/Lede.tsx | Tightens hero typography/spacing; refactors CTA layout. |
| apps/web/src/components/editorial/FeatureGrid.tsx | Starts demo video playback nearer the viewport; pauses on cleanup. |
| apps/web/src/components/editorial/DeviceComposition.tsx | Adjusts composition sizing/positioning; replaces filter shadows with box shadows. |
| apps/web/src/components/editorial/CompetitorEquation.tsx | Tweaks logo/icon sizing and typography for the hero row. |
| apps/web/src/app/pages/HomePage.tsx | Removes hero badge layer; tightens device section spacing. |
| apps/web/src/components/editorial/HeroAgentBadges.tsx | Removes hero agent badge component. |
| apps/web/src/components/editorial/AgentBadge.tsx | Removes agent badge component. |
| apps/web/.vite-dev.log | Deletes accidentally committed dev log. |
| apps/web/.gitignore | Ignores .vite-dev.log going forward. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {/* Stage — copy + big image deck. All four tabs stay mounted and stacked | ||
| in the same grid cell; switching only crossfades opacity, so the big | ||
| screenshots decode once instead of re-decoding on every tab change. */} | ||
| <div className="relative mt-[clamp(12px,1.6vw,26px)] grid min-h-[clamp(460px,48vw,740px)]"> | ||
| {TABS.map((item, index) => { |
There was a problem hiding this comment.
Applied in cd6d248 together with CodeRabbit's matching finding: inactive tabs no longer mount their media up front — first-activation mounting plus one-tab-ahead prefetch bounds the initial load while keeping switches decode-free.
Review feedback (Copilot + CodeRabbit): mounting all four tabs eagerly fetched every tab's images near-initial. Tabs now mount on first activation plus the next tab in rotation (prefetched a full 18s cycle ahead so crossfades stay decode-jank-free) and stay mounted after. Selected panel also gets z-index priority so backward tab switches layer the incoming panel above the outgoing fade. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cd6d248bf6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {mountedTabs.has(index) ? ( | ||
| <> | ||
| <CopyPanel tab={item} /> | ||
| <ImageStage tab={item} /> | ||
| </> | ||
| ) : null} |
There was a problem hiding this comment.
On a cold page load only tabs 0 and 1 are in mountedTabs, so clicking directly to "Pull requests" or "Work tools" makes that unmounted tab selected while this branch renders null for its content until the follow-up effect runs and starts fetching its images. That leaves the active showcase panel empty/late-loading for manual tab jumps, which regresses the previous behavior where the selected tab rendered immediately; mount the clicked index synchronously in selectTab or render the selected tab unconditionally.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Applied in c1bb0f5: the selected tab now renders unconditionally, so direct clicks to a not-yet-mounted tab show content immediately; the effect still persists it (plus the next tab) in mountedTabs.
Codex review: clicking straight to a not-yet-mounted tab rendered an empty panel until the mount effect ran. The selected tab now always renders; the effect still persists it (plus the next tab) in mountedTabs afterward. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@codex review |
|
Codex Review: Didn't find any major issues. You're on a roll. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Summary
Describe the change.
What Changed
Key files and behaviors.
Validation
How you tested.
Risks
Anything to watch.
Summary by CodeRabbit
New Features
Bug Fixes
Style
Greptile Summary
This PR polishes the web landing page presentation and preview behavior. The main changes are:
Confidence Score: 5/5
Safe to merge with minimal risk.
Changes are localized to landing-page presentation, animation timing, and local dev configuration; no correctness, accessibility, or security issues were identified.
No files require special attention.
What T-Rex did
Important Files Changed
Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram participant User participant HomePage participant Hero as Hero sections participant Showcase as ShipShowcase participant FeatureGrid User->>HomePage: Visit landing page HomePage->>Hero: Render CompetitorEquation, Lede, DeviceComposition Hero-->>User: Compact hero and device composition HomePage->>Showcase: Render showcase tabs Showcase->>Showcase: Mount active and next tab panels Showcase-->>User: Crossfade selected tab and CSS progress fill HomePage->>FeatureGrid: Render demo video grid FeatureGrid->>FeatureGrid: Play videos near viewport, pause offscreen FeatureGrid-->>User: Lightweight interactive demos%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% sequenceDiagram participant User participant HomePage participant Hero as Hero sections participant Showcase as ShipShowcase participant FeatureGrid User->>HomePage: Visit landing page HomePage->>Hero: Render CompetitorEquation, Lede, DeviceComposition Hero-->>User: Compact hero and device composition HomePage->>Showcase: Render showcase tabs Showcase->>Showcase: Mount active and next tab panels Showcase-->>User: Crossfade selected tab and CSS progress fill HomePage->>FeatureGrid: Render demo video grid FeatureGrid->>FeatureGrid: Play videos near viewport, pause offscreen FeatureGrid-->>User: Lightweight interactive demosReviews (3): Last reviewed commit: "ShipShowcase: render the selected tab un..." | Re-trigger Greptile