\")" }} />
);
}
/* ============================================================ SCENE 1
0–4s — CallBack, live. A phone: missed-call banner drops, then an
auto-sent WhatsApp reply. Camera slowly pushes in.
*/
function PhoneScene() {
const t = useTime(); // global time
// camera: slow push-in across the scene
const camScale = interpolate([0, 4], [1.0, 1.16], Easing.easeInOutSine)(t);
const camY = interpolate([0, 4], [0, -26], Easing.easeInOutSine)(t);
return (
{({ localTime: lt }) => {
const exit = clamp((lt - 3.85) / 0.3, 0, 1);
const phoneIn = Easing.easeOutCubic(clamp(lt / 0.6, 0, 1));
const bannerIn = Easing.easeOutBack(clamp((lt - 0.7) / 0.5, 0, 1));
const bubbleIn = Easing.easeOutCubic(clamp((lt - 1.9) / 0.5, 0, 1));
const sentIn = clamp((lt - 2.7) / 0.4, 0, 1);
return (
Tramata Cloud · CallBack
{/* phone */}
{/* notch */}
{/* status bar */}
9:41WhatsApp
{/* missed call banner */}
Missed call
+351 919 ··· 204 · just now
{/* auto-reply bubble */}
Olá! Desculpe não termos atendido — como podemos ajudar? 🌊
✓ auto-sent by CallBack · 4s
);
}}
);
}
/* ============================================================ SCENE 2
4–6.9s — The line-up. Three product cards rise in sequence.
*/
function Card({ name, price, sub, accent, delay, lt, glyph }) {
const inP = Easing.easeOutBack(clamp((lt - delay) / 0.55, 0, 1));
const op = clamp((lt - delay) / 0.4, 0, 1);
return (
{glyph}
{name}
{sub}
{price}
);
}
function LineupScene() {
return (
{({ localTime: lt }) => {
const inAll = clamp(lt / 0.3, 0, 1);
const exit = clamp((lt - 2.7) / 0.3, 0, 1);
const drift = interpolate([0, 3], [18, -18], Easing.easeInOutSine)(lt);
return (
Four tools · one job each
Small tools that pay for themselves.
);
}}
);
}
/* ============================================================ SCENE 3
6.9–8.4s — The bundle math. €19 + €29 + €39 = €87 → €69/mo.
*/
function MathScene() {
return (
{({ localTime: lt }) => {
const inA = Easing.easeOutCubic(clamp(lt / 0.4, 0, 1));
const strike = clamp((lt - 0.55) / 0.35, 0, 1);
const swap = Easing.easeOutBack(clamp((lt - 0.95) / 0.45, 0, 1));
const swapOp = clamp((lt - 0.95) / 0.3, 0, 1);
const exit = clamp((lt - 1.35) / 0.25, 0, 1);
return (
Bundle all three
{/* sum line */}
€19 + €29 + €39 = €87
{/* bundle price */}
€69
/mo
save €18
);
}}
);
}
/* ============================================================ SCENE 4
8.4–10s — Sign-off. TRAMATA CLOUD wordmark + tagline.
*/
function SignoffScene() {
return (
{({ localTime: lt }) => {
const tabIn = Easing.easeOutCubic(clamp(lt / 0.4, 0, 1));
const markIn = clamp((lt - 0.2) / 0.5, 0, 1);
const lineIn = clamp((lt - 0.7) / 0.5, 0, 1);
const drift = interpolate([0, 1.6], [1.0, 1.05], Easing.easeOutSine)(lt);
return (
TRAMATA CLOUD
Tools that pay for themselves in a month.
);
}}
);
}
/* ---------- timestamp label for review ---------- */
function ClockLabel() {
const t = useTime();
const root = React.useRef(null);
React.useEffect(() => {
const host = document.getElementById("video-root");
if (host) host.setAttribute("data-screen-label", "t=" + t.toFixed(1) + "s");
}, [Math.floor(t)]);
return null;
}
function Video() {
const EMBED = /embed/.test(typeof location !== "undefined" ? location.hash : "");
return (
);
}
ReactDOM.createRoot(document.getElementById("video-root")).render(
);