// ReturnScribe — Motion primitives
// Each effect documents its SwiftUI equivalent for handoff.
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;
// ─────────────────────────────────────────────────────────────
// PressScale — spring-physics tap feedback
// SwiftUI: ButtonStyle with .scaleEffect(isPressed ? 0.97 : 1) +
// .animation(.spring(response: 0.3, dampingFraction: 0.5))
// + UIImpactFeedbackGenerator(style: .light) haptic
// ─────────────────────────────────────────────────────────────
function PressScale({ children, scale = 0.97, onClick, style = {}, as: As = 'div', ...rest }) {
const [pressed, setPressed] = useStateM(false);
return (
setPressed(true)}
onPointerUp={() => setPressed(false)}
onPointerLeave={() => setPressed(false)}
onClick={onClick}
style={{
transform: pressed ? `scale(${scale})` : 'scale(1)',
filter: pressed ? 'brightness(1.08)' : 'brightness(1)',
transition: pressed
? 'transform 90ms cubic-bezier(.2,.7,.3,1), filter 90ms'
: 'transform 280ms cubic-bezier(.34,1.56,.64,1), filter 200ms',
...style,
}}
{...rest}
>{children}
);
}
// ─────────────────────────────────────────────────────────────
// CardPress — card-row tap depth
// SwiftUI: ButtonStyle with .scaleEffect(0.99) + .offset(y: 1) on pressed
// ─────────────────────────────────────────────────────────────
function CardPress({ children, onClick, style = {} }) {
const [pressed, setPressed] = useStateM(false);
return (
setPressed(true)}
onPointerUp={() => setPressed(false)}
onPointerLeave={() => setPressed(false)}
onClick={onClick}
style={{
transform: pressed ? 'scale(0.99) translateY(1px)' : 'none',
transition: pressed ? 'transform 100ms ease-out' : 'transform 150ms cubic-bezier(.2,.7,.3,1)',
cursor: onClick ? 'pointer' : 'default',
...style,
}}
>{children}
);
}
// ─────────────────────────────────────────────────────────────
// FluidNumber — slot-machine digit roll for currency
// SwiftUI: Text(value, format:).contentTransition(.numericText())
// + .animation(.easeOut(duration: 0.4))
// ─────────────────────────────────────────────────────────────
function FluidDigit({ char, size, color, weight, dim }) {
const isNum = /[0-9]/.test(char);
if (!isNum) {
return (
{char}
);
}
const d = parseInt(char, 10);
// Render a vertical strip 0..9 and translate to the active digit
const cellH = size * 1.02;
return (
{Array.from({ length: 10 }).map((_, i) => (
{i}
))}
);
}
function FluidMoney({ value, size = 56, color, weight = 600 }) {
const sign = value < 0 ? '−' : '';
const abs = Math.abs(value);
const whole = Math.floor(abs).toLocaleString('en-US');
const frac = abs.toFixed(2).split('.')[1];
const dollarStyle = {
fontFamily: RSFont.num, fontWeight: weight, color,
fontSize: size * 0.55, opacity: 0.55,
verticalAlign: 'top', lineHeight: (size * 1.02) + 'px',
marginRight: 1,
};
const fracStyle = {
fontFamily: RSFont.num, fontWeight: weight, color,
fontSize: size * 0.55, opacity: 0.42,
verticalAlign: 'top', lineHeight: (size * 1.02) + 'px',
};
return (
$
{sign && }
{whole.split('').map((c, i) => (
))}
.
{frac.split('').map((c, i) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// GradientOrb — slow-drifting radial blobs behind hero counter
// SwiftUI: TimelineView(.animation) + Canvas drawing two radial gradients
// whose centers animate on .sine curves. OR MeshGradient (iOS 18+).
// ─────────────────────────────────────────────────────────────
function GradientOrb({ colorA, colorB }) {
const [phase, setPhase] = useStateM(0);
useEffectM(() => {
let id;
const start = performance.now();
const tick = () => {
const ph = ((performance.now() - start) / 10000) % 1;
setPhase(ph);
id = requestAnimationFrame(tick);
};
id = requestAnimationFrame(tick);
return () => cancelAnimationFrame(id);
}, []);
const t = phase * Math.PI * 2;
const ax = 30 + Math.sin(t) * 14;
const ay = 40 + Math.cos(t * 0.8) * 12;
const bx = 70 + Math.cos(t * 1.2) * 14;
const by = 60 + Math.sin(t * 0.6) * 12;
return (
);
}
// ─────────────────────────────────────────────────────────────
// Shimmer — loading placeholder with diagonal gradient sweep
// SwiftUI: LinearGradient on .mask with .phaseAnimator sliding offset
// ─────────────────────────────────────────────────────────────
function Shimmer({ t, width = '100%', height = 14, radius = 6, style = {} }) {
const base = t.surface2;
const sweep = t === RSTokens.dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)';
return (
);
}
// ─────────────────────────────────────────────────────────────
// RevealOnScroll — staggered fade+translate as element enters viewport
// SwiftUI: .scrollTransition { content, phase in
// content.opacity(phase.isIdentity ? 1 : 0)
// .offset(y: phase.isIdentity ? 0 : 12) }
// ─────────────────────────────────────────────────────────────
function RevealOnScroll({ children, delay = 0, root }) {
const ref = useRefM(null);
const [shown, setShown] = useStateM(false);
useEffectM(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), delay);
obs.disconnect();
}
});
}, { root: root && root.current ? root.current : null, threshold: 0.05, rootMargin: '0px 0px -8% 0px' });
obs.observe(ref.current);
return () => obs.disconnect();
}, [delay, root]);
return (
{children}
);
}
// ─────────────────────────────────────────────────────────────
// AnimatedFilterPills — accent background slides between active pills
// SwiftUI: matchedGeometryEffect(id: "activePill", in: namespace)
// attached to a Capsule behind the active pill's label
// ─────────────────────────────────────────────────────────────
function AnimatedFilterPills({ t, items, active, onChange }) {
const containerRef = useRefM(null);
const itemRefs = useRefM({});
const [box, setBox] = useStateM(null);
useEffectM(() => {
const el = itemRefs.current[active];
const c = containerRef.current;
if (!el || !c) return;
setBox({ left: el.offsetLeft, top: el.offsetTop, width: el.offsetWidth, height: el.offsetHeight });
}, [active, items.length]);
return (
{/* Moving ink capsule */}
{box && (
)}
{items.map(it => {
const a = it.id === active;
return (
itemRefs.current[it.id] = el}
onClick={() => onChange && onChange(it.id)}
style={{
position: 'relative', zIndex: 1,
background: 'transparent',
boxShadow: a ? 'none' : `inset 0 0 0 1px ${t.border}`,
color: a ? (t === RSTokens.dark ? '#161310' : '#FBF8F1') : t.text2,
border: 'none', borderRadius: 7, padding: '8px 14px',
height: 34, ...applyMono(RSType.footnote, { fontSize: 12, fontWeight: 500 }),
cursor: 'pointer', whiteSpace: 'nowrap',
transition: 'color 250ms, box-shadow 250ms',
}}>
{it.label}{it.count != null && {it.count} }
);
})}
{/* specular streak along the top edge */}
{TABS.map(tab => {
const a = tab.id === active;
const c = a ? t.accent : t.text2;
return (
onChange && onChange(tab.id)}
style={{
flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
justifyContent: 'center', gap: 3,
border: 'none', cursor: 'pointer', background: 'transparent',
margin: '7px 1px', borderRadius: 26, position: 'relative',
}}>
{/* glass lens behind the active tab */}
{tab.label}
);
})}
);
}
// SwiftUI: GeometryReader-based offset tied to scroll position,
// or .scrollTransition with custom phase
// ─────────────────────────────────────────────────────────────
function Parallax({ scrollRef, factor = 0.15, children, style }) {
const [y, setY] = useStateM(0);
useEffectM(() => {
const el = scrollRef && scrollRef.current;
if (!el) return;
const onScroll = () => {
const top = el.scrollTop;
// Parallax only while above 240px; clamp
setY(Math.min(top * factor, 60));
};
el.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => el.removeEventListener('scroll', onScroll);
}, [scrollRef, factor]);
return (
{children}
);
}
Object.assign(window, {
PressScale, CardPress, FluidMoney, FluidDigit,
GradientOrb, Shimmer, RevealOnScroll,
AnimatedFilterPills, AnimatedTabBar, Parallax,
});