); } function Squiggle({ x, y, rotate = 0, scale = 1, color = BRAND.lime, draw = 1 }) { const length = 300; const visible = length * draw; return ( ); } // Big subtitle caption that slides up from bottom during a range of localTime function Caption({ t, start, end, children, y = 960 }) { const a = clamp((t - start) / 0.3, 0, 1); const fadeOut = clamp((t - (end - 0.3)) / 0.3, 0, 1); const opacity = Math.min(a, 1 - fadeOut); if (opacity <= 0) return null; return (

{children}

); } function StepHeader({ num, title, sub, t }) { const a = clamp(t / 0.4, 0, 1); const e = Easing.easeOutBack(a); return (

STEP {num} / 04

{title}

{sub}

); } // A character — developer/creator avatar with hoodie, headset, laptop, blinking function Character({ x, y, label, skin = '#F3C89A', hoodie = BRAND.lime, hair = BRAND.ink, t = 0, scale = 1, variant = 'creator' }) { const float = Math.sin(t * 2) * 4; const blink = ((t * 0.9) % 3) < 0.12 ? 0.15 : 1; const mouth = Math.sin(t * 1.6) > 0.3 ? 'smile' : 'small'; const armWave = Math.sin(t * 3) * 6; const typeT = (t * 4) % 1 < 0.5 ? 0 : 2; // tiny keyboard tap offset return (

{label &&

{label}

}

); } // Flying coin function Coin({ x, y, rot = 0, size = 40, label = '0G' }) { return (

{label}

); } function Particles({ t, count = 20, area = [0, 0, 1920, 1080], seed = 0 }) { const items = []; for (let i = 0; i < count; i++) { const rx = ((i * 9301 + seed * 49297) % 233280) / 233280; const ry = ((i * 49297 + seed * 9301) % 233280) / 233280; const x = area[0] + rx * area[2]; const baseY = area[1] + ry * area[3]; const y = baseY + Math.sin(t * 1.5 + i) * 20; const a = 0.3 + 0.7 * ((Math.sin(t * 2 + i * 0.7) + 1) / 2); items.push(

); } return <>{items}; } // ───────────────────────────────────────────────────────────────────────────── // SCENE 01 — THE PROBLEM (richer) // Beat A (0.0–1.4): Everyone is using AI — rain of prompts // Beat B (1.4–2.6): One output looks suspicious — a "fake" stamp appears // Beat C (2.6–end): "Who built this? Can you trust it?" // ───────────────────────────────────────────────────────────────────────────── function SceneHook() { const { localTime: t, duration } = useSprite(); const prompts = [ { x: 180, y: 180, text: 'Write me a contract', delay: 0.1, from: 'top' }, { x: 1380, y: 220, text: 'Summarize this PDF', delay: 0.25, from: 'top' }, { x: 220, y: 640, text: 'Generate an image', delay: 0.4, from: 'left' }, { x: 1320, y: 720, text: 'Translate to Spanish', delay: 0.55, from: 'right' }, { x: 480, y: 340, text: 'Debug my code', delay: 0.7, from: 'top' }, { x: 1480, y: 480, text: 'Diagnose my symptoms', delay: 0.85, from: 'right' }, ]; const boxAppear = Easing.easeOutBack(clamp(t / 0.6, 0, 1)); const fakeStamp = clamp((t - 2.0) / 0.5, 0, 1); const fakeBounce = Easing.easeOutBack(fakeStamp); const headlineT = clamp((t - 2.6) / 0.5, 0, 1); const lineT = clamp((t - 3.0) / 0.7, 0, 1); return (

{/* Header pill */}

● THE AI PROBLEM IN 2026

{/* Prompts rain in from their sides */} {prompts.map((b, i) => { const p = clamp((t - b.delay) / 0.5, 0, 1); const e = Easing.easeOutBack(p); let dx = 0, dy = 0; if (b.from === 'top') dy = -200 * (1 - e); if (b.from === 'left') dx = -200 * (1 - e); if (b.from === 'right') dx = 200 * (1 - e); const float = Math.sin((t + i) * 1.4) * 5; return (

{b.text}

); })} {/* Center: mystery AI box (the output) */}

