Describe the bug
The newly added LandingScreen fails to display its content, resulting in a black screen with blurry floating orbs instead of the intended UI. The text and buttons remain completely hidden (stuck at opacity: 0).
To Reproduce
Steps to reproduce the behavior:
- Pull the latest changes containing the new Landing Screen feature (
df9eb06e).
- Start the frontend development server (
npm run dev or equivalent).
- Open the application in the browser.
- Observe that the landing screen content never appears, leaving only the background gradients visible.
Expected behavior
The application should successfully animate and fade in the "ImageLab - Visual Image Processing" landing screen, presenting the user with the steps and a "Start Building" button.
Screenshots
Environment:
- OS: Windows 11
- Browser: Chrome
- Node.js version: v24.13.0
- Python version: 3.13.7
Additional context
This issue is caused by defining @keyframes (fadeUp, float1, float2) inside a CSS Module (LandingScreen.module.css). Vite automatically hashes animation names inside CSS Modules to prevent global scope conflicts. However, LandingScreen.tsx applies these animations via inline styles using hardcoded string names (e.g., animation: "fadeUp 0.6s 0.1s ease forwards"). Because the inline style string does not match the hashed keyframe name from the CSS module, the animations fail to execute. Moving the @keyframes definitions to a global stylesheet like index.css resolves the issue.
Describe the bug
The newly added
LandingScreenfails to display its content, resulting in a black screen with blurry floating orbs instead of the intended UI. The text and buttons remain completely hidden (stuck atopacity: 0).To Reproduce
Steps to reproduce the behavior:
df9eb06e).npm run devor equivalent).Expected behavior
The application should successfully animate and fade in the "ImageLab - Visual Image Processing" landing screen, presenting the user with the steps and a "Start Building" button.
Screenshots
Environment:
Additional context
This issue is caused by defining
@keyframes(fadeUp,float1,float2) inside a CSS Module (LandingScreen.module.css). Vite automatically hashes animation names inside CSS Modules to prevent global scope conflicts. However,LandingScreen.tsxapplies these animations via inline styles using hardcoded string names (e.g.,animation: "fadeUp 0.6s 0.1s ease forwards"). Because the inline style string does not match the hashed keyframe name from the CSS module, the animations fail to execute. Moving the@keyframesdefinitions to a global stylesheet likeindex.cssresolves the issue.