REFERENCE
- Gallery page: https://magpui.com/en/i/looping-app-splash-with-stripe-exit-e26695
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/looping-app-splash-with-stripe-exit-e26695/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/looping-app-splash-with-stripe-exit-e26695/clip.mp4
- Original post: https://x.com/valentingalmand/status/2117278213068181634 by @valentingalmand
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A full-screen mobile splash / loading screen that is a tiny show: the app icon expands into a lime screen, a tall black block drops in and squashes into a chunky sticker-style wordmark, then the screen keeps looping an energetic idle (jittering logo, horizontal lime/white stripes sweeping up) until the app reports it is ready, at which point an exit animation wipes the stripes over the screen and reveals the first app screen. It should feel loud, sporty, hand-made and fast, never like a spinner.
DESIGN SYSTEM
- Portrait, full bleed, safe areas respected. Background lime #C8F31D; secondary stripe tones #DDF94F and #EEFFA0; white #FFFFFF; ink #121212.
- Wordmark centered at ~42% height, ~78% of the screen width: heavy italic condensed display caps in white with a 6-8px black outline, sitting on a black 'sticker' slab whose bottom edge is ragged/dripping (SVG path with 8-12 uneven teeth).
- Small partner/brand mark bottom-center, 14-16px, ink #121212, 32px above the home indicator.
MOTION
- Enter (0-600ms): from the launch icon, a lime rounded rect scales from icon size to full screen (radius 28px -> 0), 450ms cubic-bezier(0.32,0.72,0,1).
- Drop (600-1100ms): a black slab 70% tall slides down and collapses to the logo slab height, ending in a squash (scaleY 0.92 -> 1.04 -> 1) 380ms cubic-bezier(0.34,1.56,0.64,1); the white wordmark is revealed from top to bottom with a clip-path mask in 250ms.
- Idle loop (repeat until ready): 1) the logo jitters: rotate -2deg/+2deg and translate +-3px, stepped every 90ms (steps(1)) for a hand-drawn boil; 2) 6-9 horizontal bands of lime shades and white, each 4-18% of the screen high with slightly wavy edges, travel from bottom to top behind the logo at different speeds (1.2-2.4s per pass, linear), so the background seems to boil; loop length 2.4s and always finish the current loop before exiting.
- Exit (when ready): the bands speed up and widen until white covers 100% (400ms, cubic-bezier(0.7,0,0.84,0)), the logo scales to 1.1 and fades, then the white wipes off upward revealing the app's first screen with its content sliding up 24px (350ms, cubic-bezier(0.16,1,0.3,1)).
SECTIONS
Parts: background, stripe bands layer, black slab, wordmark, small brand mark.
States: enter, idle loop, ready -> exit, reduced motion.
IMPLEMENTATION
- Best built as a Rive file with a state machine: 'enter' -> 'loop' (looping) -> 'exit' on a boolean input 'ready' set by the app when the first data has loaded; use a data-bound or input-driven transition that waits for the loop to end. A CSS/SVG + Motion version works too: animate SVG band paths with transforms and keep the jitter as stepped keyframes.
- Never block on the animation: if data loads before the enter finishes, queue the exit right after it; if loading takes more than 8s, keep looping and show a small 'Still loading' label.
- prefers-reduced-motion: no jitter and no moving stripes; a static logo on lime and a 200ms cross-fade into the app.
- Performance: transform and opacity only, no layout animation; one canvas when using Rive.
ADAPT TO THE PROJECT
Reuse the project's existing brand colours, fonts and logo; map the lime and ink to the closest existing tokens; never copy the original logo, wordmark or brand names, use a placeholder wordmark.
SUCCESS CHECK
- With a fake 5s network delay the logo and stripes keep looping smoothly and only exit after 'ready' is true.
- With data ready instantly, the enter plays once and the exit follows without a jump.
- With reduced motion on, the splash is static and fades into the app.
