Splash Screen
Onboarding & Auth · 6 checks · 19 resources
The branded launch frame that covers app initialisation and hands off to the first real screen.
Before you ship
- 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
- GSAP · JavaScript animation engine with 19 plugins, now free for commercial useMotion & InteractionS
- Paper Shaders · 30 zero-dependency canvas shaders as React components or vanilla JS, Apache-2.0Textures, Backgrounds & AssetsS
- Radiant · Zero-dependency generative shaders as single HTML files, embedded by iframeTextures, Backgrounds & AssetsS
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgroundsMotion & InteractionS
- Rive · Vector animation editor whose State Machine files run natively in app runtimesMotion & InteractionS
- Sleek · An AI mobile app designer built for coding agents, with a REST API, an OpenAPI spec, an agents.md and an installable skillAgent Design ToolingS
- Colorion CSS Text Effects · 78 pure-CSS animated text effects; copy the CSS or copy an agent promptMotion & InteractionA
- Grainient Shader Editor · Real-time shader gradient editor; customize and embed animated backgroundsTextures, Backgrounds & AssetsA
- Haikei · 15 browser generators that export blob, wave and gradient backgrounds as SVG or PNGTextures, Backgrounds & AssetsA
- LottieFiles for Figma · Figma plugin to import Lottie animations and export frames as dotLottieMotion & InteractionA
- Radiant Shader Gallery · Browsable gallery of 87 free WebGL and Canvas 2D background effectsTextures, Backgrounds & AssetsA
- Ripplix · 7,000+ recorded UI animations from 1,000+ real apps, filterable by elementInspiration GalleriesA
- ThreeUI · Three.js hero components, shaders and landing-page templates with a Pro-gated remote MCP server — Community free, Pro $99/yr or $199 lifetimeTextures, Backgrounds & AssetsA
- aengel.io Laboratory · 19 WebGPU and TSL experiments — compute fluids, raymarching, refraction — reference only, no source codeTextures, Backgrounds & AssetsB
- Lottielab · A Lottie animation editor for product teams, used by a stated 500,000 designers, that ships straight to apps and sitesMotion & InteractionB
- MetalForge · 400+ shader effects for SwiftUI, React Native, and the web, tuned with sliders and exported as codeTextures, Backgrounds & AssetsB
- Spline · Browser-based 3D design tool that exports interactive scenes to React, web components and nativeMotion & InteractionB
- SVGator · Online SVG animation editor that exports animated SVG, Lottie, GIF, and video, with an MCP for AI agentsMotion & InteractionB
- Tenkit · Expo scaffolder for white-label and multi-tenant mobile appsBlocks, Templates & ThemesB