skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions 1

feat: smoother native-to-splash handoff and app reveal

Browse source
This commit is contained in:
SkateSpots 2026-10-30 09:03:13 +07:00
parent a9dffbf09d
commit 9838aa6d72
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/SplashScreen.tsx
View file

@ -156,8 +156,7 @@ export function SplashScreen() {
className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#050505] overflow-hidden" className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#050505] overflow-hidden"
style={{ style={{
opacity: leaving ? 0 : 1, opacity: leaving ? 0 : 1,
transform: leaving && !prefersReducedMotion ? 'scale(1.04)' : 'scale(1)', transition: `opacity ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1)`,
transition: `opacity ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1), transform ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1)`,
paddingTop: 'env(safe-area-inset-top, 0px)', paddingTop: 'env(safe-area-inset-top, 0px)',
paddingBottom: 'env(safe-area-inset-bottom, 0px)', paddingBottom: 'env(safe-area-inset-bottom, 0px)',
paddingLeft: 'env(safe-area-inset-left, 0px)', paddingLeft: 'env(safe-area-inset-left, 0px)',
@ -189,9 +188,19 @@ export function SplashScreen() {
}} }}
/> />
<div className="relative z-10 flex flex-col items-center px-8"> <div
{/* The orange wheel mark rolls in, keeps a slow roll, and throws sparks */} className="relative z-10 flex flex-col items-center px-8"
<div className="relative" style={anim('splashRise 620ms cubic-bezier(0.22,1,0.36,1) both')}> style={{
opacity: leaving ? 0 : 1,
transform: leaving && !prefersReducedMotion ? 'translateY(-10px) scale(0.985)' : 'translateY(0) scale(1)',
transition: 'opacity 380ms ease, transform 520ms cubic-bezier(0.22,1,0.36,1)',
}}
>
{/* The orange wheel mark rolls in, keeps a slow roll, and throws sparks.
The handoff wrapper starts near the native splash's centred logo and
settles into the column, so the native → web handoff has no jump. */}
<div style={anim('splashLogoHandoff 760ms cubic-bezier(0.22,1,0.36,1) both')}>
<div className="relative">
{/* Rotating conic ring — orange to match the wheel, with a lime kick */} {/* Rotating conic ring — orange to match the wheel, with a lime kick */}
<div <div
className="absolute -inset-3 rounded-full" className="absolute -inset-3 rounded-full"
@ -254,6 +263,7 @@ export function SplashScreen() {
/> />
</div> </div>
</div> </div>
</div>
{/* Wordmark */} {/* Wordmark */}
<h1 <h1

4
src/index.css
View file

@ -340,6 +340,10 @@
@keyframes splashSpin { @keyframes splashSpin {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
@keyframes splashLogoHandoff {
0% { opacity: 1; transform: translateY(56px) scale(0.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes splashLogoRollIn { @keyframes splashLogoRollIn {
0% { opacity: 0; transform: translateX(-58px) rotate(-210deg) scale(0.82); } 0% { opacity: 0; transform: translateX(-58px) rotate(-210deg) scale(0.82); }
62% { opacity: 1; transform: translateX(5px) rotate(14deg) scale(1.03); } 62% { opacity: 1; transform: translateX(5px) rotate(14deg) scale(1.03); }