// Page sections for SpacioTemporality portfolio. // Components rely on window.GENERATIVE registered by generative.jsx. const { useState, useEffect: useFx, useRef: useR, useMemo } = React; // ===== DATA ===== // All real works removed. The grid now shows placeholder slots waiting to be // filled. Each slot keeps a `category` so the digital/physical split stays // meaningful, and `algo: 'placeholder'` so the renderer draws an empty // hatched tile instead of a live canvas. const PH = (no, category) => ({ id: `placeholder-${no}`, no, title: 'UNTITLED', algo: 'placeholder', year: '—', medium: 'work in progress', edition: '—', blurb: '', tags: [], category, isPlaceholder: true, }); const WORKS = [ PH('001', 'digital'), PH('002', 'digital'), PH('003', 'digital'), PH('004', 'digital'), PH('005', 'physical'), PH('006', 'physical'), PH('007', 'physical'), PH('008', 'physical'), ]; // Projects = curated groupings of artworks. The sub-pages list these as // carousels; each project page shows its `works` with full descriptions. const PROJECTS = [ { id: 'flow-studies', category: 'digital', no: 'P.01', title: 'Flow Studies', year: '2026', blurb: 'A series exploring vector noise as gesture — invisible currents traced by particles, each frame slightly different from the last.', works: [ { id: 'fs-001', title: 'Tidal Drift', medium: 'WebGL · realtime', year: '2026', description: 'Description forthcoming. The full text for this artwork will live here once published.' }, { id: 'fs-002', title: 'Quiet Field', medium: 'WebGL · still', year: '2026', description: 'Description forthcoming.' }, { id: 'fs-003', title: 'Eddy', medium: 'Generative · realtime', year: '2026', description: 'Description forthcoming.' }, ], }, { id: 'oscillators', category: 'digital', no: 'P.02', title: 'Oscillators', year: '2026', blurb: 'Coupled phase systems painting curves into time — Lissajous orbits remembered, then forgotten.', works: [ { id: 'os-001', title: 'Two Pendulums', medium: 'Canvas2D · realtime', year: '2026', description: 'Description forthcoming.' }, { id: 'os-002', title: 'Three Bodies', medium: 'Canvas2D · still', year: '2026', description: 'Description forthcoming.' }, { id: 'os-003', title: 'Resonance', medium: 'WebAudio + WebGL', year: '2026', description: 'Description forthcoming.' }, ], }, { id: 'after-images', category: 'digital', no: 'P.03', title: 'After Images', year: '2026', blurb: 'What survives a flash? Long-exposure renders of decaying generative scenes — light remembering itself.', works: [ { id: 'ai-001', title: 'Burn Mark', medium: 'WebGL · long-exposure', year: '2026', description: 'Description forthcoming.' }, { id: 'ai-002', title: 'Phosphor', medium: 'WebGL · still', year: '2026', description: 'Description forthcoming.' }, ], }, { id: 'plotter-prints', category: 'physical', no: 'P.01', title: 'Plotter Prints', year: '2026', blurb: 'AxiDraw pen plots on archival paper — drawings the algorithm cannot redraw the same way twice.', works: [ { id: 'pp-001', title: 'Static I', medium: 'AxiDraw · pen on paper · A2', year: '2026', description: 'Description forthcoming.' }, { id: 'pp-002', title: 'Static II', medium: 'AxiDraw · pen on paper · A2', year: '2026', description: 'Description forthcoming.' }, { id: 'pp-003', title: 'Slow Curve', medium: 'AxiDraw · ink on cotton · A1', year: '2026', description: 'Description forthcoming.' }, ], }, { id: 'risograph-zines', category: 'physical', no: 'P.02', title: 'Risograph Zines', year: '2026', blurb: 'Limited-edition zines run on a two-colour Risograph — generative composition under deliberate print constraints.', works: [ { id: 'rz-001', title: 'Issue 01', medium: 'Riso · 2-color · 24pp', year: '2026', description: 'Description forthcoming.' }, { id: 'rz-002', title: 'Issue 02', medium: 'Riso · 2-color · 16pp', year: '2026', description: 'Description forthcoming.' }, ], }, ]; // ===== NAV ===== function Nav({ theme = 'light', setTheme = () => {} }) { const [time, setTime] = useState(() => new Date()); useFx(() => { const i = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(i); }, []); const hhmm = time.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'America/Los_Angeles' }); const isDark = theme === 'dark'; return ( ); } // ===== HERO ===== function Hero({ palette }) { const [t, setT] = useState(0); useFx(() => { let raf, t0 = performance.now(); const loop = (now) => { setT((now - t0) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Random procedural texture inside the AMBAVERSE text mask. // Each entry is a feTurbulence recipe + a feColorMatrix tint. The matrix // is per-channel (last row forces full alpha). A fresh seed each mount // varies the noise pattern even within the same recipe. const tex = useMemo(() => { const recipes = [ // VIOLET STONE — large soft swirls { freq: '0.010 0.018', oct: 3, type: 'fractalNoise', matrix: '0.45 0 0 0 0.04 0 0.25 0 0 0.02 0 0 0.85 0 0.18 0 0 0 0 1', bg: '#0d0a18' }, // RUST — medium warm grain { freq: '0.025 0.08', oct: 3, type: 'fractalNoise', matrix: '1.00 0 0 0 0.06 0 0.55 0 0 0.04 0 0 0.20 0 0.00 0 0 0 0 1', bg: '#1a0a05' }, // CONCRETE — fine neutral grain { freq: '0.08', oct: 2, type: 'fractalNoise', matrix: '0.55 0 0 0 0.10 0 0.55 0 0 0.10 0 0 0.55 0 0.10 0 0 0 0 1', bg: '#161616' }, // CLOUDS — wide cool drifts { freq: '0.005', oct: 4, type: 'fractalNoise', matrix: '0.20 0 0 0 0.04 0 0.40 0 0 0.06 0 0 0.85 0 0.12 0 0 0 0 1', bg: '#070c1a' }, // STATIC — fine high-contrast B&W { freq: '0.9', oct: 1, type: 'turbulence', matrix: '1.10 0 0 0 0 0 1.10 0 0 0 0 0 1.10 0 0 0 0 0 0 1', bg: '#000000' }, // MOSS — green organic { freq: '0.03 0.05', oct: 3, type: 'fractalNoise', matrix: '0.25 0 0 0 0.02 0 0.80 0 0 0.05 0 0 0.30 0 0.02 0 0 0 0 1', bg: '#08160a' }, // PLASMA — psychedelic { freq: '0.012', oct: 4, type: 'fractalNoise', matrix: '1.00 0 0 0 0 0 0.30 0 0 0.05 0 0 0.95 0 0.05 0 0 0 0 1', bg: '#1a061a' }, // BONE — pale cream texture (reads well in dark mode) { freq: '0.08 0.15', oct: 2, type: 'fractalNoise', matrix: '0.92 0 0 0 0.06 0 0.90 0 0 0.05 0 0 0.82 0 0.04 0 0 0 0 1', bg: '#3a3326' }, // OXIDE — copper/teal mineral { freq: '0.018 0.04', oct: 3, type: 'fractalNoise', matrix: '0.55 0 0 0 0.05 0 0.85 0 0 0.05 0 0 0.65 0 0.05 0 0 0 0 1', bg: '#0a1a18' }, ]; const pick = recipes[Math.floor(Math.random() * recipes.length)]; const seed = Math.floor(Math.random() * 100); return { ...pick, seed }; }, []); return (
{/* Top-right counter */}
EST. 2024 · UNITED STATES OF AMERICA
UPTIME / {Math.floor(t)}.{String(Math.floor((t % 1) * 1000)).padStart(3, '0')}s
{/* Bottom-anchored stack: featured cards → @spatio strip → AMBAVERSE title */}
{/* Featured cards row */}
// FEATURED · 03 SLOTS
{[ { id: 'ft1', no: 'FT.01', title: 'UNTITLED', medium: 'Generative · forthcoming', year: '2026' }, { id: 'ft2', no: 'FT.02', title: 'UNTITLED', medium: 'Print · forthcoming', year: '2026' }, { id: 'ft3', no: 'FT.03', title: 'UNTITLED', medium: 'Object · forthcoming', year: '2026' }, ].map((p) => { const Algo = window.GENERATIVE && window.GENERATIVE.placeholder; return (
{Algo &&
}
FEATURED · {p.no}
{p.title}
{p.medium}
{p.year}
 ); })}
{/* Text mask — white inside the letters, black outside */} AMBAVERSE {/* Procedural texture filter — feTurbulence noise tinted per recipe */} {/* Everything inside this group is clipped to the AMBAVERSE letterforms */} {/* Background tint colour for the recipe */} {/* The tinted noise texture itself */}
Creating experiences rooted in the inner sanctum of my mind, unravelling deep sentiments in your hearts.
); } // ===== MARQUEE ===== function Marquee() { const items = [ 'CONSTRUCTION IN PROGRESS. LAUNCHING ON JUNE 15TH 2026', ]; return (
{[0, 1].map(k => ( {items.map((it, i) => ( {it} ✦ ))} ))}
); } // ===== GALLERY (uniform grid view, grouped by category) ===== function Gallery({ palette, onOpen }) { const [filter, setFilter] = useState('all'); // all | digital | physical const groups = [ { key: 'digital', label: 'Digital Works', sub: '', accent: 'var(--cyan)' }, { key: 'physical', label: 'Physical Works', sub: '', accent: 'var(--magenta)' }, ]; const visibleGroups = filter === 'all' ? groups : groups.filter(g => g.key === filter); function renderProjectCell(p, i, columns) { const Algo = window.GENERATIVE && window.GENERATIVE.placeholder; return (
{Algo && }
{p.no} · {p.category.toUpperCase()} PROJECT
{p.title}
{p.blurb}
{p.works.length} works · {p.year} OPEN →
{p.no} · {p.title} {p.year}
); } return ( ); } function Archive({ palette, onOpen }) { const plotRef = useR(null); const [size, setSize] = useState({ w: 1400, h: 900 }); const [cursor, setCursor] = useState({ x: 0.5, y: 0.5 }); useFx(() => { function measure() { if (plotRef.current) { const r = plotRef.current.getBoundingClientRect(); setSize({ w: r.width, h: r.height }); } } measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure); }, []); function onMove(e) { if (!plotRef.current) return; const r = plotRef.current.getBoundingClientRect(); setCursor({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height }); } // axes labels return (
// SECTION 02 — INDEX OF WORKS

