// HIWCinematic: full-viewport scroll-jacked cinematic for How It Works. // // Layout: 3 devices (phone + laptop + desktop + tablet) orbit a central // "sync core" made from the Synchronize logo's double-bubble motif. // Scroll advances through 6 chapters; each chapter drives a scene state // that the devices and core react to. const { useState: useStC, useEffect: useEffC, useRef: useRefC, useMemo: useMemoC } = React; // ---------- Scene script ---------- // Each scene is a snapshot of the world: which device is active, what // messages are visible on each device, what the sync core is doing, and // a caption. // Sample thread: an engaging, fictional conversation that unfolds across all three platforms. const THREAD_Q = "When a critical software vendor goes down, what does your team communicate before you have a confirmed recovery time?"; const REPLIES = [ { who: 'Mei L.', role: 'CTO', via: 'circle', color: '#21C089', text: "We send three things: what is affected, what people should do now, and when the next update will arrive. Facts first; no guessed ETA.", reacts: ['💡', '✅', '👏'] }, { who: 'David O.', role: 'Head of Customer Experience', via: 'email', color: '#B24848', text: "Naming one communications owner made the biggest difference for us. Support, sales, and engineering all work from the same update.", reacts: ['🙌', '💯'] }, { who: 'Nora B.', role: 'COO', via: 'email', color: '#2F7CFF', text: "We also state what is still working. It lowers the temperature and gives teams a useful next step while engineering investigates.", reacts: ['✅', '👏'] }, ]; const SCENES = [ { id: 'meet', caption: { eyebrow: 'Your community, three platforms', title: 'Members show up where they already live.', body: 'Some are in Slack all day. Some only check email. Some live inside your community platform. Meeting them everywhere used to mean running three separate communities.' }, core: { state: 'idle' }, slack: { mode: 'intro', who: 'Alyssa G.', sub: 'VP Operations · checks Slack throughout the day' }, circle: { mode: 'intro', who: 'Mei L.', sub: 'CTO · participates in the community platform' }, gmail: { mode: 'intro', who: 'David O.', sub: 'Customer leader · prefers email' }, }, { id: 'ask', caption: { eyebrow: 'Step 01 · Slack', title: 'A member asks for practical advice in Slack.', body: 'Alyssa shares a timely operating question in the channel she already uses with her team.' }, core: { state: 'listening' }, slack: { mode: 'composing', text: THREAD_Q }, circle: { mode: 'idle' }, gmail: { mode: 'idle' }, }, { id: 'sync', caption: { eyebrow: 'Step 02 · Synchronize', title: 'Synchronize carries the conversation everywhere.', body: 'The post keeps its author, context, and timestamp as it is prepared for email and your online community.' }, core: { state: 'active', direction: 'in' }, slack: { mode: 'posted', text: THREAD_Q }, circle: { mode: 'idle' }, gmail: { mode: 'idle' }, }, { id: 'fanout', caption: { eyebrow: 'Step 03 · Everywhere', title: 'Every member sees it in a familiar format.', body: 'The community displays a native post while email delivers a clean, reply-ready message. No links to chase and nothing to repost.' }, core: { state: 'active', direction: 'out' }, slack: { mode: 'posted', text: THREAD_Q }, circle: { mode: 'posted', text: THREAD_Q }, gmail: { mode: 'posted', text: THREAD_Q }, }, { id: 'replies', caption: { eyebrow: 'Step 04 · The response', title: 'Expert answers return from every surface.', body: 'Mei replies in the community. David responds from Gmail. Both answers join the same thread in Slack with clear attribution.' }, core: { state: 'active', direction: 'through' }, slack: { mode: 'thread', text: THREAD_Q, replies: REPLIES }, circle: { mode: 'thread', text: THREAD_Q, replies: REPLIES.slice(0, 2) }, gmail: { mode: 'thread', text: THREAD_Q, replying: REPLIES[1] }, }, { id: 'unified', caption: { eyebrow: 'The result', title: 'One useful conversation, open to everyone.', body: 'Members contribute from the tools they prefer while Synchronize preserves one complete thread, its participants, and every interaction.' }, core: { state: 'halo' }, slack: { mode: 'thread', text: THREAD_Q, replies: REPLIES, tag: 'LIVE' }, circle: { mode: 'thread', text: THREAD_Q, replies: REPLIES, tag: 'LIVE' }, gmail: { mode: 'thread', text: THREAD_Q, replies: REPLIES, tag: 'LIVE' }, }, ]; // ---------- Sync core (conversation bubbles from logo motif) ---------- function SyncCore({ state = 'idle', direction, progress = 0 }) { // Two bubbles in S-shape with 3 dots each (from logo). They pulse & rotate. const active = state !== 'idle'; return (
{/* halo rings when in halo state */} {state === 'halo' && [0, 1, 2].map(i => (
))} {/* soft glow */}
{/* The exact Synchronize logo mark (two rounded speech bubbles) */} {/* Solid bubble silhouette. The logo asset normally punches static dot holes through this path; keeping the silhouette solid ensures the animated typing dots are the only visible dots. */} {/* Three-dot iOS-style typing pulse. */} {[21.0072, 28.6396, 36.272].map((cx, i) => ( ))} {/* Bottom solid bubble silhouette, with dots supplied only below. */} {/* Three-dot iOS-style typing pulse, offset from the top row. */} {[8.564, 16.1964, 23.8288].map((cx, i) => ( ))} {/* direction arrows for in/out/through */} {active && ( {[0, 72, 144, 216, 288].map((deg, i) => ( ))} )}
); } // ---------- Device frames ---------- function PhoneFrame({ children, active, label, tilt = -4 }) { return (
{children}
{label && }
); } function LaptopFrame({ children, active, label, tilt = 0 }) { return (
{/* screen */}
{children}
{/* base */}
{label && }
); } function DesktopFrame({ children, active, label, tilt = 2 }) { return (
{children}
{/* stand */}
{label && }
); } function TabletFrame({ children, active, label, tilt = 6 }) { return (
{children}
{label && }
); } function DeviceLabel({ text, color, active }) { return (
{text}
); } // ---------- Screen contents per device ---------- // Big platform panel that replaces the device frames. Shows the platform name, // a chrome stripe, and the actual UI screen beneath. Much more legible than // shrunken device frames. function PlatformPanel({ id, platform, sub, brandColor, active, compact = false, children }) { return (
{/* header strip */}
{platform}
{sub}
{active && ( Active )}
{/* screen */}
{children}
); } function SlackScreen({ data }) { return (
{/* sidebar */}
LE
#incident-response
#member-asks
#introductions
{/* header */}
#incident-response 238 members
{data.mode === 'intro' && ( )} {(data.mode === 'composing' || data.mode === 'posted' || data.mode === 'thread') && ( )} {data.mode === 'thread' && data.replies && (
{data.replies.slice(0, 3).map((r, i) => ( ))}
)}
{data.tag && }
); } function CircleScreen({ data }) { return (
Leadership Exchange
238 members
{['Home','#incident-response','Events','Directory','Resources'].map((s, i) => (
{s}
))}
#incident-response
{data.mode === 'intro' && ( )} {(data.mode === 'posted' || data.mode === 'thread') && (
Alyssa G.
· now · via Slack
{data.text}
)} {data.mode === 'thread' && data.replies && (
{data.replies.map((r, i) => ( ))}
)} {data.tag && }
); } function GmailScreen({ data }) { return (
☰ Inbox
Search mail
{data.mode === 'intro' && ( )} {(data.mode === 'posted' || data.mode === 'thread') && (
☆
Alyssa G. via Leadership Exchange
{data.text}
now
)} {/* faux inbox filler */} {['Weekly digest: 14 new posts','Event: Leadership roundtable','Introductions to review (3)'].map((s, i) => (
☆ Leadership Exchange {s} {i+1}h
))} {data.mode === 'thread' && data.replying && (
David O. replying to Alyssa G.
{data.replying.text}
Send
↻ Auto-syncs to Slack + community
)} {data.tag && }
); } function TabletScreen({ data }) { return (
Mail noor@founder.io
{data.mode === 'intro' && ( )} {(data.mode === 'posted' || data.mode === 'thread' || data.mode === 'reacting') && ( <>
Alyssa G. · Leadership Exchange · now
{data.text || 'How do you structure communications during a vendor outage?'}
{data.mode === 'reacting' && (
You reacted: 🙏 ⭐
)} {data.mode === 'thread' && (
Nora: We always name the next update time, even when the ETA is unknown.
+ 2 reactions · syncs back everywhere
)} )} {data.tag && }
); } // ---------- Screen sub-components ---------- function PersonIntro({ who, sub, color }) { return (
{window.PortraitAvatar ? :
{(who||'?')[0]}
}
{who}
{sub}
); } function SlackPost({ text, composing }) { if (composing) { return (
{text}
⏎ Enter to send
); } return (
Alyssa G. 9:12 AM
{text}
); } function SlackReply({ r, delay }) { return (
{r.who} {r.via === 'email' ? 'VIA EMAIL' : 'VIA COMMUNITY'}
{r.text}
{r.reacts &&
{r.reacts.map((x, i) => ( {x} 1 ))}
}
); } function CircleReply({ who, color, text, tag }) { return (
{who} {tag && {tag}}
{text}
); } function LiveTag() { return (
LIVE
); } // ---------- Connectors (SVG paths from sync core to each platform panel) ---------- // Measures real positions of [data-platform] elements inside the stage and // draws curved paths from the core to each platform, with flowing dots when // active. function Connectors({ scene, sceneIdx }) { const [paths, setPaths] = useStC([]); const [size, setSize] = useStC({ w: 0, h: 0 }); useEffC(() => { const recalc = () => { const stage = document.querySelector('.hiw-stage'); if (!stage) return; const r0 = stage.getBoundingClientRect(); const core = stage.querySelector('[data-platform="core"]'); if (!core) return; const cr = core.getBoundingClientRect(); const cx = cr.left + cr.width / 2 - r0.left; const cy = cr.top + cr.height / 2 - r0.top; const coreRadius = Math.min(cr.width, cr.height) / 2 * 0.6; const targets = ['slack', 'circle', 'gmail']; const next = []; targets.forEach(id => { const el = stage.querySelector(`[data-platform="${id}"]`); if (!el) return; const er = el.getBoundingClientRect(); const tx = er.left + er.width / 2 - r0.left; const ty = er.top - r0.top + 16; // just below the panel's top edge // start anchor: a point on the core edge in direction of target const dx = tx - cx, dy = ty - cy; const dist = Math.hypot(dx, dy) || 1; const sx = cx + (dx / dist) * coreRadius; const sy = cy + (dy / dist) * coreRadius; // control point: midpoint pulled outward for a gentle curve const mx = (sx + tx) / 2; const my = (sy + ty) / 2; // perpendicular offset for curve const nx = -dy / dist, ny = dx / dist; const bow = id === 'circle' ? 0 : (id === 'slack' ? -40 : 40); const qx = mx + nx * bow; const qy = my + ny * bow; const d = `M ${sx} ${sy} Q ${qx} ${qy} ${tx} ${ty}`; next.push({ id, d, color: id === 'slack' ? '#611F69' : id === 'circle' ? '#2F7CFF' : '#315EFB' }); }); setPaths(next); setSize({ w: r0.width, h: r0.height }); }; recalc(); window.addEventListener('resize', recalc); const t = setInterval(recalc, 500); // catch late layouts setTimeout(() => clearInterval(t), 3000); return () => { window.removeEventListener('resize', recalc); clearInterval(t); }; }, [sceneIdx]); // direction of flow per scene const flowDir = scene.core.direction; // 'in' | 'out' | 'through' | undefined const activeMap = { slack: ['composing','posted','thread'].includes(scene.slack?.mode), circle: ['posted','thread'].includes(scene.circle?.mode), gmail: ['posted','thread'].includes(scene.gmail?.mode), }; return ( {paths.map(p => ( ))} {paths.map(p => { const active = activeMap[p.id]; return ( {active && [0, 1, 2].map(i => ( ))} ); })} ); } // ---------- Main cinematic ---------- function HIWCinematic() { const [sceneIdx, setSceneIdx] = useStC(0); const wrapRef = useRefC(null); // Scroll-driven: the wrapper is sceneCount * 100vh tall. The sticky stage // fills the viewport; we compute current scene from how far we've scrolled // through the wrapper. useEffC(() => { const onScroll = () => { if (!wrapRef.current) return; const rect = wrapRef.current.getBoundingClientRect(); const total = rect.height - window.innerHeight; if (total <= 0) return; const scrolled = Math.min(Math.max(-rect.top, 0), total); const p = scrolled / total; // 0..1 through the whole sequence const idx = Math.min(SCENES.length - 1, Math.max(0, Math.floor(p * SCENES.length))); setSceneIdx(idx); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const [isMobile, setIsMobile] = useStC(typeof window !== 'undefined' && window.innerWidth <= 760); useEffC(() => { const on = () => setIsMobile(window.innerWidth <= 760); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, []); const scene = SCENES[sceneIdx] || SCENES[0]; // Which single panel to feature on mobile per scene const MOBILE_PANEL = ['slack', 'slack', 'slack', 'gmail', 'circle', 'slack']; const primaryId = MOBILE_PANEL[sceneIdx] || 'slack'; const panelProps = { slack: { id: 'slack', platform: 'Slack', sub: 'Where busy members already chat', brandColor: '#611F69', screen: }, circle: { id: 'circle', platform: 'Community platform', sub: 'Your web-based home for members', brandColor: '#2F7CFF', screen: }, gmail: { id: 'gmail', platform: 'Email', sub: 'For the email-first crowd', brandColor: '#315EFB', screen: }, }; return (
{/* Sticky stage */}
{!isMobile && } {/* Platform layout with three big panels side by side and the sync core above. */} {!isMobile ? (
{/* Central sync core in the upper portion. */}
{/* Three platform panels in a row beneath the core. */}
= 4} > = 4} > = 4} >
) : ( /* Mobile layout with core, platform chips, and one featured panel. */
{/* platform chips */}
{['slack','circle','gmail'].map(pid => { const pp = panelProps[pid]; const on = pid === primaryId; return ( {pid === 'gmail' ? 'Email' : pid === 'circle' ? 'Community' : 'Slack'} ); })}
{/* featured panel */}
{panelProps[primaryId].screen}
{scene.caption.eyebrow}
{scene.caption.title}
{scene.caption.body}
)} {/* Caption overlay at the bottom center. */} {!isMobile &&
{scene.caption.eyebrow}
{scene.caption.title}
{scene.caption.body}
} {/* Scene dots (progress) */}
{SCENES.map((_, i) => (
))}
{/* Scroll cue on first scene */} {sceneIdx === 0 && !isMobile && (
Scroll to watch ↓
)}
{/* Scene trigger stack is no longer needed; wrapper height does the work */}
); } Object.assign(window, { HIWCinematic });