{/* antennae */}

UNVERIFIED · SOURCE UNKNOWN · MODEL UNKNOWN

{/* FAKE? stamp appears */} {fakeStamp > 0 && (

FAKE?

)}

{/* Bottom narrative */}

MILLIONS OF AI OUTPUTS.

ZERO WAY TO TRUST THEM.

); } // ───────────────────────────────────────────────────────────────────────────── // SCENE 02 — ENTER SKILLMINT (richer intro with stamped logo + tagline build) // ───────────────────────────────────────────────────────────────────────────── function SceneLogo() { const { localTime: t } = useSprite(); const whiteout = clamp(t / 0.25, 0, 1); const skillT = Easing.easeOutBack(clamp((t - 0.3) / 0.5, 0, 1)); const mintT = Easing.easeOutBack(clamp((t - 0.6) / 0.5, 0, 1)); const shock = clamp((t - 0.95) / 0.4, 0, 1); const tag1 = clamp((t - 1.4) / 0.5, 0, 1); const tag2 = clamp((t - 1.9) / 0.5, 0, 1); const tag3 = clamp((t - 2.4) / 0.5, 0, 1); return (

{/* whiteout flash */}

{/* shockwave ring */} {shock > 0 && (

)} {/* Brand mark — transparent logo */}

{/* SKILL MINT wordmark below logo */}

SKILL MINT

{/* Tagline builds word by word */}

A MARKETPLACE WHERE EVERY AI SKILL IS

#VERIFIED ON-CHAIN & OWNED

{/* orbiting sparks */} {[0,1,2,3,4,5,6,7].map(i => { const a = (i / 8) * Math.PI * 2 + t * 0.6; const r = 320; const x = 960 + Math.cos(a) * r; const y = 440 + Math.sin(a) * r; return

; })}

); } // ───────────────────────────────────────────────────────────────────────────── // SCENE 03 — EXPLORE (richer, with search bar + filter chips + cursor hover) // ───────────────────────────────────────────────────────────────────────────── const SKILLS = [ { name: 'LEGAL CONTRACT WRITER', tag: '#law', price: '0.05 0G', exec: 1247 }, { name: 'CODE AUDITOR', tag: '#dev', price: '0.12 0G', exec: 892 }, { name: 'IMAGE UPSCALER 4K', tag: '#art', price: '0.02 0G', exec: 3401 }, { name: 'MEDICAL TRIAGE BOT', tag: '#health', price: '0.08 0G', exec: 214 }, { name: 'POEM MACHINE', tag: '#creative', price: '0.01 0G', exec: 5122 }, { name: 'FINANCIAL ANALYST', tag: '#finance', price: '0.20 0G', exec: 76 }, ]; function SkillCard({ skill, i, t, hoverIdx }) { const delay = 0.3 + i * 0.09; const a = clamp((t - delay) / 0.5, 0, 1); const ae = Easing.easeOutBack(a); const isHover = hoverIdx === i; const hoverScale = isHover ? 1.06 : 1; const hoverShadow = isHover ? 12 : 6; return (

{/* NFT corner ribbon */}

NFT

{/* Token id */}

#{String(1024 + i * 137).padStart(4, '0')}

{skill.tag[1].toUpperCase()}

{skill.tag}

{skill.name}

⚡ {skill.exec.toLocaleString()} runs

