feat: add intro splash screen animation on first app load#1030
feat: add intro splash screen animation on first app load#1030Arsh-sudo wants to merge 2 commits into
Conversation
- Create SplashScreen component with Reframe logo, tagline and loading bar - Animates in on first visit, fades out after 1.4s - Uses localStorage to show only on first visit - Respects prefers-reduced-motion by skipping animation entirely - Loading bar animation matches brand red color Closes magic-peach#1017
|
@Arsh-sudo is attempting to deploy a commit to the magic-peach1's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ PR Format Check Passed — @Arsh-sudoBasic format checks passed. A maintainer will review your code changes. This does not mean the PR is approved — it just means the format is correct. |
👋 Thanks for your PR, @Arsh-sudo!Welcome to Reframe — a browser-based video editor built for everyone 🎬 What happens next
Quick checklist
Useful links
Happy coding! 🎉 |
|
@Arsh-sudo This splash screen implementation is clean and well-considered — it respects However, CI did not run the build/lint/typecheck checks for this PR — only Please make a small push to re-trigger CI: git commit --allow-empty -m 'ci: trigger checks'
git pushOnce all checks pass, this will be merged and #1024 will be closed as a duplicate. |
Summary
Closes #1017
Adds a polished splash screen that appears on first visit before the
main app loads.
What's New
src/components/SplashScreen.tsx(new file)localStorageto show only on first visitsrc/app/layout.tsx<SplashScreen />insideThemeProviderAccessibility
prefers-reduced-motion— skips animation entirelyfor users with motion sensitivity
aria-hidden="true"so screen readers skip the splash overlayTesting
reframe_splash_shown)prefers-reduced-motion: reduce— splash is skipped entirely