The Index / plotted in space & time

{WORKS.length} WORKS · 2023 → 2025
X-AXIS: TIME  ·  Y-AXIS: MATERIALITY
{/* Axis lines */}
{/* Axis tick labels */} {['2023', '2024', '2025', '2026'].map((y, i) => (
{y}
))} {['DIGITAL', 'HYBRID', 'PHYSICAL'].map((y, i) => (
{y}
))}
TIME →
↑ MATERIAL
{/* Cursor crosshair */}
{/* Work tiles */} {WORKS.map((w, i) => { const Algo = window.GENERATIVE[w.algo]; const left = 60 + (w.x * (size.w - 60 - 30 - w.w)); const top = 30 + (w.y * (size.h - 30 - 50 - w.h)); return (
onOpen(w)} style={{ left, top, width: w.w, height: w.h, zIndex: 10 + i, }} > {w.no} · {w.title} {w.year}
); })} {/* Legend tile bottom-right */}
HOW TO READ THIS
Each tile is a live render of an actual work. Hover to magnify, click to open the full piece with notes and runtime.
); } // ===== DETAIL MODAL ===== function Detail({ work, palette, onClose }) { useFx(() => { const k = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k); }, [onClose]); if (!work) return null; const Algo = window.GENERATIVE[work.algo]; return (
e.stopPropagation()}>
{work.no} · WORK ENTRY

