Hero made by @ybouane.

@crazygl/hero-keyboard-keys

Phrase rendered as physical keyboard keys — each cap presses down on a stagger like someone typing it out for you.

Demo

Keyboard Keys

Install

npm install @crazygl/hero-keyboard-keys

Usage

import KeyboardKeys from '@crazygl/hero-keyboard-keys';

export default function Page() {
  return (
    <KeyboardKeys
      phrase="TYPE TO BUILD"
      subheading="shortcuts for the modern web"
      stepMs={220}
      keySize={84}
    />
  );
}

Customise

• Content — phrase, subheading.
• Timing — stepMs (interval between key presses).
• Style — keyColor, keyTextColor, keyBorder, subColor, keySize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Developer tools, CLIs, and keyboard-shortcut products
• Docs and onboarding hero sections
• Playful brand statements and "type to build" SaaS pages

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.