const { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } = window.Remotion; const easeOutExpo = Easing.bezier(0.16, 1, 0.3, 1); const easeInBack = Easing.bezier(0.36, 0, 0.66, -0.56); const easeOut = Easing.bezier(0.25, 1.0, 0.35, 1.0); const easeIn = Easing.bezier(0.55, 0.05, 0.68, 0.15); const overshoot = Easing.bezier(0.34, 1.56, 0.64, 1); const cl = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }; // ---- Screenshot URLs ---- const SCREENSHOT_1 = 'https://pub-f970b0ef1f2e418e8d902ba0973ff5cf.r2.dev/projects/d523a868-e9ab-4f51-a84f-66369b9c5cab/images/1772122928556-05425069-08fd-40d7-ac8a-e9aa997d453a.png'; const SCREENSHOT_2 = 'https://pub-f970b0ef1f2e418e8d902ba0973ff5cf.r2.dev/projects/d523a868-e9ab-4f51-a84f-66369b9c5cab/images/1772122929438-c46f6e53-9e6e-4380-8969-2e1314d84662.png'; const SCREENSHOT_3 = 'https://pub-f970b0ef1f2e418e8d902ba0973ff5cf.r2.dev/projects/d523a868-e9ab-4f51-a84f-66369b9c5cab/images/1772122686237-3ddf9e41-74ef-4adf-b9ad-94372a1a2cf2.png'; // ---- Animated Cursor Component ---- const AnimatedCursor = ({ frame, startFrame, targetX, targetY, clickFrame }) => { const cursorOpacity = interpolate(frame, [startFrame, startFrame + 10], [0, 1], cl); const moveProgress = interpolate(frame, [startFrame + 10, startFrame + 40], [0, 1], { ...cl, easing: easeOut }); const startX = targetX + 120; const startY = targetY - 80; const cursorX = interpolate(moveProgress, [0, 1], [startX, targetX], cl); const cursorY = interpolate(moveProgress, [0, 1], [startY, targetY], cl); const isClicking = frame >= clickFrame && frame <= clickFrame + 8; const clickScale = isClicking ? interpolate(frame, [clickFrame, clickFrame + 4, clickFrame + 8], [1, 0.85, 1], cl) : 1; const showRipple = frame >= clickFrame && frame <= clickFrame + 20; const rippleScale = showRipple ? interpolate(frame, [clickFrame, clickFrame + 20], [0, 2.5], cl) : 0; const rippleOpacity = showRipple ? interpolate(frame, [clickFrame, clickFrame + 20], [0.6, 0], cl) : 0; if (frame < startFrame) return null; return React.createElement('div', { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 50 } }, showRipple ? React.createElement('div', { style: { position: 'absolute', left: cursorX - 15, top: cursorY - 15, width: 30, height: 30, borderRadius: '50%', border: '2px solid #00d4ff', transform: `scale(${rippleScale})`, opacity: rippleOpacity, } }) : null, React.createElement('div', { style: { position: 'absolute', left: cursorX, top: cursorY, opacity: cursorOpacity, transform: `scale(${clickScale})`, filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))', } }, React.createElement('svg', { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none' }, React.createElement('path', { d: 'M5.65 2.09L18.74 12.36L13.14 13.17L16.38 20.63L13.64 21.91L10.39 14.45L6.34 18.09L5.65 2.09Z', fill: '#FFFFFF', stroke: '#000000', strokeWidth: 1.5, strokeLinejoin: 'round', }) ) ) ); }; // ---- Screenshot in Browser Frame ---- const ScreenshotFrame = ({ src, url, frame, children }) => { const { Img } = window.Remotion; return React.createElement('div', { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', borderRadius: 12, overflow: 'hidden', background: '#0f1117', border: '1px solid rgba(255,255,255,0.1)', position: 'relative', } }, // Slim chrome bar (traffic lights + tab + address all in one row) React.createElement('div', { style: { height: 32, background: '#1e2030', display: 'flex', alignItems: 'center', padding: '0 12px', gap: 8, flexShrink: 0, borderBottom: '1px solid #2a2d3e', } }, React.createElement('div', { style: { display: 'flex', gap: 5, marginRight: 6 } }, React.createElement('div', { style: { width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' } }), React.createElement('div', { style: { width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' } }), React.createElement('div', { style: { width: 10, height: 10, borderRadius: '50%', background: '#28C840' } }) ), React.createElement('div', { style: { flex: 1, height: 22, borderRadius: 11, background: '#13151f', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 5, border: '1px solid #2a2d3e', fontSize: 11, color: '#8888aa', fontFamily: 'Inter', } }, React.createElement('svg', { width: 10, height: 10, viewBox: '0 0 24 24', fill: '#666' }, React.createElement('path', { d: 'M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z' }) ), url ) ), // Screenshot content — takes ALL remaining space React.createElement('div', { style: { flex: 1, overflow: 'hidden', position: 'relative' } }, React.createElement(Img, { src: src, style: { width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center center', background: '#0f1117' }, }), children ) ); }; // ---- Pulsing Highlight Overlay ---- const PulsingHighlight = ({ frame, startFrame, x, y, w, h }) => { const showProgress = interpolate(frame, [startFrame, startFrame + 10], [0, 1], cl); const pulseOpacity = 0.55 + 0.45 * Math.sin((frame - startFrame) * 0.15); const glowSize = 10 + 15 * Math.abs(Math.sin((frame - startFrame) * 0.15)); if (frame < startFrame) return null; return React.createElement('div', { style: { position: 'absolute', left: x, top: y, width: w, height: h, border: '2.5px solid #00d4ff', borderRadius: 8, boxShadow: `0 0 ${glowSize}px rgba(0,212,255,0.5), inset 0 0 ${glowSize * 0.4}px rgba(0,212,255,0.08)`, opacity: showProgress * pulseOpacity, pointerEvents: 'none', } }); }; // Placeholder to keep old variable references working const icons = { dashboard: 'M4 13h6a1 1 0 001-1V4a1 1 0 00-1-1H4a1 1 0 00-1 1v8a1 1 0 001 1zm0 8h6a1 1 0 001-1v-4a1 1 0 00-1-1H4a1 1 0 00-1 1v4a1 1 0 001 1zm10 0h6a1 1 0 001-1v-8a1 1 0 00-1-1h-6a1 1 0 00-1 1v8a1 1 0 001 1zm0-18v4a1 1 0 001 1h6a1 1 0 001-1V4a1 1 0 00-1-1h-6a1 1 0 00-1 1z', transactions: 'M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-2 0H3V6h14v8zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm13 0v11c0 1.1-.9 2-2 2H4v-2h17V7h2z', accounts: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z', investments: 'M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z', creditCards: 'M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z', loans: 'M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z', services: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z', privileges: 'M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z', settings: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z', search: 'M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z', notification: 'M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z', money: 'M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z', chart: 'M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z', trendUp: 'M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z', trendDown: 'M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z', apple: 'M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z', samsung: 'M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H7V4h10v16z', tesla: 'M12 2C8.6 2 5.7 4 4.5 6.9L12 10l7.5-3.1C18.3 4 15.4 2 12 2zm0 20l-8-16h2l6 12 6-12h2l-8 16z', download: 'M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z', }; // ---- Screen 1: XAO DAO Homepage ---- const Screen1 = ({ frame }) => { return React.createElement(ScreenshotFrame, { src: SCREENSHOT_1, url: 'xaodao.io', frame: frame, }); }; // ---- Screen 2: Dashboard (Settings screen) ---- const Screen2 = ({ frame }) => { return React.createElement(ScreenshotFrame, { src: SCREENSHOT_2, url: 'app.xaodao.io', frame: frame, }, React.createElement(AnimatedCursor, { frame: frame, startFrame: 15, targetX: 1480, targetY: 830, clickFrame: 55, }) ); }; // ---- Screen 3: Settings page with copy link cursor ---- const Screen3 = ({ frame }) => { return React.createElement(ScreenshotFrame, { src: SCREENSHOT_3, url: 'app.xaodao.io/settings', frame: frame, }); }; // ---- Main Component ---- const SaasMotionShowcase_0 = () => { const frame = useCurrentFrame(); const { width, height } = useVideoConfig(); // ── Background gradient that NEVER stops moving ── const bgAngle = interpolate(frame, [0, 300], [120, 180], cl); const bgShift = Math.sin(frame * 0.015) * 8; const gradientBg = `linear-gradient(${bgAngle + bgShift}deg, #87CEEB, #4A90D9, #5B8DEF, #60A5FA)`; // Global perpetual motion oscillators — everything uses these const sin1 = Math.sin(frame * 0.025); const sin2 = Math.sin(frame * 0.018 + 1.2); const sin3 = Math.sin(frame * 0.032 + 0.7); const cos1 = Math.cos(frame * 0.022); // ────────────────────────────────────────────────────────────── // SEGMENT 1: Loans Dashboard (frames 0–100) // CONTINUOUS MOTION: scale drifts up, X drifts left, Y oscillates, rotation breathes // ────────────────────────────────────────────────────────────── const s1Scale = interpolate(frame, [0, 100], [0.95, 1.12], { ...cl, easing: easeOut }); const s1DriftX = interpolate(frame, [0, 100], [0, 0], { ...cl, easing: easeOut }); const s1DriftY = sin1 * 6 + sin2 * 4; // perpetual vertical float const s1RotY = interpolate(frame, [0, 60], [-22, -15], { ...cl, easing: easeOut }) + sin3 * 1.5; // continuous rotation wobble const s1RotX = 5 + cos1 * 1.5; // never static // Exit: whiplash acceleration const s1ExitX = interpolate(frame, [85, 100], [0, -2200], { ...cl, easing: easeInBack }); const s1Blur = interpolate(frame, [85, 100], [0, 40], cl); const s1Opacity = interpolate(frame, [90, 100], [1, 0], cl); const s1FinalX = frame < 85 ? s1DriftX : s1DriftX + s1ExitX; const s1AnimProgress = interpolate(frame, [0, 80], [0, 1], { ...cl, easing: easeOutExpo }); // Text Segment 1 — titles now track UI, no separate motion needed const t1O = interpolate(frame, [5, 18], [0, 1], cl); // ────────────────────────────────────────────────────────────── // SEGMENT 2: Transactions Dashboard (frames 88–200) // CONTINUOUS: scale pulses, X drifts, rotateX eases then wobbles // ────────────────────────────────────────────────────────────── const s2f = frame - 88; // local frame const s2EntryX = interpolate(frame, [88, 125], [1200, 0], { ...cl, easing: easeOutExpo }); const s2DriftX = frame > 125 ? sin2 * 12 : 0; // gentle horizontal sway after entry const s2RotateX = interpolate(frame, [88, 145], [30, 2], { ...cl, easing: easeOutExpo }) + sin1 * 1.5; // never reaches 0 — always wobbling const s2Scale = interpolate(frame, [88, 155], [1.35, 1.0], { ...cl, easing: easeOutExpo }); const s2PulseScale = s2Scale + sin3 * 0.015; // perpetual scale pulse const s2DriftY = sin1 * 6 + sin2 * 4; // perpetual vertical bob // Exit: fly toward camera const s2ExitScale = interpolate(frame, [185, 200], [0, 0.8], { ...cl, easing: easeIn }); const s2ExitO = interpolate(frame, [185, 200], [1, 0], cl); const s2FinalScale = frame < 185 ? s2PulseScale : s2PulseScale + s2ExitScale; const s2Visible = frame >= 88 && frame <= 200; const s2AnimProgress = interpolate(frame, [88, 182], [0, 1], { ...cl, easing: easeOutExpo }); // Text Segment 2 — titles track UI, no separate motion const t2O = interpolate(frame, [93, 108], [0, 1], cl); // ────────────────────────────────────────────────────────────── // SEGMENT 3: Investments Dashboard (frames 190–300) // CONTINUOUS: gentle Y float, rotateY sway, scale breathe // ────────────────────────────────────────────────────────────── const s3EntryY = interpolate(frame, [190, 230], [800, 0], { ...cl, easing: easeOutExpo }); const s3DriftY = frame > 230 ? sin1 * 6 + sin2 * 4 : s3EntryY; // never still after landing const s3FinalY = frame <= 230 ? s3EntryY : s3DriftY; const s3RotateY = sin3 * 2.5 + cos1 * 1.5; // continuous gentle sway const s3Scale = interpolate(frame, [190, 235], [0.9, 1.0], { ...cl, easing: easeOutExpo }); const s3PulseScale = s3Scale + sin2 * 0.012; // perpetual scale breathing const s3ExitO = interpolate(frame, [285, 300], [1, 0], cl); const s3Visible = frame >= 190; const s3AnimProgress = interpolate(frame, [190, 282], [0, 1], { ...cl, easing: easeOutExpo }); // Text Segment 3 — titles track UI, no separate motion const t3O = interpolate(frame, [195, 210], [0, 1], cl); const s3ExitTextO = interpolate(frame, [280, 295], [1, 0], cl); return React.createElement(AbsoluteFill, { style: { background: gradientBg, perspective: 2000, overflow: 'hidden', } }, // Vignette overlay React.createElement('div', { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.15) 100%)', zIndex: 100, pointerEvents: 'none', } }), // ── SEGMENT 1: Loans — Title + Dashboard move as ONE unit ── frame <= 100 ? React.createElement('div', { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10, } }, // Outer transform container — BOTH title and dashboard share these physics React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', width: '88%', transform: `translateX(${s1FinalX}px) translateY(${s1DriftY}px) rotateY(${s1RotY}deg) rotateX(${s1RotX}deg) scale(${s1Scale * 0.78})`, filter: `blur(${s1Blur}px)`, opacity: s1Opacity, willChange: 'transform, opacity, filter', transformStyle: 'preserve-3d', } }, // Title — sits above the dashboard, moves with it React.createElement('div', { style: { textAlign: 'center', marginBottom: 10, opacity: t1O, maxWidth: '100%', } }, React.createElement('div', { style: { fontSize: 72, fontWeight: 900, color: 'white', fontFamily: 'Inter', textShadow: '0 4px 30px rgba(0,0,0,0.35)', lineHeight: 1.2, } }, 'Go to xaodao.io and connect your wallet') ), // Screenshot React.createElement('div', { style: { width: '100%', height: 880, borderRadius: 16, boxShadow: '0 30px 80px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.25)', overflow: 'hidden', } }, React.createElement(Screen1, { frame: frame }) ) ) ) : null, // ── SEGMENT 2: Transactions — Title + Dashboard move as ONE unit ── s2Visible ? React.createElement('div', { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 20, } }, // Outer transform container — shared physics React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', width: '88%', transform: `translateX(${s2EntryX + s2DriftX}px) translateY(${s2DriftY}px) rotateX(${s2RotateX}deg) scale(${s2FinalScale * 0.78})`, opacity: frame < 185 ? 1 : s2ExitO, willChange: 'transform, opacity, filter', transformStyle: 'preserve-3d', } }, // Title — moves with the dashboard React.createElement('div', { style: { textAlign: 'center', marginBottom: 10, opacity: t2O, maxWidth: '100%', } }, React.createElement('div', { style: { fontSize: 72, fontWeight: 800, color: 'white', fontFamily: 'Inter', textShadow: '0 4px 30px rgba(0,0,0,0.35)', lineHeight: 1.2, } }, 'Click Settings in the bottom right-hand corner') ), // Screenshot React.createElement('div', { style: { width: '100%', height: 880, borderRadius: 16, boxShadow: '0 30px 80px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.25)', overflow: 'hidden', } }, React.createElement(Screen2, { frame: Math.max(0, frame - 88) }) ) ) ) : null, // ── SEGMENT 3: Investments — Title + Dashboard move as ONE unit ── s3Visible ? React.createElement('div', { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 30, overflow: 'hidden', } }, // Outer transform container — shared physics React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', width: '88%', transform: `translateY(${s3FinalY}px) rotateY(${s3RotateY}deg) scale(${s3PulseScale * 0.78})`, opacity: s3ExitO, willChange: 'transform, opacity, filter', transformStyle: 'preserve-3d', } }, // Title — moves with the dashboard React.createElement('div', { style: { textAlign: 'center', marginBottom: 10, opacity: t3O * s3ExitTextO, maxWidth: '100%', } }, React.createElement('div', { style: { fontSize: 72, fontWeight: 900, color: 'white', fontFamily: 'Inter', textShadow: '0 4px 30px rgba(0,0,0,0.35)', lineHeight: 1.2, } }, 'Click and copy your Referral link') ), // Screenshot React.createElement('div', { style: { width: '100%', height: 880, borderRadius: 16, boxShadow: '0 30px 80px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.25)', overflow: 'hidden', } }, React.createElement(Screen3, { frame: Math.max(0, frame - 190) }) ) ) ) : null ); }; const durationInFrames_0 = 300; const durationInFrames = durationInFrames_0; // Auto-added return return SaasMotionShowcase_0;

DAO Referral Program