// scenes.jsx — the ScreenSync capture→sync→Figma motion piece.
const { useRef, useEffect } = React;
const STAGE_W = 1080, STAGE_H = 1200;
const CX = STAGE_W / 2;
const BOTTOM_PILL_Y = 1120, TOP_PILL_Y = 70;
const HUB_Y = 1118;
/* helpers */
const ease = Easing;
// triangular pulse 0→1→0
function pulse(t, center, rise, fall) {
if (t < center - rise || t > center + fall) return 0;
if (t <= center) return ease.easeOutQuad((t - (center - rise)) / rise);
return 1 - ease.easeInQuad((t - center) / fall);
}
// quick flash spike: fast up, slow down
function spike(t, center, up = 0.05, down = 0.32, peak = 0.92) {
if (t < center - up || t > center + down) return 0;
if (t <= center) return peak * ((t - (center - up)) / up);
return peak * (1 - ease.easeOutQuad((t - center) / down));
}
/* ───────── persistent background ───────── */
function Background() {
return null;
}
/* ───────── intro ───────── */
function IntroScene() {
const { localTime: t } = useSprite();
const inB = ease.easeOutBack(clamp(t / 0.7, 0, 1));
const markScale = 0.5 + 0.5 * inB;
const wordOp = clamp((t - 0.4) / 0.5, 0, 1);
const eyebrowOp = clamp((t - 0.8) / 0.5, 0, 1);
const out = clamp((t - 1.7) / 0.5, 0, 1); // fade up & out
const grpOp = (t < 0.7 ? inB : 1) * (1 - out);
const grpY = -out * 60;
return (
);
}
/* ───────── pills ───────── */
function FloatingPill({ y, icon, label, sub, opacity = 1, pulse: pl = 0 }) {
return (
);
}
/* counter chip on the right */
function CounterChip({ count, opacity, pop }) {
return (
);
}
/* ───────── persistent ScreenSync hub (the relay/中转站) ─────────
Bigger tag, fixed position, present the whole time. Pulses blue
each time a capture lands and when it pushes frames to Figma. */
function PersistentHub({ pulses = [], total = 8.1 }) {
const time = useTime();
const exit = MEase.inOut(clamp((time - (total - 0.5)) / 0.5, 0, 1));
const op = clamp(time / 0.5, 0, 1) * (1 - exit);
let pl = 0;
for (let i = 0; i < pulses.length; i++) {
const p = pulses[i];
pl = Math.max(pl, pulse(time, p[0], p[1], p[2]));
}
return (
);
}
/* flying captured thumbnail: phone → ScreenSync hub (straight line, fast) */
function FlyThumb({ variant, t }) {
if (t <= 0.001 || t >= 1) return null;
const e = MEase.inOut(t); // accelerates away, decelerates into the hub
const x = CX;
const y = interpolate([0, 1], [540, BOTTOM_PILL_Y - 6])(e);
const sc = interpolate([0, 0.2, 1], [0.6, 0.52, 0.06], MEase.inOut)(t);
const op = t < 0.82 ? 1 : 1 - MEase.out(clamp((t - 0.82) / 0.18, 0, 1));
return (
);
}
/* ───────── CAPTURE scene (phone + all 3 captures) ───────── */
function CaptureScene() {
const { localTime: t } = useSprite();
// entrance / exit of whole rig — quick settle, then straight into capturing
const enter = MEase.panel(clamp(t / 0.55, 0, 1));
const enterOp = MEase.out(clamp(t / 0.42, 0, 1));
const exit = MEase.inOut(clamp((t - 3.95) / 0.35, 0, 1));
const rigOp = enterOp * (1 - exit);
const riseY = (1 - enter) * 120 + exit * -90;
// phone scale is CONSTANT through all captures (settles on entrance, then holds
// with a barely-perceptible breath so the focal moment has weight).
const phoneScale = (1.08 + 0.08 * enter) * breathScale(t, (t - 0.7) / 0.6, 0.004);
// capture beats — start shortly after the phone lands, 1.0s cadence
const taps = [1.0, 2.0, 3.0];
const flashes = taps.map((c) => c + 0.07);
// current screen variant (swap completes before each tap so the captured frame matches)
let variant = 'travel';
if (t >= 2.4) variant = 'fitness'; else if (t >= 1.4) variant = 'music';
// gentle crossfade swap (no scale bounce)
const swapBlink = Math.max(pulse(t, 1.4, 0.18, 0.22), pulse(t, 2.4, 0.18, 0.22));
const screenOp = 1 - swapBlink * 0.62;
// side key self-presses — fast tier: quick press-in, springy release
const buttonPress = taps.reduce((a, c) => a + clickPulse(t, c, 0.11, 0.26), 0);
const flash = Math.max(...flashes.map((c) => spike(t, c, 0.04, 0.26)));
const screenShrink = Math.max(...flashes.map((c) => pulse(t, c + 0.03, 0.1, 0.3)));
// flying captured thumbnails (phone → hub) — med tier, uniform 0.6s flight
const fly1 = clamp((t - 1.15) / 0.6, 0, 1);
const fly2 = clamp((t - 2.15) / 0.6, 0, 1);
const fly3 = clamp((t - 3.15) / 0.6, 0, 1);
// sync glow on the phone (fires as each capture lands in the hub)
const syncPulse = Math.max(pulse(t, 1.75, 0.1, 0.5), pulse(t, 2.75, 0.1, 0.5), pulse(t, 3.75, 0.1, 0.5));
return (
{/* phone rig (no hand — the side key animates on its own) */}
{/* flying captured thumbnails */}
} label="ScreenSync" sub="organize" opacity={topPillOp} />
} label="Figma" sub="sync →" opacity={figmaPillOp} />
);
}
/* a captured frame "spit out" of the hub onto the (zoomed) canvas — straight, fast */
function EmitThumb({ variant, tx, ty, t, endScale = 1, exitFade = true }) {
if (t <= 0.001 || t >= 1) return null;
const e = MEase.outLong(t); // decelerates gently into its canvas spot
const x = interpolate([0, 1], [CX, tx])(e);
const y = interpolate([0, 1], [HUB_Y - 28, ty])(e);
const sc = interpolate([0, 0.2, 1], [0.05, 0.34 * endScale, endScale], MEase.outLong)(t);
const op = 1; // pure morph — no fade in/out
return (
);
}
/* ───────── FIGMA scene ─────────
Opens ALREADY zoomed, camera locked on frame 1's landing spot.
Each frame flies in to the centred spot; once it lands, the camera
pans to the next spot, then the next frame flies in. */
function FigmaScene() {
const { localTime: t, duration } = useSprite();
const inP = MEase.panel(clamp(t / 0.4, 0, 1)); // window settles w/ slight overshoot
const inOp = MEase.out(clamp(t / 0.32, 0, 1));
const exit = MEase.inOut(clamp((t - (duration - 0.55)) / 0.55, 0, 1));
const winOp = inOp * (1 - exit);
const winScale = (0.93 + 0.07 * inP) * (1 - exit * 0.06);
const winY0 = (1 - inP) * 40;
// camera: focused from the start; pans between landing spots
const amt = MEase.out(clamp(t / 0.35, 0, 1)); // focused almost immediately
const cs = 1 + 0.72 * amt;
// pan: each glide STARTS the instant the prior frame lands and finishes ~0.25s
// before the next thumb arrives — the camera leads the drop so slots never stack
const camFcx = interpolate([0.0, 1.1, 1.4, 1.65, 1.95], [131, 131, 305, 305, 479], MEase.inOut)(t);
// frames drop in rapid succession — 0.55s apart over a 0.6s flight (just-touching)
const emit = {
travel: clamp((t - 0.5) / 0.6, 0, 1),
music: clamp((t - 1.05) / 0.6, 0, 1),
fitness: clamp((t - 1.6) / 0.6, 0, 1),
};
// every frame lands at the (zoomed) canvas viewport centre
const CAN_CX = 615, CAN_CY = 564;
// frame appears at FULL size the instant its thumb lands — quick opacity handoff,
// no scale-up pop (the flying thumb fades to reveal the already-placed frame)
// travel (first) frame appears with a hard handoff (no cross-fade); the others keep the quick opacity handoff
// each frame is a HARD step at the instant its flying thumb completes its morph —
// the thumb has morphed (pos+size) to identical geometry, so the swap is invisible:
// a continuous deformation with no cut, no fade.
const fp = {
travel: t >= 1.1 ? 1 : 0,
music: t >= 1.65 ? 1 : 0,
fitness: t >= 2.2 ? 1 : 0,
};
let focus = null;
if (t < 1.65) focus = 'travel';
else if (t < 2.2) focus = 'music';
else focus = 'fitness';
return (
{/* frames spit out of the hub onto the centred (zoomed) canvas spot */}
);
}
/* ───────── CLOSE scene ───────── */
function CloseScene() {
const { localTime: t } = useSprite();
const inP = ease.easeOutBack(clamp(t / 0.7, 0, 1));
const markScale = 0.6 + 0.4 * inP;
const lineOp = clamp((t - 0.5) / 0.6, 0, 1);
const ctaOp = clamp((t - 1.0) / 0.5, 0, 1);
const ctaScale = ease.easeOutBack(clamp((t - 1.0) / 0.5, 0, 1));
return (
Your design library, finally in sync.
);
}
/* ───────── timestamp labeller (for commenting) ───────── */
function TimeLabeller({ rootRef }) {
const time = useTime();
useEffect(() => {
if (rootRef.current) rootRef.current.setAttribute('data-screen-label', `t=${time.toFixed(0)}s`);
}, [Math.floor(time)]);
return null;
}
/* dev seek hook */
function DevSeek() {
const tl = useTimeline();
useEffect(() => {
window.__seek = (t) => { tl.setPlaying(false); tl.setTime(t); };
window.__play = () => tl.setPlaying(true);
}, [tl]);
return null;
}
/* ───────── root ───────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"globalSpeed": 1
}/*EDITMODE-END*/;
const CAP_BASE = 4.3; // capture scene length
const FIG_BASE = 3.6; // figma scene length
const PAUSE = 0.2; // brief hand-off between phone and figma
function App() {
const rootRef = useRef(null);
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
const capEnd = CAP_BASE;
const figStart = capEnd + PAUSE;
const figEnd = figStart + FIG_BASE;
const total = figEnd;
// hub glow pulses (global time): captures landing + figma frames spitting out
const hubPulses = [
[1.75, 0.1, 0.45],
[2.75, 0.1, 0.45],
[3.75, 0.1, 0.45],
[figStart + 0.5, 0.09, 0.42],
[figStart + 1.05, 0.09, 0.42],
[figStart + 1.6, 0.09, 0.42],
];
return (
setTweak('globalSpeed', v)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();