);
}
// ─── Real team photo — the image being revealed ────────────────────────────
const TEAM_PHOTO_URL = 'assets/team-photo.jpeg';
function TeamPhoto({ width, height }) {
return (
);
}
// ─── Jigsaw piece path geometry ────────────────────────────────────────────
// One edge of a piece, traced from (x1,y1) to (x2,y2). `tab` is +1 (knob bulges
// outward, away from piece center), -1 (socket carved into piece), or 0
// (straight edge — for outer border of the whole jigsaw).
// outX/outY is the unit perpendicular pointing OUT of the piece.
function edgePath(x1, y1, x2, y2, tab, outX, outY) {
if (tab === 0) return `L ${x2} ${y2} `;
const dx = x2 - x1, dy = y2 - y1; // unit (cells are 1×1)
// Parameterized point: t along edge, p perpendicular (positive = out).
const pt = (t, p) => ({
x: x1 + t * dx + p * tab * outX,
y: y1 + t * dy + p * tab * outY,
});
const f = (pp) => `${pp.x.toFixed(4)} ${pp.y.toFixed(4)}`;
// Classic jigsaw knob: necks in at 0.35/0.65, bulb peaks at 0.5 perp 0.28
return `L ${f(pt(0.35, 0))} `
+ `C ${f(pt(0.42, 0))} ${f(pt(0.30, 0.18))} ${f(pt(0.38, 0.22))} `
+ `C ${f(pt(0.42, 0.32))} ${f(pt(0.58, 0.32))} ${f(pt(0.62, 0.22))} `
+ `C ${f(pt(0.70, 0.18))} ${f(pt(0.58, 0))} ${f(pt(0.65, 0))} `
+ `L ${f(pt(1, 0))} `;
}
// Build a piece outline (closed path) for piece at column c, row r.
// hEdges[r][c]: horizontal edge between row r and row r+1, in {-1, +1}.
// +1 = knob points down (into row r+1), -1 = up.
// vEdges[r][c]: vertical edge between col c and col c+1, in {-1, +1}.
// +1 = knob points right (into col c+1), -1 = left.
function jigsawPiecePath(c, r, cols, rows, hEdges, vEdges) {
// For each side of THIS piece, figure out if the shared edge has a tab
// pointing OUT of this piece (+1), INTO it (-1), or doesn't exist (0).
const top = r === 0 ? 0 : (hEdges[r-1][c] === +1 ? -1 : +1);
const bottom = r === rows - 1 ? 0 : (hEdges[r][c] === +1 ? +1 : -1);
const left = c === 0 ? 0 : (vEdges[r][c-1] === +1 ? -1 : +1);
const right = c === cols - 1 ? 0 : (vEdges[r][c] === +1 ? +1 : -1);
let p = `M ${c} ${r} `;
p += edgePath(c, r, c+1, r, top, 0, -1); // top: out = up
p += edgePath(c+1, r, c+1, r+1, right, 1, 0); // right: out = right
p += edgePath(c+1, r+1, c, r+1, bottom, 0, 1); // bottom: out = down
p += edgePath(c, r+1, c, r, left, -1, 0); // left: out = left
return p + 'Z';
}
// ─── Pixel grid overlay (jigsaw pieces) ────────────────────────────────────
// Covers the photo with N×M cream-toned jigsaw pieces. As `revealCount` rises,
// pieces fade out (in a stable shuffled order), revealing the photo underneath.
function PixelGrid({ cols, rows, revealCount, seed = 7 }) {
const { rankByIndex, hEdges, vEdges } = React.useMemo(() => {
let s = seed;
const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
// 1) Random reveal order
const tiles = [];
for (let i = 0; i < cols * rows; i++) tiles.push(i);
for (let i = tiles.length - 1; i > 0; i--) {
const j = Math.floor(rand() * (i + 1));
[tiles[i], tiles[j]] = [tiles[j], tiles[i]];
}
const rankByIndex = new Map();
tiles.forEach((idx, rank) => rankByIndex.set(idx, rank));
// 2) Horizontal edges between row r and r+1 (rows-1 strips × cols cells)
const hEdges = [];
for (let r = 0; r < rows - 1; r++) {
const row = [];
for (let c = 0; c < cols; c++) row.push(rand() < 0.5 ? +1 : -1);
hEdges.push(row);
}
// 3) Vertical edges between col c and c+1 (rows cells × cols-1 strips)
const vEdges = [];
for (let r = 0; r < rows; r++) {
const row = [];
for (let c = 0; c < cols - 1; c++) row.push(rand() < 0.5 ? +1 : -1);
vEdges.push(row);
}
return { rankByIndex, hEdges, vEdges };
}, [cols, rows, seed]);
return (
);
}
// ─── Browser chrome ────────────────────────────────────────────────────────
function BrowserChrome({ width, height, url, children, x = 0, y = 0, scale = 1, opacity = 1 }) {
return (
Your team's next big trip, revealed one donation at a time.
Start your campaign →
picturepledge.com
);
}
// ─── Donations script ──────────────────────────────────────────────────────
// times are LOCAL to the campaign scene (Scene 3). Scene 3 runs from 10s→27s in master timeline.
// We want donations to flow from ~1s to ~10s of local time, then goal at 10-11s.
const DONATIONS = [
{ time: 0.6, name: 'Sarah Chen', amount: 50, lane: 0 },
{ time: 1.3, name: 'Garcia Family', amount: 100, lane: 1 },
{ time: 2.0, name: 'Coach Martinez', amount: 200, lane: 2 },
{ time: 2.7, name: 'Anonymous', amount: 25, lane: 0 },
{ time: 3.3, name: 'James Kowalski', amount: 75, lane: 1 },
{ time: 3.9, name: 'Albion Alumni', amount: 250, lane: 2 },
{ time: 4.5, name: 'Davis Auto', amount: 500, lane: 0 },
{ time: 5.2, name: 'Patel Family', amount: 100, lane: 1 },
{ time: 5.8, name: 'Grandma Joyce', amount: 40, lane: 2 },
{ time: 6.4, name: 'Tom Reyes', amount: 60, lane: 0 },
{ time: 7.0, name: 'The Lin Family', amount: 150, lane: 1 },
{ time: 7.6, name: 'Nora Park', amount: 75, lane: 2 },
{ time: 8.2, name: 'Hawkins Pizza Co.', amount: 400, lane: 0 },
{ time: 8.8, name: 'Maya Okafor', amount: 200, lane: 1 },
{ time: 9.4, name: 'The Booster Club', amount: 700, lane: 2 },
{ time: 10.0, name: 'Coach Williams', amount: 1500, lane: 0 }, // tips it over the top
{ time: 10.5, name: 'Anonymous', amount: 75, lane: 1 },
];
// ─── Master App ────────────────────────────────────────────────────────────
function App() {
// Update video root data-screen-label with current second so comments are timestamp-aware
const labelRef = React.useRef(null);
return (
{/* Update timestamp label */}
{/* Scene 1: Landing-page hero 0→4s */}
{/* Scene 2: Setup 4→10s */}
{/* Scene 3+4+5: Campaign launches + reveal + goal hit 10→27s */}
{/* Scene 6: CTA 27→30s */}
{/* Global keyframes */}
);
}
// Pin a data-screen-label="01s" etc. to the video root each second, so commenters
// get a clean timestamp reference.
function TimestampLabel({ rootRef }) {
const t = useTime();
React.useEffect(() => {
if (rootRef.current) {
const sec = String(Math.floor(t)).padStart(2, '0');
rootRef.current.setAttribute('data-screen-label', `${sec}s`);
}
}, [Math.floor(t)]);
return null;
}
window.App = App;