perf(auth): remove resource-heavy animated backgrounds on sign-in page

[trim21]

Problem

The sign-in page causes browser freezing/lagging due to three layers of simultaneous continuous animations:

1. Canvas 60fps O(n^2) particle animation — 120 particles with ~7200 pairwise distance calculations + line draws per frame
2. 80 DOM floating particles in AuthLayout — each with box-shadow, animated via CSS particle-float
3. SVG gradient data-flow lines — 4 animated SVG lines with animate-data-flow

Solution

Replace all continuous animations with static CSS gradients:

• auth-layout.tsx: Drop 80 DOM particles, SVG animated lines, CSS grid-pulse. Use static backgroundImage (grid + radial gradients)
• sign-in/index.tsx: Remove AnimatedLineBackground Canvas component
• initialization/index.tsx: Same

AutoRouterDiagram SVG animations are kept — GPU-compositable only, negligible overhead.

Changes

File	Before	After
auth-layout.tsx	108 lines	48 lines
sign-in/index.tsx	Canvas animation	No animation
initialization/index.tsx	Canvas animation	No animation

[trim21]

这个导致我在linux桌面上直接无法用浏览器登录axonhub...

在我的个人电脑上吃了一个核

[greptile-apps]

Greptile Summary

This PR simplifies the auth pages by replacing continuous animated backgrounds with static styling. The main changes are:

• Removed the animated canvas layer from sign-in and initialization.
• Replaced AuthLayout particles, SVG lines, and pulsing grid with static CSS gradients.
• Kept the existing auth page content and layout structure.

Confidence Score: 5/5

The changed auth flow looks safe to merge after a small visual cleanup.

• The static AuthLayout backgrounds stay behind the page content.
• The removed animation wrapper is not needed for form behavior.
• One remaining stylesheet dependency can make the auth card entry animation disappear.

frontend/src/features/auth/sign-in/index.tsx

Important Files Changed

Filename	Overview
frontend/src/features/auth/auth-layout.tsx	Replaces decorative animated background layers with static grid and radial-gradient layers.
frontend/src/features/auth/sign-in/index.tsx	Removes the canvas background and stylesheet import from the sign-in page.
frontend/src/features/auth/initialization/index.tsx	Removes the shared animated line background from the initialization page.

_{Reviews (1): Last reviewed commit: "perf(auth): remove resource-heavy animat..." | Re-trigger Greptile}

[looplj]

这个页面也会一直停留吧。
你这个改动的效果是什么。

[trim21]

就是只剩这个动画了,不再有背景的3d粒子效果了

screen_recording_2026-07-09_18-18-08.mp4

[trim21]

这个页面也会一直停留吧。 你这个改动的效果是什么。

能考虑一下这个嘛

[looplj]

没看出来有什么很大必要性。能不能优化性能解决？

[trim21]

没看出来有什么很大必要性。能不能优化性能解决？

我个人觉得登录界面这个粒子效果就没什么必要性...

[trim21]

首页这个数据流的动画还是在的，现在的注册/登录页面也不是完全静态的