Skip to content

fix: resolve blank landing screen due to hashed css module animations#326

Open
MohamedAli1937 wants to merge 1 commit intoc2siorg:mainfrom
MohamedAli1937:fix/landing-screen-animations
Open

fix: resolve blank landing screen due to hashed css module animations#326
MohamedAli1937 wants to merge 1 commit intoc2siorg:mainfrom
MohamedAli1937:fix/landing-screen-animations

Conversation

@MohamedAli1937
Copy link
Copy Markdown
Contributor

Description

This PR resolves an issue where the new Landing Screen was displaying as a blank black screen with blurry orbs, rather than showing the intended text and buttons.

The bug occurred because @keyframes (fadeUp, float1, float2) were defined inside a CSS Module (LandingScreen.module.css), which Vite automatically hashes. However, the LandingScreen.tsx component applies these animations via inline styles using hardcoded string names (e.g., animation: "fadeUp 0.6s..."), causing the animations to fail and leaving the content stuck at opacity: 0.

Changes:

  • Removed keyframe definitions from LandingScreen.module.css.
  • Moved the fadeUp, float1, and float2 keyframes to the global index.css stylesheet so they can be correctly targeted by the inline styles.

Fixes #325

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update

How Has This Been Tested?

Verified that the animations now correctly execute and the landing screen fades in upon loading the app.

  • Existing tests pass
  • New tests added
  • Manual testing

Screenshots (if applicable)

N/A

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review
  • I have added/updated documentation as needed
  • My changes generate no new warnings
  • Tests pass locally

@MohamedAli1937 MohamedAli1937 force-pushed the fix/landing-screen-animations branch from 1b35876 to 88c9520 Compare April 23, 2026 21:21
@MohamedAli1937 MohamedAli1937 force-pushed the fix/landing-screen-animations branch from 536acee to 4b7307f Compare April 25, 2026 16:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] App shows black screen with floating orbs instead of landing page

1 participant