{work.title}

{work.year} — {work.medium}
{work.tags.map(t => {t})} {work.edition}

{work.blurb}

RUNTIME PARAMETERS
algorithm{work.algo}
seed0x{(work.id.charCodeAt(0) * 17).toString(16)}…
edition{work.edition}
medium{work.medium}
Inquire
); } // ===== PROCESS ===== function Process() { const steps = [ { n: '01', name: 'Read', desc: 'A question pulled from physics, biology, or daily walking. Notebook fills before any code is opened.', tools: 'PAPER / GRAPH / INK' }, { n: '02', name: 'Sketch', desc: 'Twenty bad versions, fast. Most are static; a few suggest a generator.', tools: 'p5 / OBSERVABLE' }, { n: '03', name: 'System', desc: 'The chosen sketch becomes a system — parameters, ranges, edges. The work is the system.', tools: 'TYPESCRIPT / GLSL' }, { n: '04', name: 'Tune', desc: 'Iteration on parameter space. The system performs hundreds of times; one performance is selected, or all are kept.', tools: 'CUSTOM TOOLING' }, { n: '05', name: 'Render', desc: 'The output lives on a screen, in print, on a plotter, or as a live runtime. Material is a late decision.', tools: 'AXIDRAW / RISO / WEBGL' }, ]; return (
// SECTION 02 — METHOD

