Skip to main content

Terminal Hero

BlockHero Heroes & Blocks 14 options JavaScript

Two-column hero with a status line, headline, stats and an animated terminal that types out commands.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
BlockHero
Category
Heroes & Blocks
Used as
Page block — “Block: Hero”
Options
14 editable fields
Built with
PHP, Twig, SCSS, JavaScript
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

The homepage hero: copy on the left (status line, headline, intro, stats and two calls to action) and a faux terminal on the right that types its lines out with a human-like per-character delay.

Highlights

  • Terminal lines are editable rows with a type (command, output or final line), so the “script” is content, not code.
  • Typing runs once the terminal is in view, ported from the original chrisalberto.site animation without GSAP.
  • Stacks the terminal under the copy on narrow screens; stats stay a compact row.
  • Primary and secondary CTAs pick up the site-wide button hover effect.

Options

Editors add this as Block: Hero in a page's components. Every field it exposes:

Option Field Type Details
Content
Status Line statusLine text Default: Senior WordPress Developer · Remote — Worldwide
Headline * headline text Default: Sample Component Headline
Intro * intro textarea Default: Placeholder introduction text describing the sample headline and providing supporting context for this component preview.
Stats stats repeater Repeatable list
↳ Number * number text Default: 99+
↳ Label * label text Default: Sample Stat
Block Terminal
Terminal Title Bar terminalTitleBar text Default: ~ /chris — zsh
Terminal Lines terminalLines repeater Repeatable list
↳ Type type select Choices: Command, Output · Default: command
↳ Text text text Default: Sample text Leave empty on an Output line for a blank spacer line.
Options
Primary CTA Label primaryCtaLabel text Default: Primary Action →
Primary CTA Link primaryCtaLink text Default: #
Secondary CTA Label secondaryCtaLabel text Default: Secondary Action
Secondary CTA Link secondaryCtaLink text Default: #

Under the hood

Components/BlockHero/

  • _style.scss Styles (SCSS) 202 lines
  • functions.php Fields & data (PHP) 160 lines
  • index.twig Markup (Twig) 52 lines
  • script.js Behaviour (JavaScript) 78 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components