FP33 | Afterword | FIT=B | Startups & tech | Dark & techy
TECHNIQUES: scroll hover focus rotate product card back filter reveal mask motion mobile checkout contact font hero gsap lenis
BORN_HOOD_ADVICE: Soft cursor lighting on tiles, sparingly.
DESIGN_SIGNATURE: 's colors] The design The idea: a quiet, premium dark product site where the app demonstrates itself, and the page reads like a meeting being written down. Fonts: Sora, large and tightly tracked for headlines; Geist Mono for small uppercase labels, timestamps and numbers. Colors: night #0B0D10, panel #14181D, soft white #E8ECEF, mint #6EF2C6 as the only accent and soft violet #9C8CFF used rarely. Faint ruled-notebook lines and grain sit behind the hero. Order: a hero whose headline arrives like a live transcript line, each word blurred and grey before it settles crisp, then a mint cursor, beside a short pitch, above an app window that lies back in perspective and sits up as you scroll; a grid of live app pieces; three how-it-works steps beside a pinned screen that changes per step; a big customer quote with four counting stats; integrations as one giant sentence of tool names; privacy promises as a numbered list beside a live redaction example; pricing in one hairline-divided panel with a monthly/yearly switch; questions; a huge closing line; the name spanning the footer. Each section opens with a mono timestamp like a meeting chapter, and the nav shows a recording clock that counts up as you scroll. Signature move: the grid tiles are working app screens: a transcript scrolls as words are heard, a summary types itself and action items tick off, a question gets answered with timestamp links. A soft light follows the mouse across the grid, catching tile edges, and every tile leans gently toward it; with no mouse, the light drifts across as you scroll.
HTML_SURFACE: headings=Look up from your notes.; Watch a meeting turn into notes.; Three things happen. You do one of them.; Integrations; Your meetings are nobody’s training data.; Start free. Pay when you can’t go back.; Asked before the first call.; Close the laptop. The notes are done. | ids=n, i-mark, i-dl, i-ar, i-ck, i-sr, i-fd, i-mn, i-x, i-dn, i-no, menu, main, top, h1, product, prod-h, how, how-h, integrations, ig-h, security, sec-h, pricing, pr-h, faq, faq-h, start, cta-h, em | functions=tick, loop, openMenu, closeMenu, walk, watch, measure, rng, fit, drawOv, Wave, size, draw, boxesM, trNew, smReset, akSet, setStep
ORIGINAL_PROMPT: prompt/afterword.md (SHA256 58e253a2dd81e7f6f11f5fd2ccc94a57f87cc6b5af267ae377762078cfcafc3e)
EXAMPLE_SOURCE: example/afterword.html (SHA256 e6a1d64bf02045fc5795c77fa27e4e000dd05e9ba86872a0abf903944a1504b0)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\afterword\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
