Feature/064 cartes shader et bloc tarifs - #64
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 14 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughLa landing page utilise de nouvelles cartes de fonctionnalités avec shaders Warp et de nouvelles cartes tarifaires. Deux hooks contrôlent la visibilité et le mouvement réduit. Les règles Git excluent les artefacts locaux. ChangesCartes de la landing page
Exclusions de l’espace de travail
Estimated code review effort: 3 (Moderate) | ~25 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
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 |
There was a problem hiding this comment.
Pull request overview
Cette PR introduit des cartes “shader” (fond animé WebGL) pour la section fonctionnalités de la landing, et refactorise l’aperçu des tarifs en extrayant une carte dédiée, tout en ajoutant des hooks clients utilitaires pour gérer l’apparition au scroll et la préférence système “réduire les animations”.
Changes:
- Ajout de
@paper-design/shaders-reactet de sa dépendance@paper-design/shaders. - Création de hooks clients
useInViewetusePrefersReducedMotionpour piloter l’animation et le rendu conditionnel. - Refactor de la landing : extraction
PricingPlanCard+ remplacement des anciennes feature cards parFeatureShaderCard.
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Ajoute la dépendance @paper-design/shaders-react. |
| package-lock.json | Verrouille @paper-design/shaders-react et @paper-design/shaders en 0.0.78. |
| lib/hooks/use-prefers-reduced-motion.ts | Nouveau hook client pour détecter prefers-reduced-motion. |
| lib/hooks/use-in-view.ts | Nouveau hook client basé sur IntersectionObserver (une seule fois). |
| components/landing/pricing-preview-section.tsx | Remplace le markup inline par le composant PricingPlanCard. |
| components/landing/pricing-plan-card.tsx | Nouvelle carte tarifaire client avec animation d’apparition au scroll. |
| components/landing/features-section.tsx | Remplace les anciennes cartes features par FeatureShaderCard et ajuste la grille. |
| components/landing/feature-shader-card.tsx | Nouvelle carte feature avec shader Warp + fallback gradient + reduced motion. |
| .gitignore | Ignore tasks/ (notes locales). |
Suppressed comments (2)
components/landing/feature-shader-card.tsx:29
- Même point ici : couleurs HSL en dur → non aligné sur les tokens du thème. Préférer des couleurs basées sur les variables CSS (
--primary,--ring,--card, etc.).
shape: "stripes" as const,
shapeScale: 0.12,
colors: ["hsl(200, 68%, 16%)", "hsl(186, 75%, 28%)", "hsl(174, 60%, 55%)", "hsl(166, 58%, 76%)"],
},
components/landing/feature-shader-card.tsx:39
- Même point ici : couleurs HSL en dur → non aligné sur les tokens du thème. Préférer des couleurs basées sur les variables CSS (
--primary,--ring,--card, etc.).
shape: "checks" as const,
shapeScale: 0.11,
colors: ["hsl(178, 72%, 13%)", "hsl(166, 78%, 30%)", "hsl(158, 58%, 54%)", "hsl(150, 52%, 74%)"],
},
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| shape: "checks" as const, | ||
| shapeScale: 0.09, | ||
| colors: ["hsl(190, 70%, 14%)", "hsl(173, 80%, 30%)", "hsl(168, 62%, 52%)", "hsl(160, 55%, 72%)"], | ||
| }, |
| const FALLBACK_GRADIENTS = [ | ||
| "linear-gradient(135deg, hsl(190 70% 14%), hsl(173 80% 30%) 55%, hsl(160 55% 72%))", | ||
| "linear-gradient(135deg, hsl(200 68% 16%), hsl(186 75% 28%) 55%, hsl(166 58% 76%))", | ||
| "linear-gradient(135deg, hsl(178 72% 13%), hsl(166 78% 30%) 55%, hsl(150 52% 74%))", | ||
| ] as const; |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
lib/hooks/use-in-view.ts (1)
43-56: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winLe hook ne suspend pas les rendus une fois la carte quittée.
Le docstring (lignes 20-22) annonce que ce hook sert à « suspendre les rendus coûteux (shaders WebGL) tant qu'ils sont hors écran ». Mais l'implémentation appelle
observer.disconnect()dès la première intersection (ligne 48) et ne remet jamaisisInViewàfalse. Une fois qu'une carte a été vue une fois, elle reste considérée « en vue » pour toujours.Dans
components/landing/feature-shader-card.tsx(lignes 77, 88-103), ce hook contrôle le montage du composantWarp(canvas WebGL animé en continu). Avec ce comportement, dès qu'une carte de fonctionnalité a été vue une fois, son shader continue de s'exécuter indéfiniment, même après un défilement loin de la carte. Avec jusqu'à 6 cartes sur la page, cela peut maintenir 6 canvases WebGL actifs en permanence, ce qui va à l'encontre de l'objectif de performance énoncé dans le docstring.Ajoutez une option pour permettre une observation continue, utilisée par les consommateurs qui doivent suspendre un rendu coûteux.
♻️ Proposition : ajouter une option `once`
interface UseInViewOptions { /** Marge de déclenchement autour du viewport, syntaxe CSS. */ rootMargin?: string; /** Part de l'élément visible avant déclenchement, entre 0 et 1. */ threshold?: number; + /** Si `false`, l'état suit les entrées/sorties du viewport en continu. Par défaut `true`. */ + once?: boolean; } export function useInView<T extends HTMLElement>({ rootMargin = "0px 0px -10% 0px", threshold = 0.15, + once = true, }: UseInViewOptions = {}): UseInViewResult<T> { const ref = useRef<T>(null); const [isInView, setIsInView] = useState(false); useEffect(() => { const element = ref.current; if (!element) return; if (typeof IntersectionObserver === "undefined") { setIsInView(true); return; } const observer = new IntersectionObserver( (entries) => { const entry = entries[0]; - if (entry?.isIntersecting) { - setIsInView(true); - observer.disconnect(); - } + if (!entry) return; + setIsInView(entry.isIntersecting); + if (entry.isIntersecting && once) { + observer.disconnect(); + } }, { rootMargin, threshold }, ); observer.observe(element); return () => observer.disconnect(); - }, [rootMargin, threshold]); + }, [rootMargin, threshold, once]); return { ref, isInView }; }Puis, dans
FeatureShaderCard, appelezuseInView<HTMLElement>({ once: false })pour suspendre réellement le shader hors écran.🤖 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 `@lib/hooks/use-in-view.ts` around lines 43 - 56, Update useInView so its observer is one-shot only when the new once option is enabled; otherwise keep observing, update isInView to false when the element leaves the viewport, and disconnect only during cleanup. Preserve the existing default behavior for current consumers, and update FeatureShaderCard to call useInView with once: false so its shader pauses outside the viewport.
🤖 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 @.gitignore:
- Around line 61-63: Update the tasks ignore pattern in .gitignore to anchor it
to the repository root by adding the leading slash, so only the root-level tasks
directory is ignored and nested directories named tasks remain trackable.
---
Nitpick comments:
In `@lib/hooks/use-in-view.ts`:
- Around line 43-56: Update useInView so its observer is one-shot only when the
new once option is enabled; otherwise keep observing, update isInView to false
when the element leaves the viewport, and disconnect only during cleanup.
Preserve the existing default behavior for current consumers, and update
FeatureShaderCard to call useInView with once: false so its shader pauses
outside the viewport.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6ab00300-c769-4d4d-a31f-8a46bb935562
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
.gitignorecomponents/landing/feature-shader-card.tsxcomponents/landing/features-section.tsxcomponents/landing/pricing-plan-card.tsxcomponents/landing/pricing-preview-section.tsxlib/hooks/use-in-view.tslib/hooks/use-prefers-reduced-motion.tspackage.json
Summary by CodeRabbit