feat: add laptop icon with hover animation#114
feat: add laptop icon with hover animation#114BASAVARAJ-CHIPPALAKATTI wants to merge 3 commits intoitshover:masterfrom
Conversation
|
@BASAVARAJ-CHIPPALAKATTI is attempting to deploy a commit to the abhijit-jha's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughAdds a new animated LaptopIcon React component (forwardRef with start/stop imperative API) and registers it in the icon registries ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
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.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@icons/laptop-icon.tsx`:
- Around line 28-32: The SVG animation uses a 3D transform rotateX on the ".lid"
element which is unreliable across browsers; change the animate call for the
".lid" selector in icons/laptop-icon.tsx to use a 2D transform (for example
animate the element's y offset and/or scaleY with an appropriate
transformOrigin) to simulate the lid opening/closing instead of rotateX, and
match the easing/duration used by the keyboard animation to keep motion
consistent; ensure you update any transform-origin or attribute settings on the
".lid" element so the pivot looks correct.
🧹 Nitpick comments (3)
icons/laptop-icon.tsx (1)
12-39: Concurrent animations:startdoesn'tawaitindividualanimatecalls.The four
animatecalls instartare fired withoutawait, so they run concurrently — which appears intentional for parallel animations. However, the function is declaredasyncand returnsundefined(no composed promise). If a consumer everawaitsstartAnimation(), it won't wait for animations to complete. This is fine for the current hover usage but worth noting for the imperative API contract.icons/index.ts (1)
262-266: Inconsistent indentation in the new ICON_LIST entry.The properties of the new entry are indented with 2 spaces, while all other entries use 4 spaces (e.g., lines 268-270). This will likely be caught by a formatter, but worth fixing for consistency.
🔧 Proposed fix
{ - name: "laptop-icon", - icon: LaptopIcon, - keywords: ["computer", "device", "tech", "laptop", "macbook", "notebook"], + name: "laptop-icon", + icon: LaptopIcon, + keywords: ["computer", "device", "tech", "laptop", "macbook", "notebook"], },lib/icons.ts (1)
2-5: Same indentation inconsistency as inicons/index.ts.🔧 Proposed fix
{ - name: "laptop icon", - path: "/icons/laptop-icon", + name: "laptop icon", + path: "/icons/laptop-icon", },
| animate( | ||
| ".lid", | ||
| { rotateX: [0, 3, 0] }, | ||
| { duration: 0.5, ease: "easeOut" }, | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the laptop-icon.tsx file to understand the context
fd laptop-icon.tsx --type fRepository: itshover/itshover
Length of output: 82
🌐 Web query:
CSS rotateX 3D transform support on SVG elements browsers compatibility
💡 Result:
TL;DR (rotateX / other 3D CSS transforms on SVG elements)
- Reliable cross‑browser: apply
rotateX()to the outer<svg>element (or an HTML wrapper around the SVG). Browsers treat the root<svg>much like a normal element for CSS transforms. (stackoverflow.com) - Not reliably supported (inconsistent): applying
rotateX()/rotate3d()directly to SVG graphics elements like<g>,<path>,<circle>, etc. is not interoperable; some browsers support parts of it, others don’t. (stackoverflow.com)
Practical compatibility notes
- Firefox: has (at least some) support for 3D CSS transforms on SVG shapes, but it’s described as experimental / not something you can rely on cross‑browser (often requiring SVG/CSS tweaks like
overflow: visible). (stackoverflow.com) - Chrome / Safari (Blink/WebKit): general web guidance and reported behavior indicate you can’t count on 3D transforms on individual SVG shapes; typical workaround is transforming the whole
<svg>(or wrapping it). (stackoverflow.com) - IE / old EdgeHTML: CSS transforms on SVG elements don’t work in IE (EdgeHTML gained support for CSS transforms on SVG later, but that’s about SVG/CSS transforms generally—not a guarantee for per‑shape 3D). (css-tricks.com)
Why this is confusing
- Specs/MDN allow a CSS
transformcounterpart for SVG, but explicitly warn that CSS transform-function compatibility on SVG isn’t guaranteed. (developer.mozilla.org) - “3D transforms supported by browsers” tables (e.g., caniuse “CSS3 3D Transforms”) describe HTML/CSS support overall, not “3D transforms on SVG graphics elements” specifically. (caniuse.com)
What to do for cross‑browser 3D tilt
- Put the SVG inside a wrapper and transform the wrapper (or transform the root
<svg>):.wrap { perspective: 800px; } .wrap svg { transform: rotateX(45deg); transform-origin: 50% 50%; }
Citations:
- 1: https://stackoverflow.com/questions/56532720/what-is-right-way-to-transform-svg-element-rotatex?utm_source=openai
- 2: https://stackoverflow.com/questions/56532720/what-is-right-way-to-transform-svg-element-rotatex?utm_source=openai
- 3: https://stackoverflow.com/questions/56532720/what-is-right-way-to-transform-svg-element-rotatex?utm_source=openai
- 4: https://stackoverflow.com/questions/30476852/3d-transforms-on-svg-element?utm_source=openai
- 5: https://css-tricks.com/transforms-on-svg-elements/?utm_source=openai
- 6: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform?utm_source=openai
- 7: https://caniuse.com/transforms3d?utm_source=openai
🏁 Script executed:
# Read the laptop-icon.tsx file
cat -n icons/laptop-icon.tsx | head -50Repository: itshover/itshover
Length of output: 1880
🏁 Script executed:
# Also check around lines 28-32 more carefully
cat -n icons/laptop-icon.tsx | sed -n '1,40p'Repository: itshover/itshover
Length of output: 1457
🏁 Script executed:
# Read more of the file to see the SVG structure and identify what .lid targets
cat -n icons/laptop-icon.tsx | sed -n '50,136p'Repository: itshover/itshover
Length of output: 2651
rotateX may not work on SVG path elements in all browsers.
CSS 3D transforms like rotateX applied to SVG graphics elements (<path>, <rect>, <circle>) have inconsistent browser support. Chrome/Safari don't reliably support them, Firefox has experimental support, and IE doesn't support them. Consider using a 2D alternative like y offset or scaleY to simulate the lid movement, consistent with the keyboard animation already in use.
🤖 Prompt for AI Agents
In `@icons/laptop-icon.tsx` around lines 28 - 32, The SVG animation uses a 3D
transform rotateX on the ".lid" element which is unreliable across browsers;
change the animate call for the ".lid" selector in icons/laptop-icon.tsx to use
a 2D transform (for example animate the element's y offset and/or scaleY with an
appropriate transformOrigin) to simulate the lid opening/closing instead of
rotateX, and match the easing/duration used by the keyboard animation to keep
motion consistent; ensure you update any transform-origin or attribute settings
on the ".lid" element so the pivot looks correct.
Description
Adds a new laptop icon with hover animations:
Files Added/Modified
icons/laptop-icon.tsx- New icon componenticons/index.ts- Added to ICON_LISTlib/icons.ts- Added to routingType of Change
Screenshots
Checklist
Summary by CodeRabbit