The Frame
StableThe logo becomes a viewfinder: frame the few skills that work and cut the rest, with an estimator and a floating header.
Home concept 04, dark-first, for CTOs and founders who scan a page in seconds. A field of seventy skill names fills the hero (a lens of light follows the pointer and brings words forward), the logo’s corners frame the five that do the work, a before and after, an estimator with two sliders, the product in a browser window, privacy, an FAQ and a closing call.
Updated View source
The Frame home page
import { HomeFrame } from '@rchursin/home'
/** * Home concept 04: the logo becomes a viewfinder. A field of skill names behind the hero (a * pointer lens brings words forward), a framed shortlist, an estimator and an FAQ. Complete * page: skip link, floating header, <main> with one <h1>, footer. */export default function FramePage() { return <HomeFrame />}Usage
import { HomeFrame } from '@rchursin/home'<HomeFrame />Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | The first stop is “Skip to content”, then the header’s logo, links and button, then the page in reading order. |
| Enter | On “Skip to content”: jump past the header to the page’s <main>. |
| EnterSpace | On an FAQ question: open or close its answer. Opening one closes the one that was open. |
| EnterSpace | Below 768 pixels, on the menu button: open or close the header’s links. |
| Left arrowRight arrowUp arrowDown arrow | On an estimator slider: change the number of skills installed or used. Home and End go to the ends. |
- One <h1>, a skip link to <main id="main">, a <header> with a navigation named “Main”, and a <footer>. Every section is labelled by its own heading.
- Arrivals (lux-reveal) start hidden only when motion is allowed and the script has run; with reduced motion or before hydration, everything is simply there.
- Numbers from a workspace are marked “Sample data” on the page. Bracketed text such as [YOUR PRICE] or [CONFIRM BEFORE LAUNCH] is a placeholder to replace before launch.
- The field of skill names is decoration and hidden from screen readers; the lens only follows a mouse, and only when motion is allowed.
- The before and after lists are named “Skills before” and “Skills after”; the estimator’s sliders are native range inputs with labels and live totals.
Guidelines
Do
- Use it when the page has to be remembered: it is the strongest launch-post image of the four.
- Keep the framed shortlist short; five names make the point.
- Check the estimator’s defaults against your own numbers before launch.
Don’t
- Don’t publish it with the sample numbers or bracketed placeholders still in.
- Don’t add a second <h1>; every section below the hero uses <h2>.
- Don’t force a theme on it: it is drawn for both and follows the page’s dark class.
In use
Related
- Frame cornersThe logo’s two shapes as a viewfinder: an L bottom-left and a square top-right, drawn around any box.
- Cut calculatorTwo sliders estimate the tokens idle skills add to every turn, beside a grid with one square per skill.
- Dashboard mockA still picture of the product: four headline numbers, a bar list of skill runs and a ledger with verdicts, on sample data.
- Site headerThe home pages’ sticky header in three styles: a full bar, a floating glass pill and a minimal mono row.
- Pointer lightA soft pool of light that follows the mouse over cards, and a lens that shows a brighter copy of a background.
- FAQQuestions and answers on native <details>: one answer open at a time, with no JavaScript required.
Source
The component’s own files, exactly as they run on this site.
/** * Home 04 · The Frame — the logo becomes a viewfinder: frame the few that work, cut the rest. * For CTOs and founders who scan a page in seconds; the most memorable for launch posts. * Default theme: dark. * * Mix: Aceternity (floating navbar, grid background with radial fade, hover-lit cards) · * Magic UI (Border Beam, Safari-style window) · Tailwind Plus (FAQ, footer, stats grid) · * shadcn/ui-style range inputs in the interactive estimator. */import type { CSSProperties } from "react"import { cx } from "../../components/cx"import { useLuxe, usePointerVars } from "../../components/motion"import { SiteFooter, SiteHeader, SkipLink } from "../Chrome"import { founderStory, skillField } from "../content"import { CutCalculator } from "../CutCalculator"import { DashboardMock } from "../DashboardMock"import { Faq } from "../Faq"import { ButtonLink, Container,