How the work is made

a five-step practice, repeated until something refuses to be improved.
{steps.map(s => (
{s.n} /

{s.name}

{s.desc}
{s.tools}
))}
); } // ===== ABOUT ===== // ===== ABOUT + CONTACT (merged into a single page) ===== function AboutContact({ palette }) { const [hover, setHover] = useState(false); return (
// SECTION 02 — PROFILE & CONTACT

About

EST. 2024
Ambaverse is the art portfolio of Shashank, an indie artist based in United States.

Practicing print, plotter drawings, interactive installations and audio-reactive performances. Each piece is a small world — a room where mathematics is permitted to dream, and I am only the hand at the table, listening, writing it down.

// STACK
{['p5', 'p5js', 'Processing', 'Python', 'Javascript', 'AxiDraw'].map(t => ( {t} ))}
// FIND ME ON INSTAGRAM
setHover(true)} onMouseLeave={() => setHover(false)} data-cursor="hover" data-cursor-label="OPEN →" > @spaciotemporality
{/* Contact content — flows on the same background as the about section */}
// LEGAL NOTICE
All works on this site are © Shashank / Ambaverse. All rights reserved.

No portion of these works — including images, source code, generative outputs, video captures, prints, and derivative renderings — may be reproduced, distributed, displayed, transmitted, modified, or used to train any machine-learning model without explicit prior written permission from the artist. Quotation for criticism or journalism is welcome with attribution; everything else requires a license. Inquiries via Instagram DM.

© 2024–2026 SHASHANK / AMBAVERSE · ALL RIGHTS RESERVED · CUSTOM THEME WITH CLAUDE DESIGN AND CLAUDE CODE
); } // ===== CATEGORY PAGE (Digital / Physical sub-pages) ===== // Lists the projects in a given category as a responsive grid. function CategoryPage({ category, palette }) { const projects = PROJECTS.filter(p => p.category === category); const Algo = window.GENERATIVE && window.GENERATIVE.placeholder; const title = category === 'digital' ? 'Digital' : 'Physical'; const sub = category === 'digital' ? 'Screen-native, generative, runtime-driven. Each project is a system, played in real time.' : 'Print, plotter drawings, objects. Code translated into things you can hold.'; return (
← Back to Gallery
// {category.toUpperCase()} · {projects.length} PROJECT{projects.length === 1 ? '' : 'S'}

{title} / projects

{sub}
{projects.map((p) => ( { e.currentTarget.style.transform = 'translate(-3px, -3px)'; e.currentTarget.style.boxShadow = '6px 6px 0 var(--ink)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }} >
{Algo &&
}
{p.no} · PROJECT

{p.title}

{p.blurb}

{p.works.length} works · {p.year} view →
))}
); } // ===== PROJECT PAGE — all artworks in a single project, with descriptions ===== function ProjectPage({ projectId, palette }) { const project = PROJECTS.find(p => p.id === projectId); const Algo = window.GENERATIVE && window.GENERATIVE.placeholder; if (!project) { return (
// 404

Project not found

← Back to home
); } const categoryHref = `#/${project.category}`; return (
← Back to {project.category} projects
{project.no} · {project.category.toUpperCase()} PROJECT · {project.year}

{project.title}

{String(project.works.length).padStart(2, '0')} {project.works.length === 1 ? 'WORK' : 'WORKS'}

{project.blurb}

{project.works.map((work, i) => (
{Algo &&
}
{String(i + 1).padStart(2, '0')} / {String(project.works.length).padStart(2, '0')}
{work.medium} · {work.year}

{work.title}

{work.description}

))}
); } // Shared style for sub-page back buttons. function backLinkStyle() { return { display: 'inline-flex', alignItems: 'center', gap: 8, border: '1.5px solid var(--ink)', background: 'var(--bg)', color: 'var(--ink)', padding: '8px 14px', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', textDecoration: 'none', cursor: 'none', }; } Object.assign(window, { Nav, Hero, Marquee, Gallery, Archive, Detail, Process, AboutContact, CategoryPage, ProjectPage, WORKS, PROJECTS, });