Skip to content

feat: add intro splash screen animation on first app load#1030

Open
Arsh-sudo wants to merge 2 commits into
magic-peach:mainfrom
Arsh-sudo:feat/splash-screen
Open

feat: add intro splash screen animation on first app load#1030
Arsh-sudo wants to merge 2 commits into
magic-peach:mainfrom
Arsh-sudo:feat/splash-screen

Conversation

@Arsh-sudo
Copy link
Copy Markdown
Contributor

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)

  • Shows Reframe logo + tagline + animated loading bar
  • Fades in smoothly on mount
  • Holds for 1.4s then fades out over 500ms
  • Uses localStorage to show only on first visit

src/app/layout.tsx

  • Import and render <SplashScreen /> inside ThemeProvider

Accessibility

  • Fully respects prefers-reduced-motion — skips animation entirely
    for users with motion sensitivity
  • aria-hidden="true" so screen readers skip the splash overlay

Testing

  1. Clear localStorage (reframe_splash_shown)
  2. Visit the app
  3. Splash screen appears with logo + loading bar then fades out
  4. Refresh — splash does NOT appear again
  5. Set prefers-reduced-motion: reduce — splash is skipped entirely

- 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
@vercel
Copy link
Copy Markdown

vercel Bot commented May 23, 2026

@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.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 23, 2026

✅ PR Format Check Passed — @Arsh-sudo

Basic 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.

@github-actions
Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @Arsh-sudo!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions github-actions Bot added level:intermediate Intermediate level - 35 pts type:design UI/UX design type:testing Testing labels May 23, 2026
@magic-peach magic-peach added the type:feature New feature label May 24, 2026
@magic-peach
Copy link
Copy Markdown
Owner

@Arsh-sudo This splash screen implementation is clean and well-considered — it respects prefers-reduced-motion, uses localStorage to show only on first visit, has proper aria-hidden, and the loading bar animation is a nice touch. This is the better of the two splash screen PRs.

However, CI did not run the build/lint/typecheck checks for this PR — only validate and welcome passed. I need all of build, lint, and typecheck to pass before merging.

Please make a small push to re-trigger CI:

git commit --allow-empty -m 'ci: trigger checks'
git push

Once all checks pass, this will be merged and #1024 will be closed as a duplicate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:intermediate Intermediate level - 35 pts type:design UI/UX design type:feature New feature type:testing Testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Add intro/splash animation on app load before dashboard appears

2 participants