Splash Screen
The branded launch frame that covers app initialisation and hands off to the first real screen.
Onboarding & Auth · 6 checks · 17 resources
Before you ship
6- 01Logo or wordmark — the app brand mark centred on a clean background
- 02Brand background — a solid or subtly branded background that makes the transition from the mobile home screen clear
- 03Launch duration — the splash visible only for as long as the app genuinely needs to initialise, not used as decorative padding
- 04Transition to first screen — a smooth, intentional animation into the first real screen, not a hard cut or jarring flash
- 05No interactive elements — no buttons, inputs, or tappable areas; it is purely for transition
- 06Loading indicator — for any initialisation taking more than a second, so the user knows something is happening
Resources that help you build this
17- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Paper Shaders · 30 zero-dependency canvas shaders as React components or vanilla JS, Apache-2.0
- Radiant · Zero-dependency generative shaders as single HTML files, embedded by iframe
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- Rive · Vector animation editor whose State Machine files run natively in app runtimes
- Sleek · An AI mobile app designer built for coding agents, with a REST API, an OpenAPI spec, an agents.md and an installable skill
- Colorion CSS Text Effects · 78 pure-CSS animated text effects; copy the CSS or copy an agent prompt
- Grainient Shader Editor · Real-time shader gradient editor; customize and embed animated backgrounds
- Haikei · 15 browser generators that export blob, wave and gradient backgrounds as SVG or PNG
- LottieFiles for Figma · Figma plugin to import Lottie animations and export frames as dotLottie
- Radiant Shader Gallery · Browsable gallery of 87 free WebGL and Canvas 2D background effects
- Ripplix · 7,000+ recorded UI animations from 1,000+ real apps, filterable by element
- ThreeUI · Three.js hero components, shaders and landing-page templates with a Pro-gated remote MCP server — Community free, Pro $99/yr or $199 lifetime
- aengel.io Laboratory · 19 WebGPU and TSL experiments — compute fluids, raymarching, refraction — reference only, no source code
- Lottielab · A Lottie animation editor for product teams, used by a stated 500,000 designers, that ships straight to apps and sites
- Spline · Browser-based 3D design tool that exports interactive scenes to React, web components and native
- Tenkit · Expo scaffolder for white-label and multi-tenant mobile apps