{skill.price}

); } function Cursor({ path, time }) { let x = path[0].x, y = path[0].y; for (let i = 0; i < path.length - 1; i++) { const a = path[i], b = path[i+1]; if (time >= a.t && time <= b.t) { const p = (time - a.t) / (b.t - a.t); const e = Easing.easeInOutCubic(p); x = a.x + (b.x - a.x) * e; y = a.y + (b.y - a.y) * e; } else if (time > b.t && i === path.length - 2) { x = b.x; y = b.y; } } const opacity = clamp((time - path[0].t + 0.3) / 0.3, 0, 1); return ( ); } function SceneExplore() { const { localTime: t } = useSprite(); const headT = clamp(t / 0.5, 0, 1); const searchT = clamp((t - 0.5) / 0.5, 0, 1); const typed = 'poem'.slice(0, Math.floor(clamp((t - 0.7) / 0.6, 0, 1) * 4)); const chipsT = clamp((t - 1.2) / 0.4, 0, 1); // Cursor path: comes in → moves to POEM MACHINE card (index 4 in grid) const cursorPath = [ { t: 2.4, x: 1700, y: 950 }, { t: 3.6, x: 1300, y: 600 }, { t: 4.8, x: 1300, y: 600 }, ]; // Hover card 4 (POEM MACHINE) once cursor arrives const hoverIdx = t > 3.6 ? 4 : -1; return (

{/* Search bar */}

{typed || 'search skills...'} {typed && typed.length < 4 ? '▎' : ''}

{/* Filter chips */}

{['#creative','#dev','#art','#finance','#law','#health'].map((c, i) => (

{c}

))}

{/* Grid of cards */}

{SKILLS.map((s, i) => )}

{/* Caption */} ⚡ 12,952 SKILLS MINTED AS NFTs · OWN · RUN · TRADE

); } // ───────────────────────────────────────────────────────────────────────────── // SCENE 04 — EXECUTE (richer: prompt typed, coins escrow, receipt progress) // ───────────────────────────────────────────────────────────────────────────── function SceneExecute() { const { localTime: t } = useSprite(); const headT = clamp(t / 0.5, 0, 1); const promptText = 'Write a 3-line poem about rain.'; const promptT = clamp((t - 0.5) / 0.9, 0, 1); const typed = promptText.slice(0, Math.floor(promptText.length * promptT)); const buttonT = clamp((t - 1.5) / 0.3, 0, 1); const pressed = t > 1.9 && t < 2.1; const coinStart = 2.0, coinEnd = 3.4; const numCoins = 7; const lockT = clamp((t - 3.4) / 0.5, 0, 1); // Processing bar in skill card const processT = clamp((t - 3.4) / 1.8, 0, 1); return (

{/* AI agents stacked vertically, far left — clear of the prompt card */} {[ { name: 'GPT AGENT', color: '#10A37F', shape: 'knot', delay: 0.0 }, { name: 'CLAUDE AGENT', color: '#D97757', shape: 'sparkle', delay: 0.2 }, { name: 'GEMINI AGENT', color: '#4285F4', shape: 'star4', delay: 0.4 }, ].map((agent, i) => { const appearT = clamp((t - agent.delay) / 0.4, 0, 1); const e = Easing.easeOutBack(appearT); const bob = Math.sin(t * 2 + i * 1.3) * 4; const y = 380 + i * 180 + bob; const spin = Math.sin(t*1.5 + i) * 6; return (

{/* Agent robot badge */}

{/* Brand-inspired generic SVG glyph (not actual trademarked logos) */}

{agent.name}

); })} {/* Prompt box */}

PROMPT

{typed}{promptT < 1 && promptT > 0 ? '▎' : ''}

{/* Run button */}

RUN SKILL · 0.01 0G

{/* Escrow vault */}

🔒

ESCROW

{lockT > 0 ? 'LOCKED · 0.01 0G' : 'WAITING...'}

{/* Lock shockwave */} {lockT > 0 && (

)}

{/* Skill card + processing */}

POEM MACHINE

● TEE COMPUTE · 0G

{/* Processing bar */}

0 ? 1 : 0.3, }}>

{processT < 1 ? `COMPUTING · ${Math.floor(processT * 100)}%` : 'DONE · OUTPUT READY'}

