WebGL Shader Hero (BlockWebGLHero)

Live demo

At a glance

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

About this component

A statement hero whose background is a live chromatic RGB-wave shader rendered with plain WebGL — scoped to this block’s own frame rather than the whole site, and without pulling in three.js for a single full-screen triangle.

Highlights

Optional “available” badge, headline, intro and a glass-style call to action.
Text stays white over the shader regardless of the season palette, for legible contrast.
The shader pauses when off-screen and respects reduced-motion preferences.

Options

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

Option	Field	Type	Details
Content
Show Availability Badge	`badgeEnabled`	true false	Default: on
Badge Label	`badgeLabel`	text	Default: Available for New Projects
Headline *	`headline`	text	Default: Design is Everything
Intro	`intro`	textarea	Default: Unleashing creativity through bold visuals, seamless interfaces, and limitless possibilities.
CTA Label	`ctaLabel`	text	Default: Let's Go
CTA Link	`ctaLink`	text	Default: #
Options
Options	`options`	group
↳ Theme	`theme`	select	Choices: (none), Light, Dark

Under the hood

Components/BlockWebGLHero/

_style.scss Styles (SCSS) 119 lines
functions.php Fields & data (PHP) 98 lines
index.twig Markup (Twig) 24 lines
script.js Behaviour (JavaScript) 180 lines

Share this component

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