# Free genealogy website template
> Free HTML genealogy website template for family history researchers, with a sample family tree and fixed fees. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Genealogy website template: one free HTML file for a family history research service that hands clients a bound folder. It has a worked family tree, three fixed-price packages, four researchers and an enquiry form, set as pale paper sheets with coloured index tabs on a black desk. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.
- Page: https://8b.com/templates/kinfold/
- Live demo: https://8b.com/templates/kinfold/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/kinfold/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/genealogy-website-template
- Download ZIP: https://8b.com/templates/kinfold/genealogy-website-template.zip
- Template name in the repository: Kinfold
- At a glance: One 105 KB index.html with its CSS and JavaScript inside, 13 sections, 12 Unsplash photos credited in CREDITS.md, Playwrite US Trad and Reddit Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll loaded from jsDelivr.
## Use it with an AI coding agent
Download the files into the project (Windows PowerShell: `curl.exe`):
```bash
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make this the site for . Replace the demo text, names, prices and photos first. Keep every id, data-8b-section, data-8b-motion and data-8b-part, the classes AGENTS.md lists, fifteen chart entries and four researchers. Never invent fees, memberships or client letters; ask me.
```
Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/genealogy-website-template my-site`.
### Genealogy website design prompt for any AI tool
Paste this genealogy website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a research service's site from scratch, or hand it to a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.
```text
Build a one-page website for a family history research service that hands clients a bound folder. Static HTML, CSS and a little GSAP; no framework.
Sections in order: index tabs as navigation, opening, archives, method in slips, the folder in four panels, a worked family tree of fifteen entries, four researchers, letters, the reading room, questions, three fixed-price packages, enquiry form, footer.
Type: Reddit Sans for all running text, with heavy uppercase headings; Playwrite US Trad only for handwriting such as photo captions, signatures and the huge pressed words.
Colours: #0d0d0d black desk, #e6ebed pale paper, #d4dce5 blue sheets, #cbcfc6 sage sheets, #c5b9c4 mauve sheets, #1b1b1b ink for text and rules.
Motion: one idea, the family tree pins for about one and a half screens, starts zoomed on the client and pulls back while each generation's lines draw. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons. Use pale paper sheets with a dotted grain and coloured index tabs on a black desk, and photos with perforated stamp edges.
Copy: short and concrete. Ask me for the town, method and timeline, folder contents, one anonymised case, researchers, package prices, reading room hours and enquiry address; never invent fees, memberships or client letters. Mark every placeholder.
One action: send an enquiry, the form reached from the tabs, the packages and the opening.
Phone: check at 390 px, 44 px tap targets.
Done when: no console errors, visible keyboard focus, and you list every placeholder.
```
## About
A family history researcher, a record agent or a local history society can use it as a family history website template: cover, archives, method, folder contents, a sample case, fees and an enquiry form follow in turn. Among genealogy website templates it is a service site. Someone after a family tree website template may want a tree builder; its one tree is a fixed example of fifteen entries.
Vibe coding this genealogy website template for Claude Code or Cursor goes fastest when you hand over the facts only the firm has: town, method and timeline, folder contents, one real or anonymised case, researchers, fees, reading room hours and enquiry address. The agent replaces the demo text first, then the photos, which include stock portraits of real people. The pedigree chart is read by position: entry one is the client, then two parents per entry.
It is the right base for a small research service that sells fixed packages and welcomes people to a reading room. A practice that bills by the hour and wants a firmer tone suits the [law firm](https://8b.com/templates/fellgate/) template better. The weak spot is navigation: six index tabs are the only fixed navigation, with no wordmark or menu, and their vertical labels are small on wide screens. 8B's builder is the no-code route.
## Design
- Palette: #0d0d0d (the black desk behind the sheets, with a faint grain, and the stamp mask colour), #e6ebed (pale paper sheets, pale index tabs, text on the dark desk and button labels), #d4dce5 (blue paper sheets and tabs, and the fill of the button hover panel), #cbcfc6 (sage paper sheets and tabs, the ink bars under the archive items and the link hover highlight), #c5b9c4 (mauve paper sheets and tabs, and the highlight behind a question on hover), #1b1b1b (text on the paper, buttons, rules, chart dots and lines, the thread and dark step badges), #474747 (small grey text on paper: chart details and open entries, photo captions, the towns under the letters and form placeholders), #f6f8f9 (the paper slips (method steps, visit card, reply note, fee slip), the Story folder panel and tab, the reading window outline and the light edge of the pressed words)
- Fonts: Reddit Sans (all running text, in weights 400 to 800: tight uppercase 800 headings, 700 buttons, links and step titles, 600 labels, and regular body text), Playwrite US Trad (the handwriting: photo captions, the open chart entries, letter signatures and the huge pressed words, including Yours in the footer, at one weight)
Paper sheets stand in one column, 820px wide at most, left of centre on the black desk with room on the right for the index tabs; on phones the sheets fill the width and the tabs run along the top. Each sheet pairs a large uppercase heading with a lead and one device: a list of spellings, slips, folder tabs, a pedigree grid, stamped portraits or fees. Four paper tints alternate; the archives and letters sections sit on the desk.
The page reads as a desk covered in paper. Sheets carry a dotted grain, most photos have perforated stamp edges, and large handwritten words such as Origins and Method are pressed into the sheets with a soft emboss. Colours and fonts are also [listed in a DESIGN.md file](https://8b.com/templates/design-md/).
## Sections and motion
- **Navigation** (navigation): six fixed index tabs in four paper colours: Cover, Archive, Case, People, Fees, Write; down the right edge on wide screens, along the top on phones. Motion: The current tab sticks out further and a hovered tab slides out of the sheet edge, both by CSS and both still running with reduced motion.
- **One photo. Four spellings.** (opening): the first sheet: heading "One photo. Four spellings.", intro, two links, four spellings of a surname with their sources, two stamped photos and a ghost word. Motion: On load the heading rises, the intro, buttons and four spelling rows slide up in turn and the two stamped photos settle.
- **Every hand is readable** (archives): a ledger photo with a moving magnifier beside five kinds of entries that are read off it. Motion: Scrubbed to the scroll, a paper-edged window with an enlarged copy of the ledger travels down the dimmed photo while the five list titles are underlined one by one.
- **How a case runs** (method): how a case runs: four step slips joined by a thread that draws itself. Motion: An ink thread draws itself from slip to slip as you scroll, and each tilted slip straightens onto its place when the thread reaches it.
- **Inside every folder** (folder): what is in the client folder: four tabs (Tree, Records, Maps, Story), each with a photo, text and two points. Motion: The tabs switch the four panels, with arrow keys, Home and End supported, and each photo drops into place the first time it comes into view.
- **The Marr folder** (case): a worked example: a family tree of twelve named people and three open question marks, growing back four generations. Motion: The chart sticks for about one and a half screens of scrolling, starts zoomed on the client and pulls back while each generation's lines draw, dots appear and names wipe in.
- **Who does the reading** (people): four researchers as stamp portraits with a name and a specialty. Motion: The four portraits start joined in a perforated block and tear apart into their places, four in a row on wide screens and two by two on phones, while the names wipe in.
- **Letters back** (letters): five client letters on slips that roll slowly sideways. Motion: The five letter slips drift left in a slow 70 second loop while the row is on screen, pausing on hover and focus.
- **Bring the shoebox** (room): the reading room: heading, how to bring the family papers, a visit card with address and hours, and a room photo. Motion: As you scroll the room photo grows from a small tilted stamp to the full desk width while its image settles from a close crop.
- **Questions** (questions): six questions and answers in native elements. Motion: The pressed word Asked deepens with the scroll, and a colour bar sweeps behind a question on hover.
- **Fees** (fees): three fixed-price packages with a price slip that turns over to the one being read. Motion: A price slip sticks to the screen and flips over to show the name and price of the package being read.
- **Open a case** (contact): enquiry sheet: reply time, heading, email with copy button, phone, address and a short form. Motion: The reply-time slip drops into place when it first appears, and the pressed word Write deepens with the scroll.
- **Footer** (footer): footer: name and note, two link columns, a huge pressed word and the copyright line with the Design: 8B credit. Motion: A raking light crosses the pressed word Yours from left to right while its shadow edges swing and deepen.
## Good for
- genealogy or family history research service
- archive, library or local history society
- heritage consultancy or museum shop
- any small research or records service that delivers a document pack, with fixed prices and a reading room
## Questions
**Is this a family tree website template free to use?** Yes. It is one index.html under the MIT license, free for your own site or a client's. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the photos are Unsplash images listed in CREDITS.md. It is a service site with a sample tree, not a tree builder, all [laid out in one scroll](https://8b.com/templates/one-page/).
**Can I change the family tree to my own client's?** Yes, by editing the HTML. The chart is a list of fifteen entries read by position: the first is the client, then two parents for each entry, with three left as open question marks. Keep fifteen or rework the generations in the script. Without JavaScript the connecting lines do not appear.
**Is there a genealogy website design prompt for an AI agent?** Yes, above: a full prompt that works without this file. With the file, download index.html and AGENTS.md into one folder using the repository's curl lines, open it in Claude Code, Cursor or [the Codex command line tool](https://8b.com/templates/for-codex/), and paste the short prompt. AGENTS.md lists the selectors the scripts use and the facts to ask for.
**What must I keep when I edit it?** Keep every id, data-8b-section, data-8b-motion and data-8b-part, the classes AGENTS.md lists, the four portraits and the fifteen chart entries. Keep the header comment, the 8B meta tag and the Design: 8B footer link unless the site owner asks to remove it. With reduced motion on, entrance and scroll animations are off.
**Does the enquiry form send anything?** No. As shipped it checks the fields, shows a thank-you line and resets, and sends nothing. Connect Formspree or Netlify Forms, or delete the form and its script. Without JavaScript there is no thank-you line, and the email copy button needs it and an https page.
**Can I get a site like this without editing code?** Yes, through a different route. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
## Before publishing
Replace: social preview image, favicon, email address, phone number and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).
- Open a case button on the first screen lead to #contact (the enquiry form) now; point them to your enquiry or booking page, or keep #contact once the form is connected.
- See what's in a folder link on the first screen lead to #folder now; point them to keep as is.
- Book a visit link in the reading room section lead to #contact now; point them to your visit booking page or an appointment form.
- Email address and the copy button in the contact section lead to a mailto link to hello@kinfold.example; the button copies the address now; point them to your enquiry address.
- Phone link in the contact section lead to tel:+441904000000 now; point them to your office phone number.
- The folder tabs and the copy button need JavaScript; without it all four folder panels show one under another, the copy button does nothing, the family tree has no connecting lines and the Cover tab stays marked, and the form sends nothing either way until you connect a service.
- The email copy button needs the clipboard API, which is available only on secure (https) pages.
- The pinned family tree stage and the sheet-wide effects can feel long on short screens.
- The index tabs are the only fixed navigation (the footer repeats eight section links): there is no wordmark or menu, and the tab labels are small (11px, vertical on wide screens).
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).