Add FuzzyText component and enhance ErrorPage with new styles#10
Merged
Add FuzzyText component and enhance ErrorPage with new styles#10
Conversation
- Introduced FuzzyText component for animated text effects. - Updated ErrorPage to utilize FuzzyText for a more engaging 404 message. - Added new CSS styles for ErrorPage to improve layout and responsiveness. - Modified LandingPage styles for consistency with new design. - Fixed CI Pipeline README file
Reviewer's GuideThis PR introduces a reusable, canvas-based FuzzyText component for animated text effects, integrates it into the ErrorPage with a responsive layout and back-to-home button, refines LandingPage visuals and animation settings for consistency, and cleans up the CI pipeline documentation. Class diagram for the new FuzzyText componentclassDiagram
class FuzzyText {
+children
+fontSize
+fontWeight
+fontFamily
+color
+enableHover
+baseIntensity
+hoverIntensity
+canvasRef
+useEffect()
+render()
}
Class diagram for updated ErrorPage usageclassDiagram
class ErrorPage {
+render()
}
class FuzzyText
ErrorPage --> FuzzyText : uses
ErrorPage --> Link : uses
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new FuzzyText component for animated text effects and enhances the ErrorPage design with modern styling and improved responsiveness.
Key changes:
- Added FuzzyText component with canvas-based text animation effects
- Redesigned ErrorPage with new CSS styles and integrated FuzzyText component
- Updated design consistency with a darker gradient theme across LandingPage and ErrorPage
Reviewed Changes
Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/FuzzyText/FuzzyText.jsx | New component providing animated fuzzy text effects using canvas rendering |
| src/pages/ErrorPage.js | Enhanced 404 page with FuzzyText integration and proper navigation |
| src/styles/ErrorPage.css | New responsive styles for ErrorPage with modern design |
| src/styles/LandingPage.css | Updated background gradient to match new design theme |
| src/pages/LandingPage.js | Minor animation tweaks and content updates |
| amplify/backend/function/homecloudSharedUtils/* | AWS CloudFormation template updates for deployment |
| .github/README.md | Documentation cleanup and CI pipeline updates |
Comments suppressed due to low confidence (1)
amplify/backend/function/homecloudSharedUtils/parameters.json:2
- The Node.js runtime version 'nodejs22.x' does not exist. AWS Lambda currently supports up to nodejs20.x. This should be changed to 'nodejs20.x' or another supported version.
"runtimes": [
| } | ||
| }; | ||
|
|
||
| canvas.cleanupFuzzyText = cleanup; |
There was a problem hiding this comment.
Adding a custom property 'cleanupFuzzyText' directly to the canvas DOM element is not a standard practice and could lead to memory leaks or conflicts. Consider using a WeakMap or ref-based cleanup approach instead.
Suggested change
| canvas.cleanupFuzzyText = cleanup; | |
| cleanupMap.set(canvas, cleanup); |
Comment on lines
+145
to
+150
| e.preventDefault(); | ||
| const rect = canvas.getBoundingClientRect(); | ||
| const touch = e.touches[0]; | ||
| const x = touch.clientX - rect.left; | ||
| const y = touch.clientY - rect.top; | ||
| isHovering = isInsideTextArea(x, y); |
There was a problem hiding this comment.
Calling preventDefault() on all touchmove events can interfere with normal scrolling behavior. Consider only preventing default when the touch is actually over the interactive area.
Suggested change
| e.preventDefault(); | |
| const rect = canvas.getBoundingClientRect(); | |
| const touch = e.touches[0]; | |
| const x = touch.clientX - rect.left; | |
| const y = touch.clientY - rect.top; | |
| isHovering = isInsideTextArea(x, y); | |
| const rect = canvas.getBoundingClientRect(); | |
| const touch = e.touches[0]; | |
| const x = touch.clientX - rect.left; | |
| const y = touch.clientY - rect.top; | |
| if (isInsideTextArea(x, y)) { | |
| e.preventDefault(); | |
| isHovering = true; | |
| } else { | |
| isHovering = false; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
Introduce a fuzzy animated text component, enhance the ErrorPage with new interactive styles, tweak LandingPage visuals for consistency, and refine the CI pipeline documentation.
New Features:
Bug Fixes:
Enhancements:
Documentation:
Chores: