Listening Infrastructure
A candy-pink page: a white radio telescope dish sweeps in from the lower left under indigo serif type and acid-yellow buttons.
- Astro
- HubSpot
- WordPress
- Framer soon
Human Horizon:dark cinematic portrait AI services homepage template for Astro, HubSpot and WordPress
A dark, cinematic homepage that opens on a huge black and white close-up of a human eye fading into shadow. Electric cyan serif headlines and fine cyan-gray rules carry the rest of the page, with one diagram and one photo of colleagues.
- Sections
- 10, 3 with their own script
- Editable fields
- 110 in HubSpot and WordPress
- Typefaces
- Libre Caslon Display, DM Sans
- Image files
- 2
- Downloads
- Astro 163 KB, HubSpot 955 KB, WordPress 845 KB
- Look
- Dark background
- Collections
- AI services, Agency, Tech
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Vantrell, a fictional company that builds and runs AI systems for other businesses.
Download Human Horizon
Free: a short form (first name and work email) once, then every zip downloads straight away. Free to use and adapt for personal and commercial sites. Each zip holds one folder, human-horizon, with a README; the install steps below are condensed from it.
An Astro project: one component per section, design tokens in global.css, images in public/assets.
Needs Node 22.12 or newer.
- Unzip human-horizon-astro.zip; it holds one folder, human-horizon.
- In that folder run npm install (Node 22.12 or newer).
- Run npm run dev and open http://localhost:4321.
- Edit the copy in src/components, the colors and type in src/styles/global.css, and the images in public/assets.
- Run npm run build; the static site is written to dist/.
More from the Astro README
What is where
- src/pages/index.astro: the page head and the sections in order.
- src/components: one file per section (10 in all), each with its markup, styles and script.
- src/styles/global.css: design tokens (colors, type, spacing) and base styles.
- public/assets: the images.
- CLAUDE.md and AGENTS.md: notes that tell Claude Code or Codex how the project is organized.
Make it yours
- Repeated items (cards, steps, questions) share the same markup: copy one to add another.
- Remove a section by deleting its tag and its import in src/pages/index.astro.
- Reuse a section elsewhere by copying its component file and global.css; a section depends on nothing else.
- Set the title, meta description and JSON-LD block in src/pages/index.astro before publishing.
- The header links scroll to sections of this page; "Bring us the mess" and the other calls to action scroll to the contact form.
- The contact form validates, shows a thank-you message and sends nothing. Replace the submit handler in the script of the contact section with a request to your form service (its action is /contact).
A HubSpot CMS theme: one module per section, each with its own fields, plus Home and Page templates.
Needs a free HubSpot account and Node.js 20 or newer for the HubSpot CLI.
- Install the HubSpot CLI: npm install -g @hubspot/cli (Node.js 20 or newer).
- Run hs account auth and paste a personal access key with Design Manager ticked.
- Unzip human-horizon-hubspot.zip, then from the folder that holds human-horizon run hs cms upload human-horizon human-horizon.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Human Horizon and click Set as active theme.
- Choose the template Human Horizon - Home.
More from the HubSpot README
Change the content
- Each of the 10 sections is a module with its own fields, 110 in all. Click a section in the page editor and its fields open on the left, grouped by item.
- A field left empty removes its element; an empty image field shows the template's own image.
- Sections are rows: drag, clone or delete them, and add one back from the theme's modules.
- Header and footer are global content: what you change there changes on every page.
- The template Human Horizon - Page has the same header and footer and an empty area for other modules.
What the fields do not cover
- More items than the template has (a fourth plan, an extra question) needs an edit in modules/<name>.module/module.html and fields.json.
- Icons and drawings are inline SVG in module.html; colors, fonts and spacing are variables at the top of css/styles.css.
- No blog templates and no 404, password or search pages of its own: HubSpot uses its defaults.
- HubSpot takes no WebP in a theme, so the images are PNG and JPEG. Fonts load from Google Fonts.
How it was checked
- Uploaded with the HubSpot CLI and rendered through HubSpot's theme preview in Chromium: every file uploads without an error and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: the page editor itself, publishing a page, and browsers other than Chromium.
A WordPress block theme: one block per section with its fields in the editor, plus page, post, blog and 404 templates.
Needs WordPress 6.6 or newer and PHP 7.4 or newer.
- In WordPress go to Appearance > Themes > Add New Theme > Upload Theme.
- Choose human-horizon-wordpress.zip, then Install Now and Activate.
- Open the site: the homepage shows the template, whatever Settings > Reading says.
- Edit each section in Appearance > Editor > Templates > Front Page, in the Block tab on the right, then Save.
More from the WordPress README
Change the content
- Each of the 10 sections is a block with its own fields, 110 in all, listed in the Block tab and grouped by item. The page updates as you type.
- Links: signup or /signup is a page of your site, #pricing jumps to a section, and full addresses, mailto: and tel: work as written.
- A field left empty removes its element; clear every field of a card and the card goes.
- Move sections with the arrows in the toolbar, or add one back from the block inserter under "Human Horizon". The same blocks work on any page.
What the fields do not cover
- More items than the template has needs an edit in sections/<name>.php (markup) and inc/sections.php (fields).
- Icons are inline SVG; colors, fonts and spacing are variables at the top of css/styles.css.
- The theme prints the page title; leave the meta description and structured data to an SEO plugin.
- Functions and blocks are prefixed human_horizon_ and human-horizon/.
How it was checked
- Installed from the zip in WordPress Playground on WordPress 7.1.3 with PHP 8.3 and on WordPress 6.6.10 with PHP 7.4: no PHP warnings, and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: a real hosting account, browsers other than Chromium, other plugins and multisite.
Framer
Framer version coming soon. It will be listed here next to the other three downloads.
The 10 sections of Human Horizon
In page order. In HubSpot each one is a module and in WordPress a block, 110 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Vantrell wordmark, three anchor links and an outlined cyan Bring us the mess button over the eye photo
11 fields · has its own script -
Hero
Full-bleed macro eye photo with "People lead. Intelligence works." in cyan serif, intro and a cyan button
9 fields -
Two speeds
"Two speeds. One business." with AI moves fast and Your business needs solid ground in two ruled columns
5 fields -
Connection
AI, Vantrell, Your operation line diagram with cyan arrows and a bracket to "The connection is the capability."
6 fields -
Standard
The Vantrell standard: six conditions in a three by two ruled grid and a cyan "Pass all six" line
22 fields -
Possibilities
Four quoted problems, such as "We need to go deeper.", with cyan serif answers and rows that expand
20 fields · has its own script -
Built with your team
"Built with your team." beside a monochrome photo of two colleagues and three numbered steps
10 fields -
Examples
Three placeholder examples, Oakhurst Care, Silvan and Brennock and Co., in columns between rules
6 fields -
CTA
"The next connection is yours.", two short lines and a first name, last name and work email form
13 fields · has its own script -
Footer
Large Vantrell wordmark, cyan serif tagline, People. Intelligence. Operations., Back to top and the domain
8 fields
Design notes
The first screen is a full-bleed black and white macro photo of an eye, brow and temple, filling the upper left and fading into black toward the right and bottom. "People lead. Intelligence works." sits low in very large electric cyan Libre Caslon Display, with a short intro and a solid cyan button at the lower right. The navigation sits directly over the photo.
The page continues on near-black. "Two speeds. One business." splits into two serif columns, then a line diagram runs AI, Vantrell, Your operation with cyan arrows and a bracket joining them to "The connection is the capability." The six conditions sit in a ruled three by two grid, followed by four quoted problems with cyan answers and arrows, a black and white photo of two colleagues with a tablet beside three steps, three placeholder companies, the form and a large wordmark.
The eye photo is the full canvas rather than a panel, which makes the opening feel like a film poster. Serif headings reach up to 200px, mixing warm white and cyan. The four problem rows look like plain links with arrows but open with an animated height.
Shape and spacing
Square corners, a solid cyan rectangular button, fine cyan-gray rules and 5.3% side gutters.
Images
2 generated images as WebP (the black and white macro eye, two colleagues looking at a tablet). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Libre Caslon DisplayHeadlines, section headings, problem answers and the footer tagline
- DM SansBody copy, navigation, buttons, labels and the Vantrell wordmark (weights 400 to 600)
Loaded from Google Fonts.
Colors
- Near-black
#080B0BPage background - Warm white
#F2F1ECMain text and large headings - Electric cyan
#50E8EFHero headline, accent headings, numbers, arrows and the button - Muted gray
#CCCFCFSecondary text - Rule teal
#355658Fine divider lines
What works on the page
- On phones the navigation opens from a menu button and closes with Escape.
- The four problem rows expand with an animated height to show their category, and the first also shows a longer customer example.
- The form checks required fields and email, then shows a thank-you that says nothing was sent and gives a placeholder email.
- Back to top sits in the footer; transitions run at 320ms and turn off under reduced-motion settings.
Who Human Horizon fits
An AI agency that wants a dark, dramatic first screen built on a single striking photo.
A firm whose message is that people stay in charge, which the watchful eye makes literal.
A team that likes dark mode with one glowing accent color and elegant serif headings.
A company with a short story to tell: ten compact sections and only two images to replace.
See the whole page as one image (1080 by 3407 pixels, 169 KB)
Questions about Human Horizon
Can I replace the eye photo?
The hero image is a 1672 by 941 WebP that fills the screen. Use a dark photo that fades to black at the right and bottom, because the intro and button sit there; a soft dark backdrop behind the small eyebrow keeps cyan text readable on bright areas.
Is there a light version?
The page is designed dark, with near-black #080B0B behind warm white and cyan type. You can flip the background and text custom properties, but the eye photo and the cyan were chosen for a dark page, so a light version needs a new hero image and a darker accent.
What do the problem rows do?
Each of the four rows opens with an animated height when clicked or activated by keyboard. The first shows a longer customer example; the others show their category, such as Retention and engagement.
Does the contact form send anything?
The form validates the fields and email, then shows a thank-you that says no details were sent and points to a placeholder address, hello@vantrell.example. Connect it to HubSpot forms, a WordPress form plugin or a /contact endpoint to receive messages.
Is Vantrell a real company?
Vantrell, the example companies, the email and domain are all placeholders. Free to use and adapt for personal and commercial sites.
More AI services templates like Human Horizon
Same content, different designs. Human Horizon is listed in AI website templates, Agency website templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Stable Axis
A signal yellow AI services page with a steel gyroscope hero, heavy black type and one dark band holding a node diagram.
- Astro
- HubSpot
- WordPress
- Framer soon
Working Day
Graphite AI services homepage with giant citron headlines and documentary photos of people in service, billing and warehouses.
- Astro
- HubSpot
- WordPress
- Framer soon
Start with one process.
We learn the business and build your first go-to-market process on us this month.