{/* Flying coins */} {Array.from({ length: numCoins }).map((_, i) => { const stagger = i * 0.14; const p = clamp((t - coinStart - stagger) / 0.9, 0, 1); if (p <= 0 || p >= 1) return null; const e = Easing.easeInOutCubic(p); const x = 400 + (960 - 400) * e; const arc = Math.sin(e * Math.PI) * 140; const y = 680 - arc + (620 - 680) * e; return ; })} 💰 ESCROWED IN A SMART CONTRACT — SKILL RUNS IN A TEE 🔐 NO ONE CAN TAMPER WITH THE OUTPUT, NOT EVEN US

); } // ───────────────────────────────────────────────────────────────────────────── // SCENE 05 — VERIFY (richer: hash → signature → on-chain receipt with steps) // ───────────────────────────────────────────────────────────────────────────── function SceneVerify() { const { localTime: t } = useSprite(); const outT = clamp(t / 0.5, 0, 1); const beamT = clamp((t - 1.0) / 1.0, 0, 1); const hashT = clamp((t - 1.5) / 0.6, 0, 1); const sigT = clamp((t - 2.3) / 0.6, 0, 1); const stampT = clamp((t - 2.9) / 0.5, 0, 1); const stampE = Easing.easeOutBack(stampT); const receiptT = clamp((t - 3.6) / 0.6, 0, 1); const outputText = `Silver rain on slate tonight, silence hums an even light, puddles catch the morning's flight.`; return (

{/* Output card (left) */}

OUTPUT

{outputText}

{/* scan beam */} {beamT > 0 && beamT < 1 && (

)} {stampT > 0 && (

✓ #VERIFIED

)}

{/* Hash / signature panel */}

OUTPUT HASH

0x{Math.floor(hashT * 999999999).toString(16).padStart(8, '0')}a8f3e9…c2b41d

TEE SIGNATURE

sig:0x{Math.floor(sigT * 999999999).toString(16).padStart(10, '0')}…99fd02

{/* TEE enclave (right) */}

{/* scan lines */} {Array.from({length: 8}).map((_, i) => (

))}

🛡

TEE

TRUSTED ENCLAVE

{/* Checklist */}

{[ { label: 'COMPUTE CAPTURED', at: 1.0 }, { label: 'OUTPUT HASHED', at: 1.8 }, { label: 'SIGNED BY ENCLAVE', at: 2.6 }, { label: 'POSTED ON-CHAIN', at: 3.6 }, ].map((c, i) => { const done = t > c.at; return (

c.at - 0.3 ? 1 : 0.3, marginBottom: 4, }}>

{done ? '✓' : ''}

{c.label}

); })}

{/* Receipt chip */}

TX 0x9af3…b21c · SETTLED ON 0G GALILEO

); } // ───────────────────────────────────────────────────────────────────────────── // SCENE 06 — PUBLISH (richer: build skill → mint → NFT card → revenue loop → tradeable) // ───────────────────────────────────────────────────────────────────────────── function ScenePublish() { const { localTime: t } = useSprite(); const devT = clamp(t / 0.3, 0, 1); const formT = clamp((t - 0.3) / 0.5, 0, 1); const mintBtnT = clamp((t - 1.2) / 0.3, 0, 1); const pressed = t > 1.5 && t < 1.7; const cardT = clamp((t - 1.7) / 0.6, 0, 1); const cardE = Easing.easeOutBack(cardT); const mintStampT = clamp((t - 2.3) / 0.5, 0, 1); const revenueT = clamp((t - 2.9) / 1.0, 0, 1); const tradeT = clamp((t - 4.3) / 0.5, 0, 1); return (

{/* Creator — pushed to far left for clear separation */}

