/expo-splash-video-example

Recreation of the "Universe - Website builder" animated splash screen effect, using Expo

Primary LanguageTypeScript

Splash Screen Example

Run in Expo Snack

Recreates the animated splash screen effect from the WWDC 2023 finalist "Universe - website builder".

Demo Video

universe-website-builder.mp4

How it works

  • Set everything to black in the app.json:
    • backgroundColor: '#000'
    • splash.backgroundColor: '#000'
    • ios.splash.backgroundColor: '#000'
  • Keep the splash screen open until the video is loaded into memory (note: there's a different video for tablets).
  • Once loaded, play the video and hide the native splash screen.
  • After the video finishes, fade everything out to reveal the rest of the app.

Only requires a couple components, works on Android too!

🚀 How to use

  • Run yarn or npm install
  • Run npx expo to start the app.

📝 Notes