/* Backentra — Preview page. window.BackentraPreview An infinite flowing screenshot rail: two staggered rows drifting in opposite directions, deliberately mixed sizes, hover to pause and lift, click to open the full frame. Why this shape rather than a carousel: a carousel shows one thing and asks permission for the next. A drifting rail shows the SHAPE of the product — that there is a lot of it, that the screens are dense and varied — before anybody reads a single caption. Two rows moving against each other reads as editorial rather than as a widget, and mixed widths stop it scanning as a grid on rails. The honest constraint is unchanged: there are no product captures in the project yet, only logos. Every tile is a labelled SLOT — striped, with its filename in monospace — because a hand-drawn approximation of a UI is the one thing this page must not contain. When real PNGs land, each tile stops being a slot and nothing else changes. Motion rules: · CSS animation on a duplicated track, so the loop is seamless and costs no JS per frame. · The whole row pauses on hover, not just the tile under the cursor — a tile that stops while its neighbours keep sliding looks broken, and you cannot read a caption that is still moving. · The hovered tile lifts and scales slightly; everything else in that row dims a little, so the eye is led rather than shouted at. · Focusing any tile by keyboard pauses its row too, otherwise tabbing through is a moving-target exercise. · prefers-reduced-motion stops the drift entirely and lays the rows out statically. */ const PV = window.BackentraDesignSystem_93cf3a; const { Button: PvBtn, Icon: PvIcon } = PV; const pvcontainer = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" }; const pveyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--accent-text)", }; /* "Built" means the screen works in the app today, not that it is finished — the same distinction the product uses internally. */ const PV_STATE = { built: ["Built", "var(--success-soft)", "var(--success)"], progress: ["In progress", "var(--orange-50)", "var(--accent-text)"], planned: ["Planned", "var(--gray-100)", "var(--text-muted)"], }; /* `w` is the tile width in px. Mixed on purpose: equal widths make a rail read as a grid that happens to be moving, and the variation is what makes it feel edited. */ const PV_SCREENS = [ { key: "myday", name: "My Day", state: "built", icon: "sun", w: 620, src: "./assets/preview/my-day.png", what: "What one person has on today — their jobs, appointments, and the tasks the system filed for them.", detail: "The first screen most people open. Everything on it is theirs, not the company's." }, { key: "calendar", name: "Calendar", state: "built", icon: "calendar", src: "./assets/preview/calendar.png", w: 680, what: "The whole operation on one grid: crews down the side, the day across the top.", detail: "Seven views, conflict detection, and crew load. Drag a job and the crew's day recalculates." }, { key: "job", name: "Workflow", state: "built", icon: "git-branch", src: "./assets/preview/workflow.png", w: 640, what: "Every job by the stage it is in — leads through to closed, one list per stage.", detail: "Reads the same records every other screen writes; nothing here is a separate pipeline." }, { key: "performance", name: "Performance", state: "built", icon: "award", src: "./assets/preview/performance.png", w: 600, what: "How the team is doing, scored on what the system can actually measure.", detail: "No invented point system — a leaderboard built from real win rate, revenue and attendance." }, { key: "invoice", name: "Home — Owner widgets", state: "built", icon: "layout-dashboard", src: "./assets/preview/invoices-payments.png", w: 640, what: "The owner's Home screen, with its default widget set — revenue, jobs, A/R, funnel, activity.", detail: "Rebuilt from the Widget Marketplace — every card here is one the owner preset actually ships with." }, { key: "financials", name: "Accounts Receivable", state: "progress", icon: "bar-chart-3", src: "./assets/preview/receivables.png", w: 640, what: "Every invoice outstanding, aging, disputes and follow-ups in one place.", detail: "Reads the same records the crews create, so the numbers cannot drift." }, { key: "field", name: "Field app", state: "built", icon: "hard-hat", src: "./assets/preview/field-home.png", w: 300, what: "The crew's phone view: today's stops, directions, photos and sign-off.", detail: "Deliberately small. A crew should not be operating a back office on a phone.", tall: true }, { key: "sales", name: "Sales", state: "built", icon: "trending-up", src: "./assets/preview/sales.png", w: 620, what: "Pipeline and proposal follow-through — funnel, needs-attention, win rate.", detail: "Reads the same leads, estimates and proposals the rest of the app writes." }, ]; /* Split so each row carries a different rhythm of widths rather than alternating evenly. */ const PV_TOP = [PV_SCREENS[1], PV_SCREENS[0], PV_SCREENS[3], PV_SCREENS[2]]; const PV_BOTTOM = [PV_SCREENS[5], PV_SCREENS[4], PV_SCREENS[7], PV_SCREENS[6]]; const pvFile = (s) => s.name.toLowerCase().replace(/\s+/g, "-") + ".png"; /* One tile. A slot, not a mockup — the stripes and the monospace filename make that unmistakable, which is better than a plausible-looking fake. */ function PvTile({ s, dim, onOpen, onHold, onRelease, phone }) { const [hot, setHot] = React.useState(false); const [label, bg, fg] = PV_STATE[s.state] || PV_STATE.planned; const enter = () => { setHot(true); onHold(); }; const leave = () => { setHot(false); onRelease(); }; return ( ); } /* A row. The track is rendered twice and translated by exactly -50%, so the loop is seamless — the second copy is under the cursor at the instant the first finishes. */ function PvRow({ screens, dir, secs, paused, onHold, onRelease, onOpen, still }) { const track = screens.concat(screens); return (
{(still ? screens : track).map((s, i) => ( ))}
); } /* Clicking a tile opens the full frame plus its caption. Centred, since this is the one place the page asks for undivided attention. */ function PvLightbox({ s, onClose, onStep }) { React.useEffect(() => { const k = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowRight") onStep(1); if (e.key === "ArrowLeft") onStep(-1); }; document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, [onClose, onStep]); if (!s) return null; const [label, bg, fg] = PV_STATE[s.state] || PV_STATE.planned; return (
e.stopPropagation()} style={{ width: "min(1080px, 100%)", maxHeight: "92vh", overflowY: "auto", background: "var(--surface-card)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-xl)", padding: 22, }}>

{s.name}

{label}

{s.what}

{[["chevron-left", -1, "Previous screen"], ["chevron-right", 1, "Next screen"]].map(([ic, d, lab]) => ( ))}
{s.src ? ( s.tall ? ( /* A phone frame, not a full-width stretch — the raw capture is native device width (393dp); blowing it up to the modal's width was what forced scrolling. Fixed to a real phone footprint and centered instead. */
{s.name}
) : ( /* Contain, not cover: the lightbox is where somebody wants the WHOLE screen, so nothing may be cropped away here. */ {s.name} ) ) : (
{pvFile(s)} full-size capture goes here
)}

{s.detail}

); } /* The phone rail. One row, swiped by hand, instead of the desktop's two drifting ones. Three reasons the desktop treatment cannot simply be scaled down: · Auto-drift and a finger fight each other. Touch has no hover, so the pause-on-hover that makes the desktop rail readable does not exist — the tile you reach for is already leaving. · Two rows at phone width means two things moving in a space that fits one, and each tile is then too small to read as anything but a smudge. · A continuously animating full-width layer is the most expensive thing on the page for a phone GPU, and it never stops. So: the same tiles, the same order, laid out as a native scroll-snap strip. 82vw wide leaves the next tile peeking, which is what tells a thumb there is more to the right. */ function PvPhoneRail({ screens, onOpen }) { return (
{screens.map((s) => ( /* A phone capture is 393x852 — at the same width as a desktop one it stands three times taller and the rail has to reserve that height for every tile, which is what made it look broken. Narrower, so the two shapes land in the same height band and the strip reads as one row of mixed sizes, which is the desktop intent anyway. */
{}} onRelease={() => {}} phone />
))}
); } function PreviewPage({ onNav, onJoin }) { React.useEffect(() => { window.BackentraSetMeta && window.BackentraSetMeta({ path: "/preview", title: "Preview — Backentra", description: "Real screens from the running application: scheduling, invoicing, the field crew app, and the office dashboard.", }); }, []); const counts = PV_SCREENS.reduce((a, s) => { a[s.state] = (a[s.state] || 0) + 1; return a; }, {}); const [holdTop, setHoldTop] = React.useState(0); const [holdBottom, setHoldBottom] = React.useState(0); const [open, setOpen] = React.useState(null); const [still, setStill] = React.useState(false); React.useEffect(() => { setStill(!!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches)); }, []); /* Touch gets a different rail entirely — see PvPhoneRail. The test is `hover: none` first and width second, because width is the wrong question. What the drifting rail actually depends on is hover-to-pause: without it the tile you reach for is already leaving. An iPad has 768 or 1024 comfortable pixels and no hover at all, so a width-only rule hands it the one layout it cannot operate. Any pointer that can hover — laptop, desktop, a mouse plugged into anything — keeps the drift. Kept live rather than read once, so a tablet rotating across the boundary re-lands. */ const [phone, setPhone] = React.useState(false); React.useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia("(hover: none), (max-width: 720px)"); const sync = () => setPhone(mq.matches); sync(); /* addListener is the pre-Safari-14 spelling; still needed for older iOS. */ if (mq.addEventListener) { mq.addEventListener("change", sync); return () => mq.removeEventListener("change", sync); } mq.addListener(sync); return () => mq.removeListener(sync); }, []); /* A counter rather than a boolean: moving between two adjacent tiles fires leave-then-enter, and a boolean would flicker the row back into motion for a frame. */ const hold = (set) => () => set((n) => n + 1); const release = (set) => () => set((n) => Math.max(0, n - 1)); /* The lightbox pauses both rows — nothing should be drifting behind a modal. */ const step = (d) => setOpen((cur) => { const i = PV_SCREENS.indexOf(cur); return PV_SCREENS[(i + d + PV_SCREENS.length) % PV_SCREENS.length]; }); return (
Preview · {counts.built || 0} built, {counts.progress || 0} in progress, {counts.planned || 0} planned

See it before you decide.

The screens your team would actually use, with the build state of each stated plainly. Hover to hold one still, click to open it. Every capture is the real application running on a real company's data — where a capture is missing you get an empty frame rather than an artist's impression.

{/* The rail. Full-bleed, because a drifting row that stops at a container edge reads as a broken carousel rather than as something continuous. */}
{phone ? ( /* One rail, both rows' screens in their original order, swiped rather than driven. */ ) : ( 0 || !!open} onHold={hold(setHoldTop)} onRelease={release(setHoldTop)} onOpen={setOpen} />
0 || !!open} onHold={hold(setHoldBottom)} onRelease={release(setHoldBottom)} onOpen={setOpen} /> )}

A screen marked Built works in the application today. That is not the same as finished — copy, layout and behaviour are all still moving, and we would rather show you a working screen mid-change than a polished one that does nothing.

Want to use it rather than look at it?

Founding members get in first, keep 25% off for life, and have a say in what gets built next.

}>Join the list
setOpen(null)} onStep={step} />
); } window.BackentraPreview = PreviewPage;