{/* Skill-build form (shifted right with gap from creator, fades out as NFT card animates in) */} {t < 1.9 && (() => { const fadeOut = clamp((1.7 - t) / 0.2, 0, 1); return (

NAME

POEM MACHINE

PROMPT

"Write a vivid 3-line poem about {"{topic}"}…"

PRICE PER RUN

0.01 0G

PUBLISH → MINT NFT

); })()} {/* NFT card — shifted right to keep gap from creator */} {cardT > 0 && (

⚡

#0001

POEM MACHINE

OWNER · 0x06…5611

RUNS

{Math.floor(5122 + revenueT * 127)}

EARNED

{(51.22 + revenueT * 1.27).toFixed(2)} 0G

{mintStampT > 0 && (

MINTED!

)}

)} {/* Revenue loop coins */} {revenueT > 0 && Array.from({ length: 5 }).map((_, i) => { const loopDur = 1.5; const localT = ((t - 2.9 + i * 0.32) % loopDur) / loopDur; if (localT < 0) return null; const e = localT; const x = 1080 + (140 - 1080) * e; const arc = Math.sin(e * Math.PI) * 180; const y = 580 + (820 - 580) * e - arc; return ; })} {/* Revenue counter */} {revenueT > 0 && (

LIFETIME REVENUE

{(51.22 + revenueT * 1.27).toFixed(2)}

0G TOKENS

{/* Tradeable hint */} {tradeT > 0 && (

⇅ OR SELL THE NFT TO A NEW OWNER

)}

)} {/* ───── SECONDARY MARKET BEAT ───── New buyer makes a bid → card flips to new owner → SOLD stamp → royalty still drips back */} {(() => { const bidInT = clamp((t - 5.2) / 0.5, 0, 1); const bidE = Easing.easeOutBack(bidInT); const acceptT = clamp((t - 6.0) / 0.4, 0, 1); const soldT = clamp((t - 6.2) / 0.4, 0, 1); const soldE = Easing.easeOutBack(soldT); const newOwnT = clamp((t - 6.4) / 0.4, 0, 1); const royT = clamp((t - 6.6) / 0.6, 0, 1); if (bidInT <= 0) return null; return ( <> {/* Incoming bid card, floats up from below */} {bidInT > 0 && acceptT < 1 && (

INCOMING BID

180 0G

FROM · 0xA3…F41C

ACCEPT BID

)} {/* NEW OWNER ribbon appears on the NFT card after accept */} {newOwnT > 0 && (

NEW OWNER · 0xA3…F41C

)} {/* SOLD stamp on the card */} {soldT > 0 && (

SOLD

)} {/* Royalty coins: even after sale, creator still earns a cut */} {royT > 0 && Array.from({ length: 4 }).map((_, i) => { const loopDur = 1.2; const lt = (((t - 6.6) + i * 0.28) % loopDur) / loopDur; if (lt < 0) return null; const e = lt; const x = 1080 + (140 - 1080) * e; const arc = Math.sin(e * Math.PI) * 150; const y = 580 + (820 - 580) * e - arc; return ; })} {/* Royalty caption */} {royT > 0 && (

+5% ROYALTY FOREVER

)} ); })()} 🪙 EVERY RUN = AUTO-PAYMENT TO THE NFT OWNER 💱 SKILLS ARE TRADEABLE NFTs — SELL, TRANSFER, COLLECT ROYALTIES

); } // ───────────────────────────────────────────────────────────────────────────── // SCENE 07 — OUTRO (richer CTA + feature bullets) // ───────────────────────────────────────────────────────────────────────────── function SceneOutro() { const { localTime: t } = useSprite(); const v = clamp(t / 0.4, 0, 1); const a = clamp((t - 0.35) / 0.5, 0, 1); const o = clamp((t - 0.7) / 0.5, 0, 1); const bulletsT = clamp((t - 1.1) / 0.5, 0, 1); const cta = clamp((t - 1.6) / 0.5, 0, 1); const wobble = Math.sin(t * 3) * 3; const bullets = [ '⚡ RUN VERIFIED AI SKILLS', '💰 MONETIZE YOURS AS NFTs', '🛡 TEE-ATTESTED, ON-CHAIN', ]; return (

● LIVE ON 0G GALILEO TESTNET

{/* Stacked slogan */}

#VERIFIED

AI·SKILLS

ON CHAIN

{/* Bullet list */}

{bullets.map((b, i) => { const p = clamp((t - 1.1 - i * 0.15) / 0.4, 0, 1); const e = Easing.easeOutBack(p); return (

{b}

); })}

{/* CTA */} {cta > 0 && ( <>

↗

)}

); } Object.assign(window, { SceneHook, SceneLogo, SceneExplore, SceneExecute, SceneVerify, ScenePublish, SceneOutro, BRAND, DISPLAY, MONO, GridBG, Character, Coin, });