/* Typic showcase — reusable atoms + utils. Cobalt identity.
Depends on animations.jsx globals: Easing, interpolate, clamp, useTime. */
// ── timing utils ─────────────────────────────────────────────
function ramp(t, a, b, c, d, eIn, eOut){
eIn = eIn || Easing.easeOutCubic; eOut = eOut || Easing.easeInCubic;
if (t <= a) return 0;
if (t < b) return eIn(clamp((t-a)/(b-a),0,1));
if (t <= c) return 1;
if (t < d) return 1 - eOut(clamp((t-c)/(d-c),0,1));
return 0;
}
function track(t, start, end, ease){
ease = ease || Easing.easeInOutCubic;
if (end <= start) return t >= end ? 1 : 0;
return ease(clamp((t-start)/(end-start),0,1));
}
function typed(full, t, start, end){
const p = clamp((t-start)/(end-start),0,1);
return full.slice(0, Math.round(p*full.length));
}
// ── palette ──────────────────────────────────────────────────
const CO = {
bg:'#0B1220', bg2:'#101a30', bg3:'#1b2742',
accent:'#2E5BFF', accentD:'#2348DB', sky:'#7C9BFF',
ink:'#0B1220', slate:'#566377', line:'#E3E8F2', mist:'#F5F7FB', tint:'#EAF0FF',
white:'#ffffff',
disp:"'Space Grotesk', system-ui, sans-serif",
body:"'Hanken Grotesk', system-ui, sans-serif",
mono:"'Space Mono', ui-monospace, monospace",
};
// ── Backdrop: dark cobalt surface, dot grid, breathing glow ──
function Backdrop(){
const t = useTime();
const pulse = 0.5 + 0.5*Math.sin(t*0.6);
return (
);
}
// ── Caption pill (bottom center) ─────────────────────────────
function Caption({ n, text, start, end }){
const t = useTime();
const o = ramp(t, start, start+0.5, end-0.5, end);
if (o <= 0.001) return null;
const y = (1-track(t,start,start+0.5,Easing.easeOutBack))*14;
return (
{n}
{text}
);
}
// ── Cursor ───────────────────────────────────────────────────
function Cursor({ x, y, pressed, opacity=1 }){
const s = pressed ? 0.86 : 1;
return (
);
}
// ── Photo tile (dark striped, like the site) ─────────────────
function PhotoTile({ fill=1, label }){
return (
);
}
// ── Chip ─────────────────────────────────────────────────────
function Chip({ children, scale=1, opacity=1, active=false }){
return (
{children}
);
}
// ── Pill button ──────────────────────────────────────────────
function Btn({ children, kind='accent', scale=1, opacity=1, pressed=false }){
const bg = kind==='accent' ? (pressed?CO.accentD:CO.accent) : '#fff';
const col = kind==='accent' ? '#fff' : CO.ink;
return (
{children}
);
}
// ── Avatar ───────────────────────────────────────────────────
function Avatar({ size=46, text='MH' }){
return (
{text}
);
}
// ── Sparkle burst (the AI "writing" hero moment) ─────────────
const SPARK_POS = [
[40,60],[120,30],[230,80],[330,40],[420,110],[540,60],[610,150],
[80,210],[200,260],[360,230],[500,250],[600,300],[30,330],[300,360]
];
function Sparkles({ t, start, end }){
if (t < start || t > end) return null;
return (
{SPARK_POS.map((p,i)=>{
const d = start + (i%7)*0.12;
const life = 0.9;
const lt = clamp((t-d)/life,0,1);
if (lt<=0 || lt>=1) return null;
const sc = Math.sin(lt*Math.PI);
return ✦;
})}
);
}
Object.assign(window, { ramp, track, typed, CO, Backdrop, Caption, Cursor, PhotoTile, Chip, Btn, Avatar, Sparkles, SPARK_POS });