skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 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"
style={{
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), transform ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1)`,
transition: `opacity ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1)`,
paddingTop: 'env(safe-area-inset-top, 0px)',
paddingBottom: 'env(safe-area-inset-bottom, 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">
{/* The orange wheel mark rolls in, keeps a slow roll, and throws sparks */}
<div className="relative" style={anim('splashRise 620ms cubic-bezier(0.22,1,0.36,1) both')}>
<div
className="relative z-10 flex flex-col items-center px-8"
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 */}
<div
className="absolute -inset-3 rounded-full"
@ -254,6 +263,7 @@ export function SplashScreen() {
/>
</div>
</div>
</div>
{/* Wordmark */}
<h1

4
src/index.css
View file

@ -340,6 +340,10 @@
@keyframes splashSpin {
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 {
0% { opacity: 0; transform: translateX(-58px) rotate(-210deg) scale(0.82); }
62% { opacity: 1; transform: translateX(5px) rotate(14deg) scale(1.03); }