/* ============================================================
Marketing video — primitives
Reusable building blocks (bg chrome, brand mark, orbit, tool
bus, post card, services, CTA, audio cues). All driven by
useTime() / useSprite() from animations.jsx.
============================================================ */
const BRAND = {
bg: '#0d0c0b',
bg1: '#131210',
bg2: '#1a1815',
line: 'rgba(236, 232, 224, 0.10)',
line2: 'rgba(236, 232, 224, 0.18)',
text: '#ece8e0',
textDim: '#a39c90',
textMute: '#6e685e',
accent: '#4f8cff',
accent2: '#7fa9ff',
accentRgb:'79, 140, 255',
grad: 'linear-gradient(100deg, #4f8cff 0%, #7c8bff 25%, #9b6cff 50%, #b594ff 70%, #4f8cff 100%)',
fontSans: "'Space Grotesk', system-ui, sans-serif",
fontMono: "'JetBrains Mono', ui-monospace, monospace",
};
/* ---------- Background chrome (always on) ---------- */
function BgChrome(){
const t = useTime();
// very slow parallax drift on the grid
const gx = (Math.sin(t * 0.18) * 14).toFixed(2);
const gy = (Math.cos(t * 0.14) * 10).toFixed(2);
return (
<>
{/* grid */}
{/* accent glows */}
{/* vignette */}
);
}
/* ---------- Brand badge (persistent corner mark) ---------- */
function BrandBadge({ x, y }){
const t = useTime();
const opacity = clamp(t * 1.4 - 0.3, 0, 1);
return (
maha.naeem()
);
}
/* ---------- Type-on text ---------- */
function TypeOnText({ text, x, y, size=72, color=BRAND.text, font=BRAND.fontMono,
weight=500, startDelay=0, charDur=0.04, cursor=true }){
const { localTime } = useSprite();
const elapsed = Math.max(0, localTime - startDelay);
const n = Math.min(text.length, Math.floor(elapsed / charDur));
const shown = text.slice(0, n);
const blink = Math.floor(localTime * 2) % 2 === 0;
return (
{shown}
{cursor && }
);
}
/* ---------- Gradient sweep span (for "AI brain") ---------- */
function GradientText({ children, size, weight=600 }){
const t = useTime();
const pos = ((t * 30) % 200).toFixed(1);
return (
{children}
);
}
/* ---------- Agent loop orbit ---------- */
function AgentOrbit({ x, y, size=560 }){
const { localTime, duration } = useSprite();
// active node hops every 1s, with smooth fade
const labels = ['Observe', 'Reason', 'Act', 'Reflect'];
const cx = 200, cy = 200, R = 150;
const positions = labels.map((_, i) => {
const a = (-Math.PI / 2) + (i * (Math.PI * 2 / labels.length));
return { x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) };
});
// entrance build-in (0..1.2s): ring draws, nodes pop
const buildT = clamp(localTime / 1.2, 0, 1);
const ringT = Easing.easeOutCubic(buildT);
// rotation: very slow, 12s/turn
const rot = (localTime * 30) % 360;
// active node logic — starts after build, hops each 1s, 4 hops total
const cycleStart = 1.2;
const cycleTime = Math.max(0, localTime - cycleStart);
const active = Math.min(3, Math.floor(cycleTime));
const sub = clamp(cycleTime - active, 0, 1);
// outer circumference (for stroke-dash draw-in)
const circ = 2 * Math.PI * R;
const innerCirc = 2 * Math.PI * (R - 38);
return (
);
}
/* ---------- Tool calling visual ---------- */
function ToolBus({ x, y, width=900, height=520 }){
const { localTime } = useSprite();
const tools = [
{ label:'search()', glyph:'⌕' },
{ label:'db.query()', glyph:'≣' },
{ label:'fetch()', glyph:'↯' },
];
// Beats:
// 0.0–0.6 LLM appears
// 0.6–1.0 tool tiles appear
// 1.2–2.6 outgoing arrows + tools pulse (staggered)
// 2.6–4.0 return arrows
// 4.0–end answer chip materializes
const llmT = Easing.easeOutBack(clamp((localTime - 0.0) / 0.5, 0, 1));
const toolsT= clamp((localTime - 0.6) / 0.5, 0, 1);
const answerT = Easing.easeOutBack(clamp((localTime - 3.6) / 0.7, 0, 1));
const cx = width / 2;
const cy = 110;
const toolsY = 320;
const toolW = 220, toolH = 96;
const toolGap = 40;
const totalW = tools.length * toolW + (tools.length - 1) * toolGap;
const startX = (width - totalW) / 2;
const toolPositions = tools.map((_, i) => ({
x: startX + i * (toolW + toolGap),
y: toolsY,
cx: startX + i * (toolW + toolGap) + toolW / 2,
cy: toolsY,
}));
return (
{/* LLM node (center top) */}
{/* Tool tiles */}
{toolPositions.map((p, i) => {
const localT = Easing.easeOutBack(clamp((localTime - (0.8 + i * 0.1)) / 0.5, 0, 1));
// pulse when ping arrives (~outStart + 0.55)
const pingTime = 1.65 + i * 0.18;
const pulse = Math.max(0, 1 - Math.abs(localTime - pingTime) / 0.4);
return (
0.3 ? BRAND.accent2 : BRAND.textDim,
transition:'color .2s',
}}>{tools[i].glyph}
);
})}
{/* Answer chip */}
answer ready
);
}
/* ---------- Featured post card ---------- */
function PostCard({ x, y, width=820, height=520 }){
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1));
// gentle parallax on the inner content
const drift = Math.sin(localTime * 0.6) * 6;
return (
{/* corner glow */}
Featured
/
AI
08 Jun 2026 · 12 min read
How to build an{' '}
AI agent{' '}
with LangChain & OpenAI.
An LLM in a loop with tools, working toward a goal — built end‑to‑end in TypeScript.
mahanaeem.com / writing
Read the guide →
{rows.map((r, i) => {
const delay = i * 0.35;
const t = Easing.easeOutCubic(clamp((localTime - delay) / 0.6, 0, 1));
return (
);
})}
● Web engineering with an AI brain
mahanaeem.com
Build, ship, write
hire me →
);
}
/* ---------- Scene wrapper with crossfade ---------- */
function Scene({ start, end, fadeIn=0.5, fadeOut=0.5, children }){
const t = useTime();
if (t < start - fadeIn || t > end + fadeOut) return null;
let opacity = 1;
if (t < start) opacity = clamp((t - (start - fadeIn)) / fadeIn, 0, 1);
else if (t > end) opacity = 1 - clamp((t - end) / fadeOut, 0, 1);
// slow parallax on the scene
const localT = clamp((t - start) / Math.max(0.01, end - start), 0, 1);
const scale = 1 + localT * 0.02;
return (
{children}
);
}
/* ---------- Audio cue board ---------- */
function AudioCues({ enabled, cues }){
const { time, playing } = useTimeline();
const ctxRef = React.useRef(null);
const prevRef = React.useRef(0);
React.useEffect(() => {
if (!enabled) return;
if (!ctxRef.current) {
try {
ctxRef.current = new (window.AudioContext || window.webkitAudioContext)();
} catch (e) {}
}
if (ctxRef.current && ctxRef.current.state === 'suspended') {
ctxRef.current.resume().catch(() => {});
}
}, [enabled, playing]);
React.useEffect(() => {
if (!enabled || !ctxRef.current || !playing) {
prevRef.current = time;
return;
}
const ctx = ctxRef.current;
const prev = prevRef.current;
if (time < prev) { prevRef.current = time; return; } // scrub backwards
cues.forEach(c => {
if (c.time > prev && c.time <= time) {
playCue(ctx, c.type);
}
});
prevRef.current = time;
}, [time, enabled, playing, cues]);
return null;
}
function playCue(ctx, type){
const now = ctx.currentTime;
if (type === 'click') {
// short keystroke: filtered noise burst
const buf = ctx.createBuffer(1, ctx.sampleRate * 0.04, ctx.sampleRate);
const data = buf.getChannelData(0);
for (let i = 0; i < data.length; i++) data[i] = (Math.random() * 2 - 1) * 0.6;
const src = ctx.createBufferSource();
src.buffer = buf;
const bp = ctx.createBiquadFilter();
bp.type = 'bandpass'; bp.frequency.value = 3200; bp.Q.value = 1.5;
const g = ctx.createGain();
g.gain.setValueAtTime(0.0001, now);
g.gain.exponentialRampToValueAtTime(0.18, now + 0.005);
g.gain.exponentialRampToValueAtTime(0.0001, now + 0.05);
src.connect(bp).connect(g).connect(ctx.destination);
src.start(now); src.stop(now + 0.06);
} else if (type === 'pop') {
// soft sine pop
const osc = ctx.createOscillator();
osc.type = 'sine';
osc.frequency.setValueAtTime(880, now);
osc.frequency.exponentialRampToValueAtTime(520, now + 0.12);
const g = ctx.createGain();
g.gain.setValueAtTime(0.0001, now);
g.gain.exponentialRampToValueAtTime(0.12, now + 0.012);
g.gain.exponentialRampToValueAtTime(0.0001, now + 0.18);
osc.connect(g).connect(ctx.destination);
osc.start(now); osc.stop(now + 0.2);
} else if (type === 'tick') {
// higher tick
const osc = ctx.createOscillator();
osc.type = 'triangle';
osc.frequency.setValueAtTime(1400, now);
const g = ctx.createGain();
g.gain.setValueAtTime(0.0001, now);
g.gain.exponentialRampToValueAtTime(0.06, now + 0.005);
g.gain.exponentialRampToValueAtTime(0.0001, now + 0.06);
osc.connect(g).connect(ctx.destination);
osc.start(now); osc.stop(now + 0.08);
} else if (type === 'whoosh') {
// soft swell
const osc = ctx.createOscillator();
osc.type = 'sine';
osc.frequency.setValueAtTime(220, now);
osc.frequency.linearRampToValueAtTime(440, now + 0.45);
const g = ctx.createGain();
g.gain.setValueAtTime(0.0001, now);
g.gain.linearRampToValueAtTime(0.12, now + 0.12);
g.gain.exponentialRampToValueAtTime(0.0001, now + 0.55);
osc.connect(g).connect(ctx.destination);
osc.start(now); osc.stop(now + 0.6);
}
}
/* ============================================================
Music engine — ambient procedural pad
Sub bass drone + 3-voice detuned pad with slow LFO filter,
chord progression (Am → F → C → Am over 28s) + sparse bell
accents on scene starts. All routed through a synthetic
convolution reverb. Royalty-free by construction.
============================================================ */
function buildReverbIR(ctx, durationSec = 3.2, decay = 2.6){
const length = ctx.sampleRate * durationSec;
const buf = ctx.createBuffer(2, length, ctx.sampleRate);
for (let ch = 0; ch < 2; ch++){
const data = buf.getChannelData(ch);
for (let i = 0; i < length; i++){
data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
}
}
return buf;
}
const MIDI = (m) => 440 * Math.pow(2, (m - 69) / 12);
function startMusic(ctx, state, startOffsetSec){
state.active = true;
const now = ctx.currentTime;
const FULL = 36;
// remaining seconds of composition to play
const rem = Math.max(2, FULL - startOffsetSec);
// Master + reverb bus
const master = ctx.createGain();
master.gain.value = 0;
master.gain.linearRampToValueAtTime(0.55, now + 1.6); // gentle fade-in
const convolver = ctx.createConvolver();
convolver.buffer = buildReverbIR(ctx, 3.2, 2.6);
const wet = ctx.createGain(); wet.gain.value = 0.42;
const dry = ctx.createGain(); dry.gain.value = 0.78;
master.connect(dry).connect(ctx.destination);
master.connect(convolver).connect(wet).connect(ctx.destination);
state.master = master;
state.voices = [];
// Chord progression — 6 chords × 6s = 36s
// Am F C G F Am — loose, drifting
const chordDur = 6.0;
const bassMidi = [45, 41, 48, 43, 41, 45]; // A2, F2, C3, G2, F2, A2
const padMidi = [
[57, 60, 64], // Am: A3 C4 E4
[53, 57, 60], // F: F3 A3 C4
[48, 52, 55], // C: C3 E3 G3
[55, 59, 62], // G: G3 B3 D4
[53, 57, 60], // F: F3 A3 C4
[57, 60, 64], // Am
];
// helper to convert composition-time to ctx-time (skipping past whatever already elapsed)
const at = (compT) => now + Math.max(0, compT - startOffsetSec);
/* --- Sub bass drone --- */
const bass = ctx.createOscillator();
bass.type = 'sine';
bass.frequency.value = MIDI(bassMidi[Math.min(bassMidi.length - 1, Math.floor(startOffsetSec / chordDur))]);
bassMidi.forEach((m, i) => {
const t = at(i * chordDur);
if (t >= now) bass.frequency.setValueAtTime(MIDI(m), t);
});
const bassFilter = ctx.createBiquadFilter();
bassFilter.type = 'lowpass'; bassFilter.frequency.value = 220; bassFilter.Q.value = 0.7;
const bassGain = ctx.createGain(); bassGain.gain.value = 0.22;
bass.connect(bassFilter).connect(bassGain).connect(master);
bass.start(now);
bass.stop(now + rem + 1.5);
state.voices.push(bass);
/* --- Pad: 3 detuned voices --- */
for (let v = 0; v < 3; v++){
const osc = ctx.createOscillator();
osc.type = v === 0 ? 'sine' : 'triangle';
osc.detune.value = (v - 1) * 8;
const filter = ctx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 850;
filter.Q.value = 1.6;
// slow LFO on filter cutoff
const lfo = ctx.createOscillator();
lfo.type = 'sine';
lfo.frequency.value = 0.07 + v * 0.04;
const lfoAmp = ctx.createGain();
lfoAmp.gain.value = 380;
lfo.connect(lfoAmp).connect(filter.frequency);
lfo.start(now);
lfo.stop(now + rem + 1.5);
const voiceGain = ctx.createGain();
voiceGain.gain.value = 0.085;
// initial frequency based on current chord
const startChord = Math.min(padMidi.length - 1, Math.floor(startOffsetSec / chordDur));
osc.frequency.value = MIDI(padMidi[startChord][v]);
padMidi.forEach((chord, i) => {
const t = at(i * chordDur);
if (t >= now) {
// soft glide between chords
osc.frequency.setValueAtTime(osc.frequency.value, Math.max(now, t - 0.4));
osc.frequency.linearRampToValueAtTime(MIDI(chord[v]), t + 0.3);
}
});
osc.connect(filter).connect(voiceGain).connect(master);
osc.start(now);
osc.stop(now + rem + 1.5);
state.voices.push(osc, lfo);
}
/* --- Bell accents on scene starts --- */
const bells = [
{ t: 2.7, m: 76 }, // pitch reveal
{ t: 5.5, m: 79 }, // 01 BUILD MERN
{ t: 11.0, m: 81 }, // 02 PYTHON AI
{ t: 16.0, m: 83 }, // 03 AGENTS
{ t: 20.5, m: 78 }, // 04 INTEGRATE
{ t: 25.0, m: 72 }, // 05 DEPLOY
{ t: 29.6, m: 79 }, // LIVE!
{ t: 30.0, m: 81 }, // 06 WRITING
{ t: 34.0, m: 76 }, // CTA
];
bells.forEach(b => {
if (b.t < startOffsetSec) return;
const tStart = at(b.t);
const bell = ctx.createOscillator();
bell.type = 'sine';
bell.frequency.value = MIDI(b.m);
const bg = ctx.createGain();
bg.gain.setValueAtTime(0.0001, tStart);
bg.gain.exponentialRampToValueAtTime(0.10, tStart + 0.02);
bg.gain.exponentialRampToValueAtTime(0.0001, tStart + 2.6);
bell.connect(bg).connect(master);
bell.start(tStart);
bell.stop(tStart + 2.8);
state.voices.push(bell);
});
/* --- Outro fade --- */
const fadeStart = at(36.0);
const fadeEnd = at(38.2);
if (fadeEnd > now) {
master.gain.setValueAtTime(0.55, Math.max(now, fadeStart));
master.gain.linearRampToValueAtTime(0.0, fadeEnd);
}
}
function stopMusic(state){
if (!state.active || !state.master) return;
state.active = false;
try {
const ctx = state.master.context;
const now = ctx.currentTime;
state.master.gain.cancelScheduledValues(now);
state.master.gain.setValueAtTime(state.master.gain.value, now);
state.master.gain.linearRampToValueAtTime(0, now + 0.35);
} catch (e) {}
const voices = state.voices;
state.voices = [];
state.master = null;
setTimeout(() => {
voices.forEach(v => { try { v.stop(); } catch (e) {} });
}, 400);
}
function MusicEngine({ enabled }){
const { time, playing } = useTimeline();
const ctxRef = React.useRef(null);
const stateRef = React.useRef({ active: false, voices: [], master: null });
const prevTimeRef = React.useRef(time);
const [restartKey, setRestartKey] = React.useState(0);
// Lazy AudioContext (created on first enable)
React.useEffect(() => {
if (!enabled) return;
if (!ctxRef.current) {
try {
ctxRef.current = new (window.AudioContext || window.webkitAudioContext)();
} catch (e) { return; }
}
if (ctxRef.current.state === 'suspended') {
ctxRef.current.resume().catch(() => {});
}
}, [enabled, playing]);
// Detect significant time jumps -> stop + bump restartKey to re-arm
React.useEffect(() => {
const prev = prevTimeRef.current;
if (Math.abs(time - prev) > 1.2 && stateRef.current.active) {
stopMusic(stateRef.current);
setRestartKey(k => k + 1);
}
prevTimeRef.current = time;
}, [time]);
// Start / stop music based on enabled + playing + restartKey
React.useEffect(() => {
const state = stateRef.current;
if (!enabled || !playing) {
stopMusic(state);
return;
}
const ctx = ctxRef.current;
if (!ctx) return;
if (state.active) return;
// Start from current playhead
startMusic(ctx, state, prevTimeRef.current);
return () => stopMusic(state);
}, [enabled, playing, restartKey]);
return null;
}
/* ---------- Timecode badge (for commenting) ---------- */
function TimecodeBadge(){
const { time: t, playing } = useTimeline();
const [, setTick] = React.useState(0);
React.useEffect(() => {
if (!playing) return undefined;
const id = setInterval(() => setTick(x => x + 1), 1000);
return () => clearInterval(id);
}, [playing]);
// update data-screen-label on root each second
React.useEffect(() => {
const root = document.querySelector('[data-video-root]');
if (root) root.setAttribute('data-screen-label', `t=${t.toFixed(1)}s`);
}, [t]);
return null;
}
/* expose */
Object.assign(window, {
BRAND, BgChrome, BrandBadge, TypeOnText, GradientText,
AgentOrbit, ToolBus, PostCard, ServicesList, FinalCTA,
Scene, AudioCues, MusicEngine, TimecodeBadge,
});