[ EDIT ME ]
Make Codemaxx yours in an afternoon.
This page is about changing the template, not about Hearth. Delete it, or set it to draft, before you publish.
Checklist
Eight edits, in this order.
01
Open the Navigation component and change the wordmark text. Then change the wordmark in the Main layout footer and the small print at the bottom.
02
Select the text on the Home page hero. The install command chip is plain text; type your own.
03
Every line in the hero terminal is a text layer. Change the prompt, the tool calls and the diff. Keep the same number of lines to keep the timing.
04
Changelog, Docs, Integrations, Posts, Plans and Voices, plus Questions for the FAQ. Each has fields named in plain words.
05
The ten colour styles are in the Assets panel. Change Moss for your accent on light pages and Lime for dark bands.
06
The Contact form uses Framer form settings. Choose where submissions go.
07
Search for example addresses: hello@hearth.example, get.hearth.example.
08
Remove Edit Me from the footer links, then delete or draft the page.
Hero session
Change what the terminal says.
01
The hero terminal is made of frames and text layers. Click into the terminal window on the Home page and edit any line.
02
A small code file, CodemaxxMotion, adds CSS classes. Overrides called withStep1 to withStep9 fade the lines in one after another, and withType types the first line.
03
Copy a tool-call card, paste it in the session and choose a withStep override in the properties panel. The steps run in order from 1 to 9.
04
Clear the code override on the lines. The finished session stays visible. Visitors who ask for reduced motion see the finished session automatically.
Style
Four fonts, one ember.
01
Host Grotesk Light for headings and text, Geist Mono for labels and buttons, Geist Pixel for the one accent word, Caveat for the handwritten notes. Change them in the text styles panel and every page follows.
02
Night #0E0B09, Night Ink #F3EDE4, Sheet #F3EEE6, Paper #FBF8F3, Ink #16120E, Muted #6B6158, Ember #FF6A2B, Amber #FFB36B, Ember Deep #B8431A, Bezel #1D1712, plus Added and Removed for diffs.
03
The page runs dark to light to dark. Each section is a plain colour fill, so you can switch any section between Night and Sheet in one click.
04
Nine text styles set the type scale for desktop, tablet and phone.
Artwork
One object, many poses.
01
The glowing glass pages are pre-rendered artwork: one 9-second video loop for the home hero and eight still poses used on cards, page heroes, blog covers and the security band.
02
Select Hero loop on the Home page and paste your own MP4 into Video URL. Set a Poster image too; it shows first and whenever motion is reduced.
03
Every art card is a normal image fill. Replace it in the Fill panel. Blog covers come from the Cover field in the Posts collection.
04
Keep videos under 3 MB and 8 to 12 seconds, muted, with a seamless loop.
CMS
Seven collections do the work.
01
Version, date, kind, commit and notes. The home page shows the six newest by date.
02
A section label, a title, a summary and the page body. The docs index lists all of them.
03
A kind, a name, a summary and a details page. The home page shows the first eight.
04
Category, author, date, reading time, a cover colour and a short mark, plus the article.
05
Name, price, per, yearly note, blurb and four feature lines.
06
Name, role, company, quote and one number with a label.
07
Question, answer and a group: General, Pricing or Security.
Motion
Motion that cannot hide content.
01
The hero session, section reveals as they scroll into view, the logo ticker, hover lifts on cards and rows, and a wipe between pages.
02
Everything is CSS. If a browser cannot run it, or the visitor prefers reduced motion, the finished state is shown.
03
Select a layer and clear its code override. Remove the page transition in the page settings.
Before you publish
Check these five things.
01
Set the title, description, favicon and social image.
02
Open each button and check it goes where you expect.
03
Preview each page at tablet and phone widths.
04
Add your own privacy policy and terms.
05
Replace Hearth, Northlight and the other demo names with yours.