mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tommaso CasaburiandClaude Opus 4.6
189d1c2165
Mirrors .cursor and .codex structure with Claude model assignments: - haiku for lighter tasks (translator, browser-check, profiler) - sonnet for standard tasks (code-quality, plan-implementer, etc.) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1.2 KiB
1.2 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Animate SVG Wrapper Instead of SVG Element | LOW | enables hardware acceleration | rendering, svg, css, animation, performance |
Animate SVG Wrapper Instead of SVG Element
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper instead.
Incorrect (animating SVG directly - no hardware acceleration):
function LoadingSpinner() {
return (
<svg
className="animate-spin"
width="24"
height="24"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" />
</svg>
)
}
Correct (animating wrapper div - hardware accelerated):
function LoadingSpinner() {
return (
<div className="animate-spin">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" />
</svg>
</div>
)
}
This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations.