Conversation
…yling with custom properties, Convex schema, and an AI schema display component.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideIntroduces a new immersive 3D, motion‑driven landing hero plus scroll/hover animations across feature and stats sections, refines Tailwind v4/CSS glassmorphism utilities, simplifies the Convex schema to rely on Mastra’s exported workflow snapshots table, hardens the AI schema display’s description rendering, and bumps react-resizable-panels. Sequence diagram for LandingHero parallax and entry animationssequenceDiagram
actor User
participant Window
participant LandingHero
participant FramerMotion
participant GSAP
User->>LandingHero: Mount_component
LandingHero->>GSAP: useGSAP_init()
GSAP->>GSAP: ensureGsapRegistered
GSAP->>LandingHero: Timeline_plays
Note over GSAP,LandingHero: Animate .hero-3d-node (Big_Bang_entry)
GSAP->>LandingHero: Animate .hero-text-shimmer
LandingHero->>Window: addEventListener(mousemove, handleMouseMove)
loop On_mouse_move
User->>Window: mousemove_event
Window->>LandingHero: handleMouseMove(event)
LandingHero->>LandingHero: Compute_relative_x_y
LandingHero->>FramerMotion: mouseX.set(x), mouseY.set(y)
FramerMotion->>FramerMotion: update_rotateX_rotateY_springs
FramerMotion->>LandingHero: re-render_motion.divs
end
User-->>LandingHero: Unmount_component
LandingHero->>Window: removeEventListener(mousemove, handleMouseMove)
ER diagram for updated Convex schema with Mastra workflow snapshotserDiagram
mastra_threads {
string system_fields
}
mastra_messages {
string system_fields
}
mastra_runs {
string system_fields
}
mastra_vector_indexes {
string system_fields
}
mastra_vectors {
string system_fields
}
mastra_documents {
string system_fields
}
mastra_workflows {
string system_fields
}
%% All tables are defined via Mastra's exported schema;
%% mastra_workflows replaces the previous local mastraWorkflowSnapshotsTable
Class diagram for updated landing page React components and animationsclassDiagram
class LandingHero {
+sectionRef: Ref_HTMLElement
+containerRef: Ref_HTMLDivElement
+mouseX: MotionValue_number
+mouseY: MotionValue_number
+rotateX: MotionValue_number
+rotateY: MotionValue_number
+layer1RotateX: MotionValue_number
+layer1RotateY: MotionValue_number
+useEffect_handleMouseMove()
+useGSAP_entryTimeline()
+render(): JSX_Element
}
class NetworkBackground {
+render(): JSX_Element
}
class AnimatedOrbitalLogo {
+size: number
+className: string
+render(): JSX_Element
}
class AnimatedQuantumLattice {
+size: number
+className: string
+animate: boolean
+render(): JSX_Element
}
class AnimatedNeuralMesh {
+size: number
+className: string
+animate: boolean
+render(): JSX_Element
}
class LandingFeatures {
+render(): JSX_Element
}
class LandingStats {
+render(): JSX_Element
}
class SchemaDisplay {
+title: string
+description: string_optional
+parameters: Array_Parameter_optional
+render(): JSX_Element
}
class SchemaDisplayParameter {
+description: string_optional
+render(): JSX_Element
}
class SchemaDisplayProperty {
+description: string_optional
+render(): JSX_Element
}
class FramerMotionLib {
<<library>>
+motion
+useMotionValue(initial: number)
+useSpring(value: MotionValue_number, config: SpringConfig)
+useTransform(value: MotionValue_number, inputRange: Array_number, outputRange: Array_number)
}
class GSAPLib {
<<library>>
+timeline(): Timeline
+set(target: any, vars: any)
}
class CSSUtilities {
<<styles>>
+mesh-gradient
+stage-3d
+layer-3d
+glass-ultra
+glass-morphism
}
LandingHero --> NetworkBackground : uses
LandingHero --> AnimatedOrbitalLogo : uses
LandingHero --> AnimatedQuantumLattice : uses
LandingHero --> AnimatedNeuralMesh : uses
LandingHero --> FramerMotionLib : uses
LandingHero --> GSAPLib : uses
LandingHero --> CSSUtilities : uses
LandingFeatures --> CSSUtilities : uses
LandingStats --> CSSUtilities : uses
SchemaDisplay --> SchemaDisplayParameter : composes
SchemaDisplay --> SchemaDisplayProperty : composes
SchemaDisplay ..> CSSUtilities : uses
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
🤖 Hi @ssdeanx, I've received your request, and I'm working on it now! You can track my progress in the logs for more details. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request delivers a significant overhaul to the application's landing page, introducing a highly interactive and visually appealing user interface. It leverages framer-motion for dynamic animations and 3D parallax effects, complemented by a comprehensive Tailwind v4 styling system that includes custom properties and sophisticated glassmorphism. Additionally, the PR streamlines the Convex database schema integration, enhances an existing AI schema display component, and cleans up outdated task documentation, contributing to a more modern and maintainable codebase. Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review infoConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (12)
Summary by CodeRabbit
WalkthroughThis PR consolidates documentation updates, landing page enhancements, and minor technical adjustments. It removes outdated task specifications, adds Convex guidelines, enhances landing components with framer-motion animations and 3D effects, updates CSS utilities, simplifies schema imports, and standardizes Boolean checks in display components. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
✨ Finishing Touches
🧪 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 |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 5 issues, and left some high level feedback:
- In
LandingHero, the new GSAP/Framer 3D and mesh animations no longer respectprefers-reduced-motion; consider reintroducing the reduced-motion guard so users who opt out of animation get a static hero state. - The global
mousemovelistener inLandingHeroruns for the entire window; consider scoping it to the hero container (or throttling/debouncing) to reduce unnecessary work when the hero isn't hovered or visible. - In
convex/schema.ts, the table key was changed from a snapshots-specific name tomastra_workflows; double-check that this new name matches existing table usage and any expectedmastra_workflow_snapshotsnaming to avoid mismatches in queries or migrations.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `LandingHero`, the new GSAP/Framer 3D and mesh animations no longer respect `prefers-reduced-motion`; consider reintroducing the reduced-motion guard so users who opt out of animation get a static hero state.
- The global `mousemove` listener in `LandingHero` runs for the entire window; consider scoping it to the hero container (or throttling/debouncing) to reduce unnecessary work when the hero isn't hovered or visible.
- In `convex/schema.ts`, the table key was changed from a snapshots-specific name to `mastra_workflows`; double-check that this new name matches existing table usage and any expected `mastra_workflow_snapshots` naming to avoid mismatches in queries or migrations.
## Individual Comments
### Comment 1
<location path="app/components/landing-hero.tsx" line_range="29-38" />
<code_context>
- const [error, setError] = useState<Error | null>(null)
- const unsubscribeRef = useRef<(() => void) | null>(null)
-
- useEffect(() => {
- const handleEvent = (event: HarnessEvent) => {
- // Map event to AgentSandboxData updates
</code_context>
<issue_to_address>
**suggestion (performance):** Global `window` mousemove listener for parallax is broader than needed and may impact performance.
Because the listener is on `window`, the parallax math runs on every mousemove, even when the cursor isn’t near the hero, increasing unnecessary work. Since you already have `containerRef`, attach the listener to `containerRef.current` (e.g., via `onMouseMove` or a direct DOM listener) so it only runs when the pointer is over the hero.
</issue_to_address>
### Comment 2
<location path=".github/instructions/convex.instructions.md" line_range="76" />
<code_context>
+| Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions the return `undefined` or do not return will return `null` when called from a client. Use `null` instead. |
</code_context>
<issue_to_address>
**issue (typo):** Replace "Functions the return" with "Functions that return" for correct grammar.
In this row, update the text to "Functions that return `undefined`" to correct the grammar.
```suggestion
| Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions that return `undefined` or do not return will return `null` when called from a client. Use `null` instead. |
```
</issue_to_address>
### Comment 3
<location path=".github/instructions/convex.instructions.md" line_range="153-156" />
<code_context>
+- `numItems`: the maximum number of documents to return (the validator is `v.number()`)
+- `cursor`: the cursor to use to fetch the next page of documents (the validator is `v.union(v.string(), v.null())`)
+- A query that ends in `.paginate()` returns an object that has the following properties:
+- page (contains an array of documents that you fetches)
+- isDone (a boolean that represents whether or not this is the last page of documents)
+- continueCursor (a string that represents the cursor to use to fetch the next page of documents)
</code_context>
<issue_to_address>
**issue (typo):** Fix the phrase "that you fetches" to be grammatically correct.
In the bullet, replace "an array of documents that you fetches" with "an array of documents that you fetch" or "an array of documents that you've fetched" to fix the grammar.
```suggestion
- A query that ends in `.paginate()` returns an object that has the following properties:
- page (contains an array of documents that you've fetched)
- isDone (a boolean that represents whether or not this is the last page of documents)
- continueCursor (a string that represents the cursor to use to fetch the next page of documents)
```
</issue_to_address>
### Comment 4
<location path=".github/instructions/convex.instructions.md" line_range="124" />
<code_context>
+- Use the `internal` object defined by the framework in `convex/_generated/api.ts` to call internal (or private) functions registered with `internalQuery`, `internalMutation`, or `internalAction`.
+- Convex uses file-based routing, so a public function defined in `convex/example.ts` named `f` has a function reference of `api.example.f`.
+- A private function defined in `convex/example.ts` named `g` has a function reference of `internal.example.g`.
+- Functions can also registered within directories nested within the `convex/` folder. For example, a public function `h` defined in `convex/messages/access.ts` has a function reference of `api.messages.access.h`.
+
+### Api design
</code_context>
<issue_to_address>
**issue (typo):** Add "be" in "Functions can also registered".
This is just a small grammar fix so the sentence reads correctly.
```suggestion
- Functions can also be registered within directories nested within the `convex/` folder. For example, a public function `h` defined in `convex/messages/access.ts` has a function reference of `api.messages.access.h`.
```
</issue_to_address>
### Comment 5
<location path=".github/instructions/convex.instructions.md" line_range="192" />
<code_context>
+ },
+});
+```
+- Be strict with types, particularly around id's of documents. For example, if a function takes in an id for a document in the 'users' table, take in `Id<'users'>` rather than `string`.
+- Always use `as const` for string literals in discriminated union types.
+- When using the `Array` type, make sure to always define your arrays as `const array: Array<T> = [...];`
</code_context>
<issue_to_address>
**nitpick (typo):** Use "ids" instead of "id's" for the plural form.
Here "id's" is used as a plural, so it should be the simple plural "ids" (or "IDs") without an apostrophe.
```suggestion
- Be strict with types, particularly around ids of documents. For example, if a function takes in an id for a document in the 'users' table, take in `Id<'users'>` rather than `string`.
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| useEffect(() => { | ||
| const handleMouseMove = (e: MouseEvent) => { | ||
| if (!containerRef.current) { | ||
| return | ||
| } | ||
| const rect = containerRef.current.getBoundingClientRect() | ||
| const x = (e.clientX - rect.left) / rect.width - 0.5 | ||
| const y = (e.clientY - rect.top) / rect.height - 0.5 | ||
| mouseX.set(x) | ||
| mouseY.set(y) |
There was a problem hiding this comment.
suggestion (performance): Global window mousemove listener for parallax is broader than needed and may impact performance.
Because the listener is on window, the parallax math runs on every mousemove, even when the cursor isn’t near the hero, increasing unnecessary work. Since you already have containerRef, attach the listener to containerRef.current (e.g., via onMouseMove or a direct DOM listener) so it only runs when the pointer is over the hero.
| Convex Type | TS/JS type | Example Usage | Validator for argument validation and schemas | Notes | | ||
| | ----------- | ------------| -----------------------| -----------------------------------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | Id | string | `doc._id` | `v.id(tableName)` | | | ||
| | Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions the return `undefined` or do not return will return `null` when called from a client. Use `null` instead. | |
There was a problem hiding this comment.
issue (typo): Replace "Functions the return" with "Functions that return" for correct grammar.
In this row, update the text to "Functions that return undefined" to correct the grammar.
| | Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions the return `undefined` or do not return will return `null` when called from a client. Use `null` instead. | | |
| | Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions that return `undefined` or do not return will return `null` when called from a client. Use `null` instead. | |
| - A query that ends in `.paginate()` returns an object that has the following properties: | ||
| - page (contains an array of documents that you fetches) | ||
| - isDone (a boolean that represents whether or not this is the last page of documents) | ||
| - continueCursor (a string that represents the cursor to use to fetch the next page of documents) |
There was a problem hiding this comment.
issue (typo): Fix the phrase "that you fetches" to be grammatically correct.
In the bullet, replace "an array of documents that you fetches" with "an array of documents that you fetch" or "an array of documents that you've fetched" to fix the grammar.
| - A query that ends in `.paginate()` returns an object that has the following properties: | |
| - page (contains an array of documents that you fetches) | |
| - isDone (a boolean that represents whether or not this is the last page of documents) | |
| - continueCursor (a string that represents the cursor to use to fetch the next page of documents) | |
| - A query that ends in `.paginate()` returns an object that has the following properties: | |
| - page (contains an array of documents that you've fetched) | |
| - isDone (a boolean that represents whether or not this is the last page of documents) | |
| - continueCursor (a string that represents the cursor to use to fetch the next page of documents) |
| - Use the `internal` object defined by the framework in `convex/_generated/api.ts` to call internal (or private) functions registered with `internalQuery`, `internalMutation`, or `internalAction`. | ||
| - Convex uses file-based routing, so a public function defined in `convex/example.ts` named `f` has a function reference of `api.example.f`. | ||
| - A private function defined in `convex/example.ts` named `g` has a function reference of `internal.example.g`. | ||
| - Functions can also registered within directories nested within the `convex/` folder. For example, a public function `h` defined in `convex/messages/access.ts` has a function reference of `api.messages.access.h`. |
There was a problem hiding this comment.
issue (typo): Add "be" in "Functions can also registered".
This is just a small grammar fix so the sentence reads correctly.
| - Functions can also registered within directories nested within the `convex/` folder. For example, a public function `h` defined in `convex/messages/access.ts` has a function reference of `api.messages.access.h`. | |
| - Functions can also be registered within directories nested within the `convex/` folder. For example, a public function `h` defined in `convex/messages/access.ts` has a function reference of `api.messages.access.h`. |
| }, | ||
| }); | ||
| ``` | ||
| - Be strict with types, particularly around id's of documents. For example, if a function takes in an id for a document in the 'users' table, take in `Id<'users'>` rather than `string`. |
There was a problem hiding this comment.
nitpick (typo): Use "ids" instead of "id's" for the plural form.
Here "id's" is used as a plural, so it should be the simple plural "ids" (or "IDs") without an apostrophe.
| - Be strict with types, particularly around id's of documents. For example, if a function takes in an id for a document in the 'users' table, take in `Id<'users'>` rather than `string`. | |
| - Be strict with types, particularly around ids of documents. For example, if a function takes in an id for a document in the 'users' table, take in `Id<'users'>` rather than `string`. |
|
🤖 I'm sorry @ssdeanx, but I was unable to process your request. Please see the logs for more details. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request primarily focuses on enhancing the visual appeal and interactivity of the landing page components (LandingFeatures, LandingHero, LandingStats) by integrating framer-motion for scroll-triggered and 3D parallax animations, along with new glass-morphism styling. The hero section, in particular, receives a significant overhaul with interactive 3D elements and a 'Big Bang' entry animation. Supporting CSS for these effects, including a mesh-gradient background animation and 3D stage classes, has been added to globals.css. Additionally, two task specification markdown files (HARNESS_SPEC_TASK, TASK-001) were removed, indicating their completion or obsolescence. A new comprehensive documentation file for Convex development guidelines was added, and the Convex schema was updated to use a pre-defined mastraWorkflowSnapshotsTable for consistency. Minor changes include updating react-resizable-panels dependency and adding explicit boolean checks for description props in SchemaDisplay components. Review comments highlighted typos in the new Convex documentation, an unnecessary dependency in a useEffect hook, and a potential issue with duplicate table definitions in the Convex schema, as well as an animation conflict in LandingHero where undefined CSS variables were used for rotation, potentially interfering with Framer Motion's parallax.
| 0%, 100% { transform: translateY(0) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); } | ||
| 50% { transform: translateY(-20px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); } |
There was a problem hiding this comment.
The @keyframes float-hero animation includes rotateX(var(--rotate-x)) and rotateY(var(--rotate-y)), but the CSS variables --rotate-x and --rotate-y are not defined. This will likely conflict with the rotateX and rotateY transformations already being applied by framer-motion via the style prop, potentially breaking the parallax effect. The animation should only handle the vertical floating motion (translateY). Framer Motion will correctly compose this with the other transforms.
| 0%, 100% { transform: translateY(0) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); } | |
| 50% { transform: translateY(-20px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); } | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } |
| Convex Type | TS/JS type | Example Usage | Validator for argument validation and schemas | Notes | | ||
| | ----------- | ------------| -----------------------| -----------------------------------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | Id | string | `doc._id` | `v.id(tableName)` | | | ||
| | Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions the return `undefined` or do not return will return `null` when called from a client. Use `null` instead. | |
There was a problem hiding this comment.
I found a few typos in this new documentation file. Correcting them would improve clarity and professionalism:
- Line 76: "Functions the return" should be "Functions that return".
- Line 124: "can also registered" should be "can also be registered".
- Line 154: "that you fetches" should be "that you fetched".
|
|
||
| window.addEventListener('mousemove', handleMouseMove) | ||
| return () => window.removeEventListener('mousemove', handleMouseMove) | ||
| }, [mouseX, mouseY]) |
There was a problem hiding this comment.
The mouseX and mouseY MotionValue objects are stable references and do not need to be included in the useEffect dependency array. An empty dependency array [] would be more appropriate here to ensure the event listener is only set up and torn down once during the component's lifecycle.
| }, [mouseX, mouseY]) | |
| }, []) |
| mastra_vector_indexes: mastraVectorIndexesTable, | ||
| mastra_vectors: mastraVectorsTable, | ||
| mastra_documents: mastraDocumentsTable, | ||
| mastra_workflows: mastraWorkflowSnapshotsTable |
There was a problem hiding this comment.
The schema now defines both mastra_workflow_snapshots (line 17) and mastra_workflows (line 22) tables using the same mastraWorkflowSnapshotsTable object. This will create two separate, identical tables in the database. Is this intentional? If mastra_workflows is meant to be a new name for mastra_workflow_snapshots, the old table definition should probably be removed to avoid confusion and potential data duplication.
There was a problem hiding this comment.
Pull request overview
This PR advances the initial landing page/UI rollout by enhancing the hero/features/stats sections with richer motion + glass/mesh styling, aligns some UI conditional patterns, updates the Convex schema wiring for Mastra tables, and bumps a UI dependency.
Changes:
- Add/extend landing page motion + visual styling (Framer Motion + new global CSS utilities).
- Update Convex schema to import Mastra tables and adjust workflow-related tables.
- Bump
react-resizable-panelsand remove committed test-output/task artifacts.
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ai-elements/schema-display.tsx | Adjust JSX conditionals to explicit Boolean(...) checks. |
| package.json | Bump react-resizable-panels to ^4.7.0. |
| package-lock.json | Lockfile update for react-resizable-panels@4.7.0. |
| dot/tests/test-results/test-results.json | Remove generated/committed test results artifact. |
| convex/schema.ts | Switch to imported Mastra schema tables; add workflow-related table entry. |
| app/globals.css | Enhance mesh background + add/extend 3D and glassmorphism utility classes. |
| app/components/landing-stats.tsx | Add Framer Motion animations/3D hover effects to stats UI. |
| app/components/landing-hero.tsx | Major hero redesign with parallax + 3D staged elements and GSAP entrance. |
| app/components/landing-features.tsx | Add Framer Motion staging and enhanced styling for feature grids. |
| .gitignore | Add new ignore entries. |
| .github/instructions/convex.instructions.md | Add Convex development guidelines for contributors/automation. |
| .agentstack/tasks/TASK-001-chat-streaming-fixes.md | Remove task document. |
| .agentstack/tasks/HARNESS_SPEC_TASK.md | Remove task/spec document. |
| {/* Custom Floating Animation for 3D elements */} | ||
| <style jsx global>{` | ||
| @keyframes float-hero { | ||
| 0%, 100% { transform: translateY(0) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); } | ||
| 50% { transform: translateY(-20px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); } | ||
| } | ||
| .hero-3d-node { | ||
| animation: float-hero 6s ease-in-out infinite; | ||
| } |
There was a problem hiding this comment.
The global CSS animation applied to .hero-3d-node animates the transform property, which will override/compete with Framer Motion’s rotateX/rotateY/translateZ transforms on the same elements. It also references var(--rotate-x) / var(--rotate-y) which are never set here, making the keyframe transforms invalid. Prefer doing the floating effect in Framer Motion (e.g., animating y) or apply the CSS animation to a nested wrapper so Motion can keep ownership of the element’s transform.
| useEffect(() => { | ||
| const handleMouseMove = (e: MouseEvent) => { | ||
| if (!containerRef.current) { | ||
| return | ||
| } | ||
| const rect = containerRef.current.getBoundingClientRect() | ||
| const x = (e.clientX - rect.left) / rect.width - 0.5 | ||
| const y = (e.clientY - rect.top) / rect.height - 0.5 | ||
| mouseX.set(x) | ||
| mouseY.set(y) | ||
| } | ||
|
|
||
| window.addEventListener('mousemove', handleMouseMove) | ||
| return () => window.removeEventListener('mousemove', handleMouseMove) | ||
| }, [mouseX, mouseY]) | ||
|
|
||
| useGSAP( | ||
| () => { | ||
| ensureGsapRegistered() | ||
|
|
||
| if (!sectionRef.current || !contentRef.current) { | ||
| return | ||
| } | ||
|
|
||
| const prefersReducedMotion = window.matchMedia( | ||
| '(prefers-reduced-motion: reduce)' | ||
| ).matches | ||
|
|
||
| if (prefersReducedMotion) { | ||
| gsap.set('.hero-element', { opacity: 1, y: 0 }) | ||
| gsap.set(contentRef.current, { y: 0, scale: 1 }) | ||
| if (!sectionRef.current) { | ||
| return | ||
| } | ||
|
|
||
| const tl = gsap.timeline() | ||
|
|
||
| // Initial "Big Bang" entry | ||
| tl.fromTo( | ||
| '.hero-element', | ||
| { opacity: 0, y: 20 }, | ||
| '.hero-3d-node', | ||
| { opacity: 0, scale: 0.5, z: -500, rotateX: 45, rotateY: -45 }, | ||
| { | ||
| opacity: 1, | ||
| y: 0, | ||
| duration: 0.6, | ||
| ease: 'power2.out', | ||
| scale: 1, | ||
| z: 0, | ||
| rotateX: 0, | ||
| rotateY: 0, | ||
| duration: 1.2, | ||
| ease: 'expo.out', | ||
| stagger: 0.1, | ||
| } | ||
| ) | ||
|
|
||
| gsap.to(contentRef.current, { | ||
| y: -50, | ||
| scale: 1.05, | ||
| ease: 'none', | ||
| scrollTrigger: { | ||
| trigger: sectionRef.current, | ||
| start: 'top bottom', | ||
| end: 'bottom top', | ||
| scrub: 1, | ||
| tl.fromTo( | ||
| '.hero-text-shimmer', | ||
| { opacity: 0, y: 40, filter: 'blur(10px)' }, | ||
| { | ||
| opacity: 1, | ||
| y: 0, | ||
| filter: 'blur(0px)', | ||
| duration: 0.8, | ||
| ease: 'power3.out', | ||
| stagger: 0.1, | ||
| }, | ||
| }) | ||
| '-=0.8' | ||
| ) |
There was a problem hiding this comment.
The previous prefers-reduced-motion handling was removed, but this component now always runs GSAP entrance animations and always installs a global mousemove parallax listener. This makes reduced-motion users opt-in to significant motion effects. Consider guarding the GSAP timeline + parallax behavior behind a reduced-motion check (and skipping/zeroing transforms when reduced motion is requested).
| mastra_vector_indexes: mastraVectorIndexesTable, | ||
| mastra_vectors: mastraVectorsTable, | ||
| mastra_documents: mastraDocumentsTable, | ||
| mastra_workflows: mastraWorkflowSnapshotsTable |
There was a problem hiding this comment.
convex/schema.ts now defines both mastra_workflow_snapshots and mastra_workflows using the same mastraWorkflowSnapshotsTable. This will create an additional Convex table (and potentially duplicate indexes/storage) during schema push. If this was meant to be a rename, the old table key should be removed and a migration plan applied; otherwise, drop the extra mastra_workflows entry.
| mastra_workflows: mastraWorkflowSnapshotsTable |
| <div className="stat-card @container mb-16 grid grid-cols-2 gap-6 @md:grid-cols-4 perspective-1000"> | ||
| {STATS.map((stat) => ( | ||
| <div | ||
| <motion.div | ||
| key={stat.label} | ||
| className="group relative rounded-2xl border border-border bg-card p-6 text-center shadow-sm transition-all duration-300 hover:border-primary/20 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1" | ||
| whileHover={{ | ||
| rotateY: 10, | ||
| rotateX: -5, | ||
| translateZ: 20, | ||
| scale: 1.02 | ||
| }} | ||
| transition={{ type: "spring", stiffness: 300, damping: 20 }} | ||
| className="group relative rounded-2xl border border-border bg-card p-6 text-center shadow-sm transition-all duration-300 hover:border-primary/20 hover:shadow-2xl hover:shadow-primary/5 transform-style-3d glass-morphism" |
There was a problem hiding this comment.
The classes perspective-1000 and transform-style-3d don’t appear to be defined in app/globals.css (the repo defines .perspective* and .preserve-3d utilities instead). As-is, these class names will be no-ops, so the intended 3D hover effect likely won’t work. Consider switching to the existing utilities (e.g., perspective/stage-3d and preserve-3d).
…yling with custom properties, Convex schema, and an AI schema display component.
Summary by Sourcery
Revamp the landing page hero, features, and stats sections with richer 3D-style motion and glassmorphism styling, refine global visual treatments, align the Convex schema with upstream definitions, and harden the AI schema display description handling.
New Features:
Bug Fixes:
Enhancements:
Documentation:
Chores: