/* global React, INK, CREAM, PULSE, GENS, Sparkle, GradText, CTAButton, Reveal, useReveal, useTyping, SectionHead, ControlPill, Shimmer, SectionShell, SB_EASE */ // § 03 Direct a shoot · § 04 Clone any reel const { useState: srS, useEffect: srE } = React; // ---------- § 03 — Photoshoot ---------- const SHOOT = [ { src: 'assets/shoot/set-1.webp', scene: 'Lazy morning · selfie' }, { src: 'assets/shoot/set-2.webp', scene: 'Lazy morning · reclined' }, { src: 'assets/shoot/set-3.webp', scene: 'Lazy morning · to camera' }, { src: 'assets/shoot/set-4.webp', scene: 'Lazy morning · stretch' }, { src: 'assets/shoot/set-5.webp', scene: 'Lazy morning · propped' }, { src: 'assets/shoot/set-6.webp', scene: 'Lazy morning · soft light' }, ]; const Bracket = ({ c = '#fff' }) => ( {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h],i)=>( ))} ); const SegChip = ({ children, active, locked }) => ( {children} {locked && } ); const ShootSection = () => { const [gridRef, on] = useReveal(0.3); return (
The brief
Identity locked
{[ { n: 'Social Media', sub: 'All-SFW · feed-ready', b: 'SFW', bc: '#22C55E', on: true, desc: 'Angles, poses, expressions, outfit shifts. Same person, same room.', locks: ['Identity', 'Environment'] }, { n: 'Sequenced Set', sub: 'SFW → NSFW · arc', b: 'ARC', bc: 'var(--brand-purple-600)' }, { n: 'NSFW Set', sub: 'All-NSFW · same world', b: 'NSFW', bc: INK, lock: true }, ].map(t => (
{t.n} {t.b} {t.lock && }
{t.sub}
{t.on &&
{t.desc}
} {t.on && (
{t.locks.map(l => ( {l} ))}
)}
))}
Set size {[3, 4, 5, 6, 7, 8].map(n => ( {n} ))} … 10
{/* output set — frames develop in sequence */}
{SHOOT.map((g, i) => (
{g.scene} {i + 1} / 6
))}
); }; // ---------- § 04 — Clone any reel ---------- const REEL_URL = 'instagram.com/reel/xK92hf4…'; const MiniPhone = ({ children, label, w = 210 }) => (
{children}
{label}
); const ReelSection = () => { const [ref, on] = useReveal(0.35); const [muted, setMuted] = srS(true); const [cMuted, setCMuted] = srS(true); const cloneRef = React.useRef(null); const toggleCMute = () => { const v = cloneRef.current; if (v) v.muted = cMuted ? false : true; setCMuted(m => !m); }; const vidRef = React.useRef(null); const toggleMute = () => { const v = vidRef.current; if (v) v.muted = muted ? false : true; setMuted(m => !m); }; // pause both videos while offscreen — keeps decode off the main thread during scroll srE(() => { const vids = [vidRef.current, cloneRef.current].filter(Boolean); vids.forEach(v => { v.muted = true; v.volume = 1; }); if (!vids.length) return; const io = new IntersectionObserver((es) => es.forEach(e => { const v = e.target; if (e.isIntersecting) { const p = v.play(); if (p && p.catch) p.catch(() => {}); } else v.pause(); }), { threshold: 0.05 }); vids.forEach(v => io.observe(v)); return () => io.disconnect(); }, []); const [typed, doneTyping] = useTyping(REEL_URL, on, 26, 500); const [phase, setPhase] = srS('idle'); // idle → cloning → done srE(() => { if (doneTyping && phase === 'idle') { const t = setTimeout(() => setPhase('cloning'), 500); return () => clearTimeout(t); } if (phase === 'cloning') { const t = setTimeout(() => setPhase('done'), 1800); return () => clearTimeout(t); } }, [doneTyping, phase]); return (
{/* link bar */}
{typed || 'Paste a reel link'} {on && !doneTyping && }
{phase === 'cloning' ? 'Cloning…' : 'Clone it'}
{/* phones */}