// scene.jsx — Café Lumière wallet pass reveal
// One phone, flat-lay. Dormant → wake → notification → tap → wallet card.
// ─── Layout constants ───────────────────────────────────────────────────────
const W = 1408;
const H = 792;
const PHONE_W = 326;
const PHONE_H = 668;
const PHONE_X = (W - PHONE_W) / 2;
const PHONE_Y = (H - PHONE_H) / 2 - 6;
const BEZEL = 7; // titanium frame thickness (the silver edge)
const INNER = 5; // black bezel thickness between frame and screen
const SCREEN_W = PHONE_W - (BEZEL + INNER) * 2;
const SCREEN_H = PHONE_H - (BEZEL + INNER) * 2;
const SCREEN_X = PHONE_X + BEZEL + INNER;
const SCREEN_Y = PHONE_Y + BEZEL + INNER;
const PHONE_RADIUS = 52; // outer rounded corner
const SCREEN_RADIUS = 40; // inner display corner (PHONE_RADIUS - (BEZEL+INNER))
// ─── Timeline (seconds) ─────────────────────────────────────────────────────
// The notification IS what wakes the screen — wake and notification arrival
// share the same beat.
const T = {
dormantEnd: 0.40, // black screen: was 0.90s, now 0.40s (−0.5s)
wakeStart: 0.40,
wakeEnd: 1.30,
notifStart: 0.55,
notifSettle: 1.55,
notifHoldEnd: 2.95, // notif visible: 1.55→2.95 = 1.4s (was 1.9s, −0.5s)
tapStart: 2.95,
tapEnd: 3.30,
dissolveStart: 3.35,
dissolveEnd: 3.90, // faster swipe (0.55s, was 1.10s)
endHold: 8.50,
};
const DURATION = 8.5;
// ─── Top-level scene ────────────────────────────────────────────────────────
function Scene() {
const t = useTime();
return (
);
}
// ─── Surface (the tabletop) — solid color ───────────────────────────────────
function Surface() {
return (
);
}
// ─── Cast shadow under phone (two-layer: contact + ambient) ─────────────────
function PhoneShadow({ t }) {
// Light is from upper-left; shadow casts down-right.
// Shadow tightens slightly during the dormant beat as the light "settles".
const tighten = interpolate(
[0, T.dormantEnd],
[1.0, 0.78],
Easing.easeOutCubic
)(t);
return (
{/* Wide ambient — large, soft */}
{/* Tight contact shadow — sharper, right under edges */}
);
}
// ─── Phone frame ────────────────────────────────────────────────────────────
// Layered titanium: outer rounded rect with brushed gradient, inner thin black
// bezel ring, then the screen. Side buttons rendered with their own gradients.
function PhoneFrame({ t }) {
return (
{/* Frame inner specular streaks — thin light streaks along each long edge */}
{/* Inner black bezel ring — thick black band between titanium and screen */}
{/* Side buttons — volume up, volume down, mute on left */}
{/* mute switch */}
{/* volume up */}
{/* volume down */}
{/* Power on right */}
{/* Screen (sits on top of the inner bezel) */}
);
}
function SideButton({ side, top, h }) {
const isLeft = side === 'left';
return (
);
}
// ─── Screen — switches content depending on time ────────────────────────────
function Screen({ t }) {
// Screen wake fade
const wakeAlpha = interpolate(
[T.wakeStart, T.wakeEnd],
[0, 1],
Easing.easeOutCubic
)(t);
// Swipe up — like tapping a notification on iOS: lock screen slides up,
// revealing the app (wallet) underneath.
const swipe = interpolate(
[T.dissolveStart, T.dissolveEnd],
[0, 1],
Easing.easeInOutCubic
)(t);
// Lock screen translateY (0 → -100% of screen height) + subtle scale down
const lockTranslate = -swipe * SCREEN_H;
const lockScale = 1 - swipe * 0.04;
return (
{/* Wallet layer — sits underneath, fully present so the swipe reveals it */}
0 ? 1 : 0,
willChange: 'opacity',
}}>
{/* Lock screen layer — slides up and shrinks slightly */}
);
}
// ─── Lock screen — the user's screenshot + notification overlay ─────────────
function LockScreen({ t }) {
return (
{/* Full lock-screen screenshot — status bar, clock, date, utility
buttons and home indicator are baked into the image. */}
{/* Notification overlay */}
);
}
// ─── Wallpaper — user-supplied image ────────────────────────────────────────
function Wallpaper() {
return (
);
}
// ─── Status bar ─────────────────────────────────────────────────────────────
function StatusBar({ mode = 'light', time = '10:09' }) {
const color = mode === 'light' ? '#fff' : '#1a1a1a';
return (
{time}
{/* Signal */}
{/* Wifi */}
{/* Battery */}
);
}
// ─── Dynamic island ─────────────────────────────────────────────────────────
function DynamicIsland() {
return (
);
}
function FlashlightIcon() {
// Vertical torch — small head, body, dot at the bulb end.
return (
);
}
function CameraIcon() {
// Camera body with lens — simple white silhouette.
return (
);
}
// ─── Notification ───────────────────────────────────────────────────────────
function Notification({ t }) {
// The notification is ALREADY there when the screen wakes — no separate
// entrance animation. The lock-screen layer's wake fade handles its appearance.
// Tap compress: scale 1 → 0.965 → 1
const tapPhase =
t < T.tapStart ? 0
: t > T.tapEnd ? 1
: (t - T.tapStart) / (T.tapEnd - T.tapStart);
const press = Math.sin(tapPhase * Math.PI); // 0..1..0
const tapScale = 1 - press * 0.035;
const tapBlur = press * 1.2;
// With the swipe-up transition, the notification rides up with the lock
// screen — no separate fade-out.
const fadeOut = 1;
// Position: just above the bottom utility buttons (camera / flashlight).
// Utility buttons sit at y = SCREEN_H - 96 and are 50px tall.
const restY = SCREEN_H - 96 - 96; // ~28px gap above the buttons
return (
);
}
// Coffee cup glyph: cup with steam ticks (used in icon + stamps)
function CoffeeCupGlyph({ size = 22, color = '#a87637' }) {
return (
);
}
// ─── Wallet view — full screenshot from reference ───────────────────────────
function WalletView({ t }) {
return (
{/* Notification overlay */}
