Add a new Loader #126
Add a new Loader #126
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughBulk line-ending normalization across many registry entries. Functional updates include: defensive handling of undefined features in AnimatedPricing; lint/nocheck comments added to CanvasCursor; major PlayingCard enhancement with new optional props and reveal-canvas rendering; removal of QuestionAnswer component from neobrutalism-faq; addition of a new QuadRingLoader component and corresponding registry entry. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant PC as PlayingCard
participant CRE as CanvasRevealEffect
participant SH as Shader/DotMatrix
U->>PC: Hover/Focus
alt revealCanvas enabled
PC->>CRE: Mount reveal layer
CRE->>SH: Initialize shader pipeline
SH-->>CRE: Render frame(s)
CRE-->>PC: Composited reveal
else revealCanvas disabled
PC-->>U: Standard card hover styles
end
U->>PC: Click
PC-->>U: onClick handler (unchanged)
note over PC: Applies inscriptionColor / inscriptionColorHovered<br/>and dynamic text layout
sequenceDiagram
autonumber
participant App as App/Registry
participant QRL as QuadRingLoader
participant SC as styled-components
participant SVG as SVG/CSS Animations
App->>QRL: Render component
QRL->>SC: Apply StyledWrapper
QRL->>SVG: Render rings + keyframes
SVG-->>App: Animated loader displayed
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
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. 🧪 Early access (Sonnet 4.5): enabledWe are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience. Note:
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: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
public/r/spotlight-hero.json (1)
1-31: File unrelated to PR objectives; line-ending normalization only.This file contains only line-ending normalization (CRLF) and is unrelated to the stated PR objective of adding a QuadRingLoader component. The changes to lines 17, 22, and 27 are purely formatting adjustments with no functional impact on imports, component definitions, or runtime behavior.
Consider whether this formatting change should be:
- Separated into a dedicated formatting/housekeeping PR, or
- Documented in the PR description to explain why unrelated files are included
Additionally, verify that the QuadRingLoader component files mentioned in the PR summary are actually included in this pull request, as they are not present in the files provided for review.
public/r/premium-testimonial.json (1)
10-10: Remove the empty string from the dependencies array.An empty string in the dependencies array is invalid and serves no purpose. It may cause issues during dependency resolution or package installation.
Apply this diff to remove the empty string:
"lucide-react", "framer-motion", - "" ],public/r/animated-list.json (1)
9-9: Remove empty dependency string.The dependencies array contains an empty string at line 9, which serves no purpose and may cause issues with package installation or registry parsing.
Apply this diff to remove the empty dependency:
"dependencies": [ "clsx", "tailwind-merge", "motion/react", - "" ],
♻️ Duplicate comments (2)
public/r/gaming-form.json (1)
18-18: Same line-ending normalization applied.This line undergoes the same LF → CRLF conversion as line 13. See previous comment regarding line-ending consistency.
public/r/electric-cursor.json (1)
16-16: Same CRLF normalization applied here.This content field also contains CRLF line endings. The same verification concerns apply as noted in the previous comment.
🧹 Nitpick comments (6)
public/r/hacker-background.json (1)
13-13: Line-ending normalization applied correctly.The changes convert line endings from LF to CRLF within the content strings. This is a non-functional whitespace change that maintains the same logic and behavior.
Consider adding or updating
.gitattributesto enforce consistent line endings across the repository automatically:*.json text eol=lf *.tsx text eol=lf *.ts text eol=lfThis prevents future line-ending inconsistencies and reduces noise in git diffs.
Also applies to: 18-18
public/r/bars-background.json (1)
13-13: File change unrelated to PR objectives.This registry file (bars-background.json) contains only line-ending formatting changes and is unrelated to the stated PR objective of adding a QuadRingLoader component. Consider separating bulk formatting updates from feature additions into distinct PRs for clearer review and git history.
public/r/neural-background.json (2)
5-7: Remove the empty string from the dependencies array.The dependencies array contains an empty string which serves no purpose. If there are no dependencies, the array should be empty.
Apply this diff:
"dependencies": [ - "" ],
3-3: Naming inconsistency between registry name and component filename.The registry entry is named "neural-background" (line 3) but references a file named "hacker-background.tsx" (line 12). This inconsistency may confuse users trying to locate or understand the component's purpose.
Consider renaming either the registry entry to match the filename or vice versa for consistency.
Also applies to: 12-13
public/r/matrix-cursor.json (1)
11-11: Line-ending normalization detected (CRLF).The content fields now contain Windows-style CRLF line endings. To prevent line-ending inconsistencies across the repository, consider configuring
.gitattributesto normalize line endings automatically (e.g.,* text=auto).Also applies to: 16-16
public/r/playing-card.json (1)
21-21: Consider performance implications of shader-based animation.The CanvasRevealEffect uses Three.js with 60fps rendering by default. While the throttling mechanism exists (
maxFps), the shader runs continuously whenrevealCanvasis true. For production use, consider:
- Pausing/resuming animation based on visibility (Intersection Observer)
- Adding WebGL context loss handling
- Providing a reduced-motion option for accessibility
The implementation is functionally sound but could benefit from these optimizations for better performance and accessibility.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (60)
public/r/animated-list.json(1 hunks)public/r/animated-pricing.json(1 hunks)public/r/banner-close.json(1 hunks)public/r/banner.json(1 hunks)public/r/bars-background.json(1 hunks)public/r/border-button.json(1 hunks)public/r/canvas-cursor.json(1 hunks)public/r/code-cursor.json(1 hunks)public/r/contact-form.json(1 hunks)public/r/creative-pricing.json(1 hunks)public/r/digital-hero.json(1 hunks)public/r/draw-cursor.json(1 hunks)public/r/dynamic-card.json(1 hunks)public/r/electric-cursor.json(1 hunks)public/r/fire-cursor.json(1 hunks)public/r/flow-form.json(1 hunks)public/r/following-eye.json(1 hunks)public/r/future-button.json(1 hunks)public/r/future-navbar.json(1 hunks)public/r/gaming-form.json(1 hunks)public/r/ghost-cursor.json(1 hunks)public/r/glowing-card.json(1 hunks)public/r/gradient-background.json(1 hunks)public/r/gradient-button.json(1 hunks)public/r/gradient-hero.json(1 hunks)public/r/gradient-text.json(1 hunks)public/r/hacker-background.json(1 hunks)public/r/hacker-cursor.json(1 hunks)public/r/hover-footer.json(1 hunks)public/r/info-card.json(1 hunks)public/r/jump-background.json(1 hunks)public/r/magnet-button.json(1 hunks)public/r/marquee-testimonial.json(1 hunks)public/r/matrix-cursor.json(1 hunks)public/r/money-cursor.json(1 hunks)public/r/neobrutalism-faq.json(0 hunks)public/r/neural-background.json(1 hunks)public/r/playing-card.json(1 hunks)public/r/premium-testimonial.json(1 hunks)public/r/progress-bar.json(1 hunks)public/r/project-showcase.json(1 hunks)public/r/quad-ring-loader.json(1 hunks)public/r/registry.json(1 hunks)public/r/research-hero.json(1 hunks)public/r/retro-cursor.json(1 hunks)public/r/shadow-button.json(1 hunks)public/r/shiny-card.json(1 hunks)public/r/singin-form.json(1 hunks)public/r/splash-cursor.json(1 hunks)public/r/spotlight-card.json(1 hunks)public/r/spotlight-hero.json(1 hunks)public/r/story.json(1 hunks)public/r/tech-cursor.json(1 hunks)public/r/tech-hero.json(1 hunks)public/r/terminal-cursor.json(1 hunks)public/r/terminal.json(1 hunks)public/r/text-button.json(1 hunks)public/r/video-modal.json(1 hunks)public/r/virus-background.json(1 hunks)public/r/wave-card.json(1 hunks)
💤 Files with no reviewable changes (1)
- public/r/neobrutalism-faq.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: 🛠️ Build Project
🔇 Additional comments (37)
public/r/ghost-cursor.json (2)
11-11: Line-ending normalization appears unrelated to PR objectives.This change converts line endings to CRLF in the demo content string. While the AI summary confirms this is part of bulk formatting normalization, it's unclear how this relates to the stated PR objective of adding a QuadRingLoader component.
Please confirm:
- Is CRLF the intended line-ending standard for content strings in registry JSON files?
- Should line-ending normalization changes be separated from feature additions for cleaner git history?
16-16: Line-ending normalization in component content.Similar to the demo file, this applies CRLF line endings to the component content string. The actual component logic remains unchanged—this is purely a formatting adjustment.
public/r/singin-form.json (1)
16-16: LGTM! Line-ending normalization applied.This change standardizes line endings (LF → CRLF) in the embedded content strings with no functional impact.
Also applies to: 21-21
public/r/video-modal.json (1)
16-16: Line-ending normalization only—no functional changes.The changes to this file are limited to line-ending formatting (CRLF). No structural, dependency, or logic modifications are present in the registry entry.
Note: This file appears unrelated to the PR's stated objective of adding a QuadRingLoader component. If this bulk line-ending normalization was unintentional, consider separating formatting changes into a dedicated PR to keep functional changes isolated.
Also applies to: 21-21
public/r/info-card.json (1)
14-14: Line-ending normalization only—no functional changes.The changes to these content fields are formatting adjustments (line-ending normalization). No logic, API, or structural modifications are present in this registry entry.
Also applies to: 19-19, 24-24
public/r/marquee-testimonial.json (1)
15-35: Line-ending normalization only—no functional changes.These changes convert line endings from LF to CRLF within the embedded component content strings. No code logic, dependencies, or API signatures are affected.
public/r/fire-cursor.json (1)
11-11: LGTM! Line-ending normalization only.These changes normalize line endings to CRLF format with no functional modifications to the embedded component code.
Also applies to: 16-16
public/r/jump-background.json (1)
15-15: Line-ending normalization applied correctly.The changes convert line endings from LF to CRLF for the embedded component source code. This is part of the bulk line-ending normalization across the registry mentioned in the PR summary, with no functional changes to the component logic.
Also applies to: 20-20
public/r/premium-testimonial.json (1)
17-17: LGTM! Line-ending normalization applied.The line-ending changes (LF to CRLF) are purely cosmetic with no functional impact on the component logic.
Also applies to: 22-22
public/r/gaming-form.json (2)
1-22: Inconsistency: PR objectives describe QuadRingLoader, but this file is gaming-form.The PR objectives state that this PR introduces a new QuadRingLoader component, yet this file contains changes to
gaming-form.json. This suggests the PR includes multiple unrelated changes bundled together.Consider:
- Splitting unrelated changes into separate PRs for clearer history
- Updating the PR description to accurately reflect all changes included
- Confirming whether the line-ending normalization was intentional or accidental
13-13: Line-ending normalization and missing.gitattributes
- The embedded content in
public/r/gaming-form.jsonwas converted from LF (\n) to CRLF (\r\n), which can cause unnecessary Git churn and merge conflicts across platforms.- No
.gitattributesfile exists andcore.autocrlfis unset; add a.gitattributes(e.g.,* text=auto eol=lf) and configurecore.autocrlfto enforce consistent line endings.- These changes don’t align with the PR’s stated goal of adding
QuadRingLoader; confirm if including this cleanup here is intentional.public/r/electric-cursor.json (1)
11-11: Confirm intentional CRLF escapes inpublic/r/electric-cursor.json.Automated checks didn’t detect any JSON diffs—please manually verify that the
\r\nline‐ending escapes are deliberate, consistent across allpublic/rregistry files, and that your gitcore.autocrlf/eolsettings won’t introduce unintended conversions.public/r/spotlight-card.json (1)
11-11: Confirm embedded CRLF (\r\n) escapes are intentional. The JSON registry entries now include\r\nsequences, but the repository uses LF throughout and lacks any line-ending config. Unless strictly required, revert these to\nescapes for consistency.public/r/canvas-cursor.json (1)
13-13: Ignore CRLF line-ending feedback; no actual CRLF issues present.The registry JSON file uses LF endings (no
^Mpresent), and the\r\nsequences are literal escape characters within the JSON string, not Windows-style line breaks in the file.Likely an incorrect or invalid review comment.
public/r/glowing-card.json (1)
14-19: Line-ending normalization—no functional changes.The changes convert line endings to CRLF in the embedded component content. This is purely formatting and has no impact on functionality.
public/r/tech-hero.json (1)
18-33: Line-ending normalization—no functional changes.All changes are line-ending conversions to CRLF across the embedded component files. No functional impact.
public/r/research-hero.json (1)
18-43: Line-ending normalization—no functional changes.All changes are line-ending conversions to CRLF across the embedded component files. No functional impact.
public/r/story.json (1)
19-39: Line-ending normalization—no functional changes.All changes are line-ending conversions to CRLF across the embedded component files. No functional impact.
public/r/progress-bar.json (1)
14-19: Line-ending normalization—no functional changes.The changes convert line endings to CRLF in the embedded component content. This is purely formatting and has no impact on functionality.
public/r/shadow-button.json (1)
1-24: Line-ending normalization applied correctly.The changes are limited to line-ending normalization (LF → CRLF) with no functional impact.
public/r/terminal.json (1)
1-24: Line-ending normalization applied correctly.The changes are limited to line-ending normalization (LF → CRLF) with no functional impact.
public/r/animated-list.json (1)
16-26: Line-ending normalization applied correctly.The changes are limited to line-ending normalization (LF → CRLF) with no functional impact.
public/r/magnet-button.json (1)
1-25: Line-ending normalization applied correctly.The changes are limited to line-ending normalization (LF → CRLF) with no functional impact.
public/r/terminal-cursor.json (1)
1-20: Line-ending normalization applied correctly.The changes are limited to line-ending normalization (LF → CRLF) with no functional impact.
public/r/animated-pricing.json (1)
19-19: LGTM! Defensive handling for undefined features.The implementation correctly derives
safeFeaturesfromfeatures ?? []and uses it in the render path to prevent runtime errors when thefeaturesprop is undefined. This is a good defensive programming practice.public/r/future-navbar.json (1)
16-16: LGTM! Line-ending normalization.These changes normalize line endings (CRLF vs LF) in embedded content without altering functionality.
Also applies to: 21-21, 26-26
public/r/gradient-hero.json (1)
18-18: LGTM! Line-ending normalization.These changes normalize line endings without functional impact.
Also applies to: 23-23, 28-28
public/r/quad-ring-loader.json (4)
1-9: LGTM! Registry metadata is well-structured.The registry entry follows the schema correctly and declares styled-components as a dependency, which aligns with the component's implementation.
12-13: LGTM! Clean demo implementation.The demo provides a straightforward usage example of the QuadRingLoader component.
18-18: Verify SVG dimension handling.The SVG element has hardcoded
width={240} height={240}attributes while the wrapper uses responsive6emsizing. The viewBox is correctly set, so the SVG should scale, but the explicit width/height attributes may interfere with responsive behavior in some browsers.Consider removing the explicit width and height attributes and letting viewBox handle the aspect ratio:
- <svg className="pl" width={240} height={240} viewBox="0 0 240 240"> + <svg className="pl" viewBox="0 0 240 240">Alternatively, verify that the current implementation scales correctly across different viewport sizes.
18-18: Well-crafted animation implementation.The four independent ring animations with neon colors create a visually appealing loader. The keyframe sequences are sophisticated and the component is appropriately plug-and-play with no required props.
public/r/registry.json (2)
1342-1360: LGTM! Registry entry correctly added.The quad-ring-loader entry is properly structured and matches the standalone registry file. The JSON syntax is valid with correct comma placement and bracket nesting.
53-53: Pre-existing: Empty dependency strings detected.Several registry entries contain empty strings
""in their dependencies arrays (premium-testimonial, project-showcase, animated-list, hacker-background, neural-background). While not introduced by this PR, these should be cleaned up to maintain registry integrity.Also applies to: 219-219, 240-240, 464-464, 481-481
public/r/playing-card.json (4)
16-16: LGTM! Demo showcases new inscription color props.The demo correctly demonstrates the new
inscriptionColorandinscriptionColorHoveredprops using CSS variables, providing a clear usage example.
21-21: Verify intentional eslint-disable for useMemo dependencies.The
useMemofor shader material creation has an eslint-disable comment and omitsuniformsfrom the dependency array. While this may be intentional to avoid recreating the material on every uniform change (since uniforms are mutable), verify that the shader behaves correctly if uniform values change after initial creation.If uniforms are meant to be mutable, this is acceptable. Otherwise, consider including uniforms in the dependency array or documenting why it's excluded.
21-21: LGTM! Clean implementation of inscription color props.The new
inscriptionColorandinscriptionColorHoveredprops are well-integrated:
- Properly typed as optional with sensible fallbacks
- Applied consistently to both main and mirrored text
- Smooth transitions with configurable timing
- Maintains backward compatibility
26-26: LGTM! CSS variables properly defined for theming.The new inscription color variables are correctly scoped for both light and dark themes with visually appropriate color choices.
| { | ||
| "path": "./src/components/nurui/canvas-cursor-demo.tsx", | ||
| "content": "import React from \"react\";\nimport CanvasCursor from \"@/components/nurui/canvas-cursor\";\n\nconst CanvasCursorDemo = () => {\n return (\n <>\n <p className=\"text-3xl text-center pt-4 text-[#3ca2fa] font-bold\">\n Move cursor to see the effect.\n </p>\n <CanvasCursor />\n </>\n );\n};\n\nexport default CanvasCursorDemo;\n", | ||
| "content": "import React from \"react\";\r\nimport CanvasCursor from \"@/components/nurui/canvas-cursor\";\r\n\r\nconst CanvasCursorDemo = () => {\r\n return (\r\n <>\r\n <p className=\"text-3xl text-center pt-4 text-[#3ca2fa] font-bold\">\r\n Move cursor to see the effect.\r\n </p>\r\n <CanvasCursor />\r\n </>\r\n );\r\n};\r\n\r\nexport default CanvasCursorDemo;\r\n", |
There was a problem hiding this comment.
Changes appear unrelated to PR objectives.
According to the PR summary, this PR introduces a new QuadRingLoader component. However, this file modifies the canvas-cursor component with formatting changes and linting suppressions. Consider whether these changes belong in a separate PR focused on bulk formatting updates.
Also applies to: 18-18
🤖 Prompt for AI Agents
public/r/canvas-cursor.json around lines 13 and 18: the changes to the
CanvasCursor component (formatting/linting suppressions) are unrelated to the
QuadRingLoader feature in this PR; either revert these unrelated edits from this
commit or move them into a separate formatting/cleanup PR, ensuring this PR
contains only QuadRingLoader-related changes and updating the branch/commit
history accordingly (use git restore or create a new branch/commit to isolate
the formatting changes).
| { | ||
| "path": "./src/components/nurui/canvas-cursor.tsx", | ||
| "content": "/* eslint-disable no-var */\n/* eslint-disable @typescript-eslint/no-unused-expressions */\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\n\"use client\";\n\n// this is a client component\nimport { useEffect } from \"react\";\n\nexport default function CanvasCursor() {\n useEffect(() => {\n renderCanvas();\n }, []);\n return (\n <canvas\n className=\"fixed top-0 left-0 w-full h-full pointer-events-none z-50\"\n id=\"canvas\"\n ></canvas>\n );\n}\n\nfunction n(e) {\n // @ts-ignore\n this.init(e || {});\n}\nn.prototype = {\n // @ts-ignore\n init: function (e) {\n // @ts-ignore\n this.phase = e.phase || 0;\n // @ts-ignore\n this.offset = e.offset || 0;\n // @ts-ignore\n this.frequency = e.frequency || 0.001;\n // @ts-ignore\n this.amplitude = e.amplitude || 1;\n },\n update: function () {\n return (\n // @ts-ignore\n (\n (this.phase += this.frequency),\n // @ts-ignore\n (e = this.offset + Math.sin(this.phase) * this.amplitude)\n )\n );\n },\n value: function () {\n return e;\n },\n};\n\n// @ts-ignore\nfunction Line(e) {\n // @ts-ignore\n this.init(e || {});\n}\n\nLine.prototype = {\n // @ts-ignore\n init: function (e) {\n // @ts-ignore\n this.spring = e.spring + 0.1 * Math.random() - 0.05;\n // @ts-ignore\n this.friction = E.friction + 0.01 * Math.random() - 0.005;\n // @ts-ignore\n this.nodes = [];\n for (var t, n = 0; n < E.size; n++) {\n t = new Node();\n // @ts-ignore\n t.x = pos.x;\n // @ts-ignore\n t.y = pos.y;\n // @ts-ignore\n this.nodes.push(t);\n }\n },\n update: function () {\n // @ts-ignore\n let e = this.spring,\n // @ts-ignore\n t = this.nodes[0];\n // @ts-ignore\n t.vx += (pos.x - t.x) * e;\n // @ts-ignore\n t.vy += (pos.y - t.y) * e;\n // @ts-ignore\n for (var n, i = 0, a = this.nodes.length; i < a; i++)\n // @ts-ignore\n ((t = this.nodes[i]),\n 0 < i &&\n // @ts-ignore\n ((n = this.nodes[i - 1]),\n (t.vx += (n.x - t.x) * e),\n (t.vy += (n.y - t.y) * e),\n (t.vx += n.vx * E.dampening),\n (t.vy += n.vy * E.dampening)),\n // @ts-ignore\n (t.vx *= this.friction),\n // @ts-ignore\n (t.vy *= this.friction),\n (t.x += t.vx),\n (t.y += t.vy),\n (e *= E.tension));\n },\n draw: function () {\n let e,\n t,\n // @ts-ignore\n n = this.nodes[0].x,\n // @ts-ignore\n i = this.nodes[0].y;\n // @ts-ignore\n ctx.beginPath();\n // @ts-ignore\n ctx.moveTo(n, i);\n // @ts-ignore\n for (var a = 1, o = this.nodes.length - 2; a < o; a++) {\n // @ts-ignore\n e = this.nodes[a];\n // @ts-ignore\n t = this.nodes[a + 1];\n n = 0.5 * (e.x + t.x);\n i = 0.5 * (e.y + t.y);\n // @ts-ignore\n ctx.quadraticCurveTo(e.x, e.y, n, i);\n }\n // @ts-ignore\n e = this.nodes[a];\n // @ts-ignore\n t = this.nodes[a + 1];\n // @ts-ignore\n ctx.quadraticCurveTo(e.x, e.y, t.x, t.y);\n // @ts-ignore\n ctx.stroke();\n // @ts-ignore\n ctx.closePath();\n },\n};\n\n// @ts-ignore\nfunction onMousemove(e) {\n function o() {\n lines = [];\n for (let e = 0; e < E.trails; e++)\n lines.push(new Line({ spring: 0.45 + (e / E.trails) * 0.025 }));\n }\n // @ts-ignore\n function c(e) {\n (e.touches\n ? // @ts-ignore\n ((pos.x = e.touches[0].pageX), (pos.y = e.touches[0].pageY))\n : // @ts-ignore\n ((pos.x = e.clientX), (pos.y = e.clientY)),\n e.preventDefault());\n }\n // @ts-ignore\n function l(e) {\n // @ts-ignore\n 1 == e.touches.length &&\n ((pos.x = e.touches[0].pageX), (pos.y = e.touches[0].pageY));\n }\n (document.removeEventListener(\"mousemove\", onMousemove),\n document.removeEventListener(\"touchstart\", onMousemove),\n document.addEventListener(\"mousemove\", c),\n document.addEventListener(\"touchmove\", c),\n document.addEventListener(\"touchstart\", l),\n c(e),\n o(),\n render());\n}\n\nfunction render() {\n // @ts-ignore\n if (ctx.running) {\n // @ts-ignore\n ctx.globalCompositeOperation = \"source-over\";\n // @ts-ignore\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n // @ts-ignore\n ctx.globalCompositeOperation = \"lighter\";\n // @ts-ignore\n ctx.strokeStyle = \"hsla(\" + Math.round(f.update()) + \",100%,50%,0.025)\";\n // @ts-ignore\n ctx.lineWidth = 10;\n for (var e, t = 0; t < E.trails; t++) {\n // @ts-ignore\n (e = lines[t]).update();\n e.draw();\n }\n // @ts-ignore\n ctx.frame++;\n window.requestAnimationFrame(render);\n }\n}\n\nfunction resizeCanvas() {\n // @ts-ignore\n ctx.canvas.width = window.innerWidth - 20;\n // @ts-ignore\n ctx.canvas.height = window.innerHeight;\n}\n\n// @ts-ignore\nvar ctx,\n // @ts-ignore\n f,\n e = 0,\n pos = {},\n // @ts-ignore\n lines = [],\n E = {\n debug: true,\n friction: 0.5,\n trails: 80,\n size: 50,\n dampening: 0.025,\n tension: 0.99,\n };\nfunction Node() {\n this.x = 0;\n this.y = 0;\n this.vy = 0;\n this.vx = 0;\n}\n\nexport const renderCanvas = function () {\n // @ts-ignore\n ctx = document.getElementById(\"canvas\").getContext(\"2d\");\n ctx.running = true;\n ctx.frame = 1;\n f = new n({\n phase: Math.random() * 2 * Math.PI,\n amplitude: 85,\n frequency: 0.0015,\n offset: 285,\n });\n document.addEventListener(\"mousemove\", onMousemove);\n document.addEventListener(\"touchstart\", onMousemove);\n document.body.addEventListener(\"orientationchange\", resizeCanvas);\n window.addEventListener(\"resize\", resizeCanvas);\n window.addEventListener(\"focus\", () => {\n // @ts-ignore\n if (!ctx.running) {\n // @ts-ignore\n ctx.running = true;\n render();\n }\n });\n window.addEventListener(\"blur\", () => {\n // @ts-ignore\n ctx.running = true;\n });\n resizeCanvas();\n};\n", | ||
| "content": "/* eslint-disable no-var */\r\n/* eslint-disable @typescript-eslint/no-unused-expressions */\r\n/* eslint-disable @typescript-eslint/ban-ts-comment */\r\n// @ts-nocheck\r\n\"use client\";\r\n\r\n// this is a client component\r\nimport { useEffect } from \"react\";\r\n\r\nexport default function CanvasCursor() {\r\n useEffect(() => {\r\n renderCanvas();\r\n }, []);\r\n return (\r\n <canvas\r\n className=\"fixed top-0 left-0 w-full h-full pointer-events-none z-50\"\r\n id=\"canvas\"\r\n ></canvas>\r\n );\r\n}\r\n\r\nfunction n(e) {\r\n // @ts-ignore\r\n this.init(e || {});\r\n}\r\nn.prototype = {\r\n // @ts-ignore\r\n init: function (e) {\r\n // @ts-ignore\r\n this.phase = e.phase || 0;\r\n // @ts-ignore\r\n this.offset = e.offset || 0;\r\n // @ts-ignore\r\n this.frequency = e.frequency || 0.001;\r\n // @ts-ignore\r\n this.amplitude = e.amplitude || 1;\r\n },\r\n update: function () {\r\n return (\r\n // @ts-ignore\r\n (\r\n (this.phase += this.frequency),\r\n // @ts-ignore\r\n (e = this.offset + Math.sin(this.phase) * this.amplitude)\r\n )\r\n );\r\n },\r\n value: function () {\r\n return e;\r\n },\r\n};\r\n\r\n// @ts-ignore\r\nfunction Line(e) {\r\n // @ts-ignore\r\n this.init(e || {});\r\n}\r\n\r\nLine.prototype = {\r\n // @ts-ignore\r\n init: function (e) {\r\n // @ts-ignore\r\n this.spring = e.spring + 0.1 * Math.random() - 0.05;\r\n // @ts-ignore\r\n this.friction = E.friction + 0.01 * Math.random() - 0.005;\r\n // @ts-ignore\r\n this.nodes = [];\r\n for (var t, n = 0; n < E.size; n++) {\r\n t = new Node();\r\n // @ts-ignore\r\n t.x = pos.x;\r\n // @ts-ignore\r\n t.y = pos.y;\r\n // @ts-ignore\r\n this.nodes.push(t);\r\n }\r\n },\r\n update: function () {\r\n // @ts-ignore\r\n let e = this.spring,\r\n // @ts-ignore\r\n t = this.nodes[0];\r\n // @ts-ignore\r\n t.vx += (pos.x - t.x) * e;\r\n // @ts-ignore\r\n t.vy += (pos.y - t.y) * e;\r\n // @ts-ignore\r\n for (var n, i = 0, a = this.nodes.length; i < a; i++)\r\n // @ts-ignore\r\n ((t = this.nodes[i]),\r\n 0 < i &&\r\n // @ts-ignore\r\n ((n = this.nodes[i - 1]),\r\n (t.vx += (n.x - t.x) * e),\r\n (t.vy += (n.y - t.y) * e),\r\n (t.vx += n.vx * E.dampening),\r\n (t.vy += n.vy * E.dampening)),\r\n // @ts-ignore\r\n (t.vx *= this.friction),\r\n // @ts-ignore\r\n (t.vy *= this.friction),\r\n (t.x += t.vx),\r\n (t.y += t.vy),\r\n (e *= E.tension));\r\n },\r\n draw: function () {\r\n let e,\r\n t,\r\n // @ts-ignore\r\n n = this.nodes[0].x,\r\n // @ts-ignore\r\n i = this.nodes[0].y;\r\n // @ts-ignore\r\n ctx.beginPath();\r\n // @ts-ignore\r\n ctx.moveTo(n, i);\r\n // @ts-ignore\r\n for (var a = 1, o = this.nodes.length - 2; a < o; a++) {\r\n // @ts-ignore\r\n e = this.nodes[a];\r\n // @ts-ignore\r\n t = this.nodes[a + 1];\r\n n = 0.5 * (e.x + t.x);\r\n i = 0.5 * (e.y + t.y);\r\n // @ts-ignore\r\n ctx.quadraticCurveTo(e.x, e.y, n, i);\r\n }\r\n // @ts-ignore\r\n e = this.nodes[a];\r\n // @ts-ignore\r\n t = this.nodes[a + 1];\r\n // @ts-ignore\r\n ctx.quadraticCurveTo(e.x, e.y, t.x, t.y);\r\n // @ts-ignore\r\n ctx.stroke();\r\n // @ts-ignore\r\n ctx.closePath();\r\n },\r\n};\r\n\r\n// @ts-ignore\r\nfunction onMousemove(e) {\r\n function o() {\r\n lines = [];\r\n for (let e = 0; e < E.trails; e++)\r\n lines.push(new Line({ spring: 0.45 + (e / E.trails) * 0.025 }));\r\n }\r\n // @ts-ignore\r\n function c(e) {\r\n (e.touches\r\n ? // @ts-ignore\r\n ((pos.x = e.touches[0].pageX), (pos.y = e.touches[0].pageY))\r\n : // @ts-ignore\r\n ((pos.x = e.clientX), (pos.y = e.clientY)),\r\n e.preventDefault());\r\n }\r\n // @ts-ignore\r\n function l(e) {\r\n // @ts-ignore\r\n 1 == e.touches.length &&\r\n ((pos.x = e.touches[0].pageX), (pos.y = e.touches[0].pageY));\r\n }\r\n (document.removeEventListener(\"mousemove\", onMousemove),\r\n document.removeEventListener(\"touchstart\", onMousemove),\r\n document.addEventListener(\"mousemove\", c),\r\n document.addEventListener(\"touchmove\", c),\r\n document.addEventListener(\"touchstart\", l),\r\n c(e),\r\n o(),\r\n render());\r\n}\r\n\r\nfunction render() {\r\n // @ts-ignore\r\n if (ctx.running) {\r\n // @ts-ignore\r\n ctx.globalCompositeOperation = \"source-over\";\r\n // @ts-ignore\r\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\r\n // @ts-ignore\r\n ctx.globalCompositeOperation = \"lighter\";\r\n // @ts-ignore\r\n ctx.strokeStyle = \"hsla(\" + Math.round(f.update()) + \",100%,50%,0.025)\";\r\n // @ts-ignore\r\n ctx.lineWidth = 10;\r\n for (var e, t = 0; t < E.trails; t++) {\r\n // @ts-ignore\r\n (e = lines[t]).update();\r\n e.draw();\r\n }\r\n // @ts-ignore\r\n ctx.frame++;\r\n window.requestAnimationFrame(render);\r\n }\r\n}\r\n\r\nfunction resizeCanvas() {\r\n // @ts-ignore\r\n ctx.canvas.width = window.innerWidth - 20;\r\n // @ts-ignore\r\n ctx.canvas.height = window.innerHeight;\r\n}\r\n\r\n// @ts-ignore\r\nvar ctx,\r\n // @ts-ignore\r\n f,\r\n e = 0,\r\n pos = {},\r\n // @ts-ignore\r\n lines = [],\r\n E = {\r\n debug: true,\r\n friction: 0.5,\r\n trails: 80,\r\n size: 50,\r\n dampening: 0.025,\r\n tension: 0.99,\r\n };\r\nfunction Node() {\r\n this.x = 0;\r\n this.y = 0;\r\n this.vy = 0;\r\n this.vx = 0;\r\n}\r\n\r\nexport const renderCanvas = function () {\r\n // @ts-ignore\r\n ctx = document.getElementById(\"canvas\").getContext(\"2d\");\r\n ctx.running = true;\r\n ctx.frame = 1;\r\n f = new n({\r\n phase: Math.random() * 2 * Math.PI,\r\n amplitude: 85,\r\n frequency: 0.0015,\r\n offset: 285,\r\n });\r\n document.addEventListener(\"mousemove\", onMousemove);\r\n document.addEventListener(\"touchstart\", onMousemove);\r\n document.body.addEventListener(\"orientationchange\", resizeCanvas);\r\n window.addEventListener(\"resize\", resizeCanvas);\r\n window.addEventListener(\"focus\", () => {\r\n // @ts-ignore\r\n if (!ctx.running) {\r\n // @ts-ignore\r\n ctx.running = true;\r\n render();\r\n }\r\n });\r\n window.addEventListener(\"blur\", () => {\r\n // @ts-ignore\r\n ctx.running = true;\r\n });\r\n resizeCanvas();\r\n};\r\n", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Suppressing linting and type-checking hides underlying issues.
The component file now includes multiple ESLint disable directives and @ts-nocheck, which suppresses all type-checking. This approach masks code quality issues rather than resolving them.
Consider addressing the underlying issues:
- Use proper TypeScript types instead of
@ts-ignoreand@ts-nocheck - Fix unused expression warnings by refactoring the code
- Use
letorconstinstead ofvar
Additionally, verify whether these directives are consistent with the project's coding standards:
🏁 Script executed:
#!/bin/bash
# Check if other component files use similar suppression patterns
echo "=== Checking for @ts-nocheck usage in other components ==="
rg -n '@ts-nocheck' --type ts --type tsx -g '!node_modules' -g '!dist' -g '!build' -C 2
echo ""
echo "=== Checking for multiple eslint-disable comments in other components ==="
rg -n 'eslint-disable' --type ts --type tsx -g '!node_modules' -g '!dist' -g '!build' -C 1 | head -50Length of output: 189
🏁 Script executed:
#!/bin/bash
echo "=== Searching for '@ts-nocheck' across codebase ==="
rg -n '@ts-nocheck' -g '!node_modules' -g '!dist' -g '!build' -C 2
echo ""
echo "=== Searching for 'eslint-disable' directives across codebase ==="
rg -n 'eslint-disable' -g '!node_modules' -g '!dist' -g '!build' -C 1 | head -50Length of output: 416
🏁 Script executed:
#!/bin/bash
echo "=== Unrestricted search for '@ts-nocheck' ==="
rg -n '@ts-nocheck' -C2
echo ""
echo "=== Unrestricted search for 'eslint-disable' ==="
rg -n 'eslint-disable' -C1 | head -50Length of output: 69181
Remove blanket lint and type-check suppressions from CanvasCursor.tsx
CanvasCursor.tsx is the only component using multiple eslint-disable directives and // @ts-nocheck, which hides real issues. Replace all @ts-ignore and @ts-nocheck with proper TypeScript types, refactor to eliminate unused‐expression warnings, and swap var for let/const to restore type safety and align with project standards.
🤖 Prompt for AI Agents
public/r/canvas-cursor.json around line 18: the file currently disables
linting/type-checking globally and uses many // @ts-ignore, var, and
unused-expression patterns; replace the top-level eslint-disable and //
@ts-nocheck with proper types and scoped suppressions only where necessary,
remove all // @ts-ignore by declaring accurate TS types for canvas, context,
Node, Line, and oscillator (n), change all var declarations to let/const,
refactor comma-expression based returns and other unused-expression constructs
into explicit statements/returns, and ensure event handlers and DOM queries are
typed (HTMLCanvasElement | null checks) so the file passes ESLint/TS without
blanket suppressions.
| "content": "import React from \"react\";\r\nimport { FaRocket } from \"react-icons/fa6\";\r\nimport ShinyCard from \"@/components/nurui/shiny-card\";\r\n\r\nexport default function ShinyCardDemo() {\r\n return (\r\n <div className=\"p-10\">\r\n {data.map((feature, index) => (\r\n <ShinyCard\r\n key={index}\r\n featureName={feature.featureName}\r\n featureItems={feature.featureItems}\r\n icon={feature.icon}\r\n />\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nconst data = [\r\n {\r\n featureName: \"Fast Performance\",\r\n featureItems: [\r\n \"Optimized for speed\",\r\n \"Low latency\",\r\n \"Lightweight and efficient\",\r\n ],\r\n icon: <FaRocket />,\r\n },\r\n];\r\n", | ||
| "type": "registry:component" | ||
| }, | ||
| { | ||
| "path": "./src/components/nurui/shiny-card.tsx", | ||
| "content": "import { ReactNode } from \"react\";\nimport { MdDone } from \"react-icons/md\";\nimport \"./styles/shiny-card.css\";\n\ninterface ShinyCardProps {\n featureName: string;\n featureItems: string[];\n icon: ReactNode | string;\n}\n\nconst ShinyCard: React.FC<ShinyCardProps> = ({\n featureName,\n featureItems,\n icon,\n}) => {\n return (\n <div className=\"shiny-card space-y-3 min-h-72 shadow-2xl dark:shadow-none\">\n <p className=\"text-5xl text-[var(--primary-color)] mb-5 mt-1\">{icon}</p>\n <h2 className=\"text-xl font-bold\">{featureName}</h2>\n <ul className=\"space-y-2\">\n {featureItems.map((item, index) => (\n <li\n key={index}\n className=\"text-pretty font-semibold flex items-center gap-2.5\"\n >\n <span className=\"size-4 flex items-center justify-center p-0.5 bg-[var(--primary-color)] text-[var(--black-color)] rounded-full\">\n <MdDone />\n </span>\n <span>{item} </span>\n </li>\n ))}\n </ul>\n </div>\n );\n};\n\nexport default ShinyCard;\n", | ||
| "content": "import { ReactNode } from \"react\";\r\nimport { MdDone } from \"react-icons/md\";\r\nimport \"./styles/shiny-card.css\";\r\n\r\ninterface ShinyCardProps {\r\n featureName: string;\r\n featureItems: string[];\r\n icon: ReactNode | string;\r\n}\r\n\r\nconst ShinyCard: React.FC<ShinyCardProps> = ({\r\n featureName,\r\n featureItems,\r\n icon,\r\n}) => {\r\n return (\r\n <div className=\"shiny-card space-y-3 min-h-72 shadow-2xl dark:shadow-none\">\r\n <p className=\"text-5xl text-[var(--primary-color)] mb-5 mt-1\">{icon}</p>\r\n <h2 className=\"text-xl font-bold\">{featureName}</h2>\r\n <ul className=\"space-y-2\">\r\n {featureItems.map((item, index) => (\r\n <li\r\n key={index}\r\n className=\"text-pretty font-semibold flex items-center gap-2.5\"\r\n >\r\n <span className=\"size-4 flex items-center justify-center p-0.5 bg-[var(--primary-color)] text-[var(--black-color)] rounded-full\">\r\n <MdDone />\r\n </span>\r\n <span>{item} </span>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n};\r\n\r\nexport default ShinyCard;\r\n", | ||
| "type": "registry:component" | ||
| }, | ||
| { | ||
| "path": "./src/components/nurui/styles/shiny-card.css", | ||
| "content": ".shiny-card {\n --white: hsl(0, 0%, 100%);\n --black: hsl(240, 15%, 9%);\n --paragraph: hsl(0, 0%, 83%);\n --line: hsl(240, 9%, 17%);\n --primary: var(--primary-color);\n gap: 1rem;\n padding: 1rem;\n background-color: hsla(240, 15%, 9%, 1);\n background-image:\n radial-gradient(at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),\n radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),\n radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),\n radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),\n radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),\n radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);\n\n border-radius: 1rem;\n box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;\n\n border: 2px solid var(--primary);\n animation: border-color-change 3s linear infinite;\n}\n\n@keyframes border-color-change {\n 0% {\n border-color: var(--primary);\n }\n\n 50% {\n border-color: var(--line);\n }\n\n 100% {\n border-color: var(--primary);\n }\n}\n", | ||
| "content": ".shiny-card {\r\n --white: hsl(0, 0%, 100%);\r\n --black: hsl(240, 15%, 9%);\r\n --paragraph: hsl(0, 0%, 83%);\r\n --line: hsl(240, 9%, 17%);\r\n --primary: var(--primary-color);\r\n gap: 1rem;\r\n padding: 1rem;\r\n background-color: hsla(240, 15%, 9%, 1);\r\n background-image:\r\n radial-gradient(at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),\r\n radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),\r\n radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),\r\n radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),\r\n radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),\r\n radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);\r\n\r\n border-radius: 1rem;\r\n box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;\r\n\r\n border: 2px solid var(--primary);\r\n animation: border-color-change 3s linear infinite;\r\n}\r\n\r\n@keyframes border-color-change {\r\n 0% {\r\n border-color: var(--primary);\r\n }\r\n\r\n 50% {\r\n border-color: var(--line);\r\n }\r\n\r\n 100% {\r\n border-color: var(--primary);\r\n }\r\n}\r\n", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Verify that this file belongs in the PR.
The PR objectives describe adding a QuadRingLoader component, but this file contains only formatting changes (line-ending normalization from LF to CRLF) to the shiny-card component registry. This appears unrelated to the stated PR purpose.
Run the following script to check if QuadRingLoader files are present in this PR:
🏁 Script executed:
#!/bin/bash
# Description: Verify if QuadRingLoader component files exist in the repository
# Search for QuadRingLoader component files
fd -t f "quad-ring-loader" --exec echo "Found: {}"
# Also check if there are any references to QuadRingLoader in the codebase
rg -l "QuadRingLoader" --type json --type tsx --type tsLength of output: 221
🏁 Script executed:
#!/bin/bash
# Search for references to QuadRingLoader in JSON, TS, and TSX files
rg -n "QuadRingLoader" -g '*.json' -g '*.tsx' -g '*.ts'Length of output: 6801
Remove formatting-only changes to shiny-card registry
The file public/r/shiny-card.json only contains CRLF normalization for the existing ShinyCard component and is unrelated to the QuadRingLoader work. Revert or exclude this file from the PR.
🤖 Prompt for AI Agents
public/r/shiny-card.json lines 13-23: this change is a formatting-only CRLF
normalization for the existing ShinyCard registry and should not be part of the
QuadRingLoader PR; revert the file to its prior state or remove it from the
commit by restoring the file from main (git restore --source=origin/main
--staged --worktree public/r/shiny-card.json) or by un-staging/excluding it from
the PR so only QuadRingLoader-related files remain.
1 participant
✨ New Component: QuadRingLoader
Summary
This PR introduces a new QuadRingLoader component – a fast, vibrant loading animation built with SVG and styled-components.
It features four neon rings animated in sequence, giving a modern and energetic loading effect.
🔧 Changes
quad-ring-loader.tsxcomponentquad-ring-loader-demo.tsxdemo filequad-ring-loader.jsonstyled-componentsas a dependency🎨 Features
#ff0080#7928ca#00f5ff#00ff85📦 Installation