// direction-noir.jsx — B · NOIR // Dark cinematic. WebGL liquid gradient hero, grainy noise, mono details. function NoirShader({ accent }) { const canvasRef = React.useRef(null); React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const gl = canvas.getContext('webgl'); if (!gl) return; const resize = () => { canvas.width = canvas.offsetWidth * Math.min(window.devicePixelRatio, 2); canvas.height = canvas.offsetHeight * Math.min(window.devicePixelRatio, 2); gl.viewport(0, 0, canvas.width, canvas.height); }; resize(); window.addEventListener('resize', resize); const vs = `attribute vec2 p; void main(){ gl_Position = vec4(p,0.,1.); }`; const hex = accent.replace('#', ''); const r = parseInt(hex.substr(0,2),16)/255; const g = parseInt(hex.substr(2,2),16)/255; const b = parseInt(hex.substr(4,2),16)/255; const fs = ` precision mediump float; uniform vec2 uRes; uniform float uT; uniform vec2 uM; uniform vec3 uAcc; float hash(vec2 p){ return fract(sin(dot(p,vec2(27.619,57.583)))*43758.5); } float noise(vec2 p){ vec2 i=floor(p); vec2 f=fract(p); f=f*f*(3.-2.*f); return mix(mix(hash(i),hash(i+vec2(1,0)),f.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x), f.y); } float fbm(vec2 p){ float v=0., a=.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.02; a*=.5; } return v; } void main(){ vec2 uv = gl_FragCoord.xy/uRes.xy; vec2 p = uv*2.-1.; p.x *= uRes.x/uRes.y; float t = uT*.08; vec2 q = vec2(fbm(p+vec2(t,0.)), fbm(p+vec2(5.2,1.3)+t)); vec2 r = vec2(fbm(p+4.*q+vec2(1.7,9.2)+t*1.5), fbm(p+4.*q+vec2(8.3,2.8)-t*1.2)); float f = fbm(p + 4.*r); float d = distance(uv, uM); f += (1.-smoothstep(0., .4, d))*.3; vec3 col = mix(vec3(.04,.03,.05), vec3(.1,.06,.08), f); col = mix(col, uAcc, smoothstep(.55,.9,f)*.6); col = mix(col, vec3(.95,.88,.75), pow(smoothstep(.72,.95,f),2.)*.5); col *= 1. - length(uv - .5)*.6; gl_FragColor = vec4(col, 1.); }`; const compile = (type, src) => { const s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s); return s; }; const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(prog); gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(prog, 'p'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); const uRes = gl.getUniformLocation(prog, 'uRes'); const uT = gl.getUniformLocation(prog, 'uT'); const uM = gl.getUniformLocation(prog, 'uM'); const uAcc = gl.getUniformLocation(prog, 'uAcc'); gl.uniform3f(uAcc, r, g, b); let mx = .5, my = .5, tmx = .5, tmy = .5; const onMouse = (e) => { tmx = e.clientX / window.innerWidth; tmy = 1 - e.clientY / window.innerHeight; }; window.addEventListener('mousemove', onMouse); let raf, start = performance.now(); const tick = () => { mx += (tmx - mx) * .08; my += (tmy - my) * .08; gl.uniform2f(uRes, canvas.width, canvas.height); gl.uniform1f(uT, (performance.now() - start) / 1000); gl.uniform2f(uM, mx, my); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); raf = requestAnimationFrame(tick); }; tick(); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', onMouse); }; }, [accent]); return ; } function DirNoir({ tweaks }) { const accent = tweaks.accent; const density = tweaks.density; const heroVar = tweaks.hero; const displayFont = tweaks.displayFont; const pad = { tight: 80, normal: 140, generous: 200 }[density]; return (
{heroVar === 'stacked' && } {heroVar === 'marquee' && } {heroVar === 'portrait' && } {/* ticker removed */}
); } function NoirNav() { const [hidden, setHidden] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); const [scopeOpen, setScopeOpen] = React.useState(false); React.useEffect(() => { const stage = document.querySelector('.c1-stage'); if (!stage) return; let lastY = stage.scrollTop; let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const y = stage.scrollTop; const delta = y - lastY; if (y < 40) setHidden(false); else if (delta > 4) setHidden(true); else if (delta < -4) setHidden(false); lastY = y; }); }; stage.addEventListener('scroll', onScroll, { passive: true }); return () => { cancelAnimationFrame(raf); stage.removeEventListener('scroll', onScroll); }; }, []); // Lock body scroll while the mobile menu is open React.useEffect(() => { const stage = document.querySelector('.c1-stage'); if (!stage) return; if (menuOpen) stage.style.overflow = 'hidden'; else stage.style.overflow = ''; return () => { stage.style.overflow = ''; }; }, [menuOpen]); const links = [ { href: 'scope.html', label: 'Scope', cursor: 'Explore', children: [ { href: 'scope.html?s=brands', label: 'Brands' }, { href: 'scope.html?s=concepts', label: 'Concepts' }, { href: 'scope.html?s=campaigns', label: 'Campaigns' }, ], }, { href: 'work.html', label: 'Stories', cursor: 'View' }, { href: 'journal.html', label: 'Field Notes', cursor: 'Read' }, { href: 'mailto:hello@chapter1.in', label: 'Say Hello', cursor: 'Write' }, ]; return ( <> {menuOpen && (
{links.map((l, i) => ( {l.children ? ( ) : ( setMenuOpen(false)} className="noir-caps" style={{ fontSize: 16, letterSpacing: '.22em', textTransform: 'uppercase', color: '#f0ebe2', opacity: 0, animation: `c1-fade-in .5s cubic-bezier(.16,1,.3,1) ${80 + i * 70}ms forwards`, }}> {l.label} )} {l.children && scopeOpen && (
{l.children.map((c) => ( setMenuOpen(false)} className="noir-caps" style={{ fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', color: 'rgba(240,235,226,.6)', }}> {c.label} ))}
)} ))}
)} ); } function NoirHeroShader({ accent }) { return (


{' '}

A new-age creative house for brands with something to say.

); } function NoirHeroMarquee({ accent }) { return (
Chapter One —  branding & storytelling for night-minded brands —
); } function NoirHeroSplit({ accent }) { return (
Studio · Est. MMXVIII · Mumbai


Branding and storytelling for luxury hospitality and craft F&B — written with the seriousness of a wine list and the patience of a sauce.

[ Enter the index ]
); } function NoirTicker() { return (
 ✦  Brand DNA  ·  Growth Blueprint  ·  Experience & Rituals  ·  F&B Concepts  ·  Social Campaigns  ·  Digital Presence  ·  Content Creation  · 
); } function NoirScope({ pad }) { // Snap-per-scroll: section is N×100vh tall so there's real scroll runway. // The sticky child stays pinned through the section. We hijack scroll inside // the section, advancing scrollTop by exactly one viewport per wheel/touch event. const N = SERVICES.length; const sectionRef = React.useRef(null); const [idx, setIdx] = React.useState(0); const idxRef = React.useRef(0); const lockRef = React.useRef(false); const touchY = React.useRef(0); React.useEffect(() => { const stage = document.querySelector('.c1-stage'); const section = sectionRef.current; if (!stage || !section) return; // Disable snap-per-scroll on mobile — content gets clipped because // the touch-handler hijacks vertical scroll. Let the scope section // flow as a normal vertical stack on small viewports. const isMobile = () => window.matchMedia('(max-width: 768px)').matches; if (isMobile()) return; // Section pin range in stage coordinates const sectionTop = () => section.offsetTop; const sectionBottom = () => section.offsetTop + section.offsetHeight - stage.clientHeight; const isPinned = () => { const y = stage.scrollTop; return y >= sectionTop() - 1 && y <= sectionBottom() + 1; }; const goTo = (next) => { next = Math.max(0, Math.min(N - 1, next)); idxRef.current = next; setIdx(next); stage.scrollTo({ top: sectionTop() + next * stage.clientHeight, behavior: 'smooth', }); lockRef.current = true; setTimeout(() => { lockRef.current = false; }, 750); }; const onWheel = (e) => { if (!isPinned()) return; const dy = e.deltaY; const atStart = idxRef.current === 0 && dy < 0; const atEnd = idxRef.current === N - 1 && dy > 0; if (atStart || atEnd) return; // let page scroll past e.preventDefault(); if (lockRef.current) return; if (Math.abs(dy) < 6) return; goTo(idxRef.current + (dy > 0 ? 1 : -1)); }; const onTouchStart = (e) => { touchY.current = e.touches[0].clientY; }; const onTouchMove = (e) => { if (!isPinned()) return; const dy = touchY.current - e.touches[0].clientY; const atStart = idxRef.current === 0 && dy < 0; const atEnd = idxRef.current === N - 1 && dy > 0; if (atStart || atEnd) return; if (Math.abs(dy) < 24) return; e.preventDefault(); if (lockRef.current) return; goTo(idxRef.current + (dy > 0 ? 1 : -1)); touchY.current = e.touches[0].clientY; }; const onKey = (e) => { if (!isPinned()) return; if (e.key === 'ArrowRight' || e.key === 'PageDown') { e.preventDefault(); goTo(idxRef.current + 1); } if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); goTo(idxRef.current - 1); } }; stage.addEventListener('wheel', onWheel, { passive: false }); stage.addEventListener('touchstart', onTouchStart, { passive: true }); stage.addEventListener('touchmove', onTouchMove, { passive: false }); window.addEventListener('keydown', onKey); return () => { stage.removeEventListener('wheel', onWheel); stage.removeEventListener('touchstart', onTouchStart); stage.removeEventListener('touchmove', onTouchMove); window.removeEventListener('keydown', onKey); }; }, [N]); return (
{/* Header */}
[ 04 ] Scope
What We Do
{SERVICES.map((s, i) => (
{s.n}
))}
{/* Horizontal track — snaps one full viewport per index */}
{SERVICES.map((s) => ( ))}
{/* Footer hint */}
Scroll to advance {String(idx + 1).padStart(2,'0')} / {String(N).padStart(2,'0')}
); } function NoirManifesto({ pad }) { return (
[ 02 ] Manifesto

We don't make brands look better. We make them mean more. For those who know the right identity can outlive trends, markets, and moments.

At Chapter 1, we are a boutique agency working at the intersection of concept, culture, and creative strategy. We craft identities, campaigns, guest experiences, and ideas that make brands felt, remembered, and returned to. We believe the strongest brands live beyond logos — in moments, emotions, rituals, and stories people carry with them. We work with those building the exceptional, the unforgettable, and the next. We shape what the future remembers.

); } function NoirStories({ pad }) { const scrollRef = React.useRef(null); const scroll = (dir) => { const el = scrollRef.current; if (!el) return; el.scrollBy({ left: dir * (el.clientWidth * 0.85), behavior: 'smooth' }); }; return (
[ 01 ] Stories

Portfolio
Highlights.

{/* Mobile-only carousel arrows (hidden on desktop via mobile.css) */}
{WORK.map((w, i) => { const layouts = [ { col: 'span 4', h: 580 }, { col: 'span 2', h: 580 }, { col: 'span 2', h: 420 }, { col: 'span 2', h: 420 }, { col: 'span 2', h: 420 }, { col: 'span 6', h: 480 }, ]; const L = layouts[i]; return (
{w.n} {w.year}

{w.client}

{w.kind} {w.tags[0]}
); })}
); } function NoirClients({ pad }) { return (
[ 03 ] Clients
{CLIENTS_TOP.map((c) => ( {c}✦ ))} {CLIENTS_BOTTOM.map((c) => ( {c}· ))}
); } function NoirJournal({ pad }) { return (
[ 05 ] Field Notes

Field notes.

{JOURNAL.map((j, i) => (
{j.cat} {j.date}

{j.title}

{j.read} ↗
))}
); } function NoirContact({ pad, accent }) { const [form, setForm] = React.useState({ name: '', email: '', company: '', mobile: '', message: '' }); const [sent, setSent] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); const [submitError, setSubmitError] = React.useState(null); const set = (k) => (e) => setForm({ ...form, [k]: e.target.value }); // Form submission: POSTs to a configurable endpoint (Google Apps Script // web app, Sheety, Formspree, Make/Zapier hook — anything that accepts // JSON). Configure once via DevTools console: // localStorage.setItem('c1.form.endpoint', 'https://script.google.com/macros/s/.../exec'); // See CONTACT-FORM-SETUP.md for the full Google Sheets recipe. // If no endpoint is set, falls back to opening a pre-filled mailto. const onSubmit = async (e) => { e.preventDefault(); if (submitting) return; setSubmitError(null); setSubmitting(true); const payload = { ...form, submittedAt: new Date().toISOString(), source: 'chapter1.website', page: 'home', }; const endpoint = (typeof localStorage !== 'undefined' && localStorage.getItem('c1.form.endpoint')) || ''; if (endpoint) { try { // 'no-cors' + text/plain avoids the CORS preflight that Apps Script // doesn't support. The script still receives the body via e.postData. await fetch(endpoint, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(payload), }); setSent(true); } catch (err) { console.warn('[contact] submit failed', err); setSubmitError('Could not send right now. Please email hello@chapter1.in directly.'); } finally { setSubmitting(false); } return; } // Fallback: open the user's mail client with all fields pre-filled const subject = `New enquiry from ${form.name || 'a visitor'}`; const lines = [ `Name: ${form.name}`, `Email: ${form.email}`, `Company: ${form.company || '—'}`, `Mobile: ${form.mobile || '—'}`, '', form.message || '', ]; window.location.href = `mailto:hello@chapter1.in?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines.join('\n'))}`; setSent(true); setSubmitting(false); }; const inputStyle = { background: 'transparent', border: 0, borderBottom: '1px solid var(--rule)', color: '#f0ebe2', fontFamily: 'Fraunces, Georgia, serif', fontWeight: 300, fontSize: 22, padding: '14px 0', outline: 'none', width: '100%', transition: 'border-color .3s', }; const labelStyle = { display: 'block', fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6, }; return (
{/* Headline — big & centered */}
[ 06 ] Say Hello

{/* Form — centered, narrower column below */}
{sent ? (
Thanks — we’ll be in touch.

Your note has landed in the inbox of {form.name || 'one of us'}. Expect a reply within two working days.

) : (