EvanBacon / expo-splash-video-example

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

Splash Screen Example

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

• Expo Assets guide
• Expo Splash Screen guide
• Universe - Website Builder