);
}
// ---- Feed / Today ---------------------------------------------------------
// Once posted, the app hides the challenge card behind a bolt "peek" toggle in
// the header; the marketing still keeps the card visible ("All done for today").
function FeedScreen({ posted, onRecord, onOpenChallenge }) {
return (
: null}
/>
{posted ? (
Friends' takes
{FRIENDS_TAKES.map((t, i) => (
))}
) : (
Post your take to unlock
See what your friends posted today
)}
);
}
// ---- Record ---------------------------------------------------------------
function RecordScreen({ onClose, onPosted }) {
const [recording, setRecording] = React.useState(false);
const [progress, setProgress] = React.useState(0);
const [done, setDone] = React.useState(false);
const raf = React.useRef(null);
const tick = React.useRef(null);
const start = () => {
if (recording) {
setRecording(false);
cancelAnimationFrame(raf.current);
return;
}
setRecording(true);
const t0 = performance.now() - progress * 5000;
const loop = (now) => {
const p = Math.min((now - t0) / 5000, 1);
setProgress(p);
if (p >= 1) {
setRecording(false);
setDone(true);
return;
}
raf.current = requestAnimationFrame(loop);
};
raf.current = requestAnimationFrame(loop);
};
React.useEffect(() => () => cancelAnimationFrame(raf.current), []);
const remaining = Math.ceil((1 - progress) * 5);
// Matches the app's record screen: the camera preview is letterboxed to the
// feed's 4:5 crop with solid black bars, the prompt sits at the very top over
// the black bar, and the status pill / option pills row lives under the
// segment bar. The rule-of-thirds grid draws only inside the 4:5 band.
return (
{/* camera viewport (placeholder), black-barred to the 4:5 feed crop */}
);
}
// ---- Profile --------------------------------------------------------------
// Mirrors the app's ProfileScreen: "Your roll" header (bell + settings), the
// identity block with a streak pill, three lifetime stat pills, the roll meta
// line, and the archive as a **roll of film** — one column of 4:5 frames
// between sprocket gutters, newest first, ending after 14 because that is the
// retention window (RETENTION_DAYS in the app).
//
// Frame media still comes from MediaTile / mediaSlot, so the photos picked in
// the Tweaks panel fill the frames exactly as they did in the old grid. Slots
// are reused modulo the six named archive slots so per-slot assignments stick.
// Palette that only exists inside the roll (AppRoll in lib/app/theme.dart).
// A stop below the app surfaces, so the strip reads as an object lying on the
// screen rather than a list of cards.
const ROLL = {
well: "#0f0f0f",
film: "#161616",
hole: "#0A0A0A",
frame: "#1c1c1c",
unexposed: "#0c0c0c",
line: "rgba(255,255,255,.05)",
dash: "rgba(255,255,255,.10)",
edge: "#6a6a6a",
dead: "#3a3a3a",
ring: "rgba(242,183,5,.55)",
gutter: 48,
};
// The film edges: a base strip with a hole punched every 33px. The app paints
// these with a CustomPainter phased by the scroll offset so the rhythm never
// restarts; a repeating gradient gets the same continuous result here.
const sprockets = {
width: ROLL.gutter,
flexShrink: 0,
background:
"repeating-linear-gradient(180deg, " + ROLL.hole + " 0 15px, transparent 15px 33px) 16px 0 / 16px 100% no-repeat, " +
ROLL.film,
};
function StatPill({ value, label }) {
return (
{value}
{label}
);
}
// One slot: gutters, the frame, then the date + prompt printed in the
// interframe band beneath it. The prompt shows on empty days too — seeing the
// question you didn't answer is the point of the gap.
function RollSlot({ frame }) {
const today = frame.today;
const missed = frame.state === "missed";
return (
{frame.date}
{missed ? "no take \u2014 the day is gone" : frame.prompt}
);
}
function ProfileScreen() {
// Fourteen slots: today posted (ringed), a run behind it, one day missed, one
// posted late. Only exposed frames consume a photo slot.
const prompts = [
"Show something in the wrong colour",
"Your best news-anchor stare",
"Find something older than your phone",
"React to the worst sound you know",
"Your face when the plan gets cancelled",
"A hand gesture only you understand",
"The nearest plant, real or fake",
"Rate your mood 1 to 5 with your face",
"Point at the most boring thing you see",
"Show a gift someone gave you",
"Your hardest concentrating face",
"Find a straight line and follow it",
"Show something in the wrong colour",
"Your last screenshot, no context",
];
let slot = 0;
const frames = prompts.map((prompt, i) => {
// Today is already posted, which is what the nav's check means too — an
// unshot top frame next to a "posted" nav contradicts itself, and a store
// slide should lead with the film, not an empty plate.
const state = i === 3 ? "missed" : "exposed";
return {
n: 14 - i,
date: "AUG " + String(17 - i).padStart(2, "0"),
prompt,
state,
today: i === 0,
late: i === 4,
slot: state === "exposed" ? slot++ % 6 : null,
};
});
const exposed = frames.filter((f) => f.state === "exposed").length;
return (
{/* Pinned in the app, where it collapses to avatar + name as the film
scrolls. Sticky here so the mockup hints at the same behaviour. */}
2
}
/>
Briek
{/* The streak is the live number, so it keeps the flame and the only
amber up here; the lifetime totals sit below as plain numerals. */}
@briek
ROLL 17 · {exposed} OF 14 FRAMES
AUG 04 ROLLS OFF IN 13H
{/* The roll itself. Ends after 14 frames and says so — there is nothing
older to page to, which is the whole point of the surface. */}
{frames.map((f) => )}
END OF ROLL · 14 DAYS, THEN GONE
);
}
// ---- Prompt board ---------------------------------------------------------
// The daily prompt as a split-flap departure board, shown as a sheet over the
// feed — this is the challenge popout, not a screen you navigate to.
//
// Geometry is lifted from AppBoard in lib/app/theme.dart: 14 columns, a 44px
// label gutter on every row, flaps butted at 2px. Blank slots are *rendered*,
// not omitted; that is what makes it read as a mechanism with a fixed number
// of positions rather than a row of word tiles.
const BOARD = {
panel: "#0d0d0d",
label: "#3f3f3f",
caption: "#5a5a5a",
// A flap is two faces meeting at a near-black hinge. Hard stops, never a
// soft blend — a smooth gradient here reads as a plastic tile.
filled: "linear-gradient(180deg,#242424 0 48%,#050505 48% 52%,#191919 52% 100%)",
blank: "linear-gradient(180deg,#161616 0 48%,#070707 48% 52%,#121212 52% 100%)",
inner: "inset 0 0 0 .5px rgba(255,255,255,.05)",
columns: 14,
gutter: 44,
gap: 2,
};
function Flap({ glyph, color }) {
const blank = !glyph || glyph === " ";
return (
{blank ? "" : glyph}
);
}
// One row: the label in its gutter, then exactly BOARD.columns flaps. The text
// is padded out so trailing positions are blank flaps rather than empty space.
function BoardRow({ label, glyphs, color }) {
const cells = (glyphs || "").padEnd(BOARD.columns).slice(0, BOARD.columns).split("");
return (
{/* "NO. 229" is a hair wider than the 44px gutter once tracking counts;
let it run into the gap rather than wrap onto a second line. */}
{gutter}{left}
{right && {right}}
);
}
function PromptBoardScreen() {
// Wrapped exactly as wrapPrompt does: greedy, on word boundaries, 14 columns
// over at most 4 rows. Rows the prompt doesn't fill stay as blank flaps.
const promptRows = ["SHOW SOMETHING", "IN THE WRONG", "COLOUR", ""];
return (
{/* The feed it opens over, dimmed — the board is a popout, not a page. */}
{}} onOpenChallenge={() => {}} />
{/* The sheet's own dismiss affordance, which is why the board carries
no close button of its own. */}
FirstTakes.BOARD UPDATED
{promptRows.map((r, i) => (
))}
{/* Amber lives in the countdown row and the wordmark's period. */}
Everyone’s clock started on the same flip. Five seconds, one continuous take, no retakes.
Five seconds, recorded in one go. No retakes, no edits.
FirstTakes.