affectUI › Illustrations › Product scenes

Glow Keyboard

AI chat input that types itself over a glass keyboard – every key press sends a wave up the gradient floor.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/glow-keyboard.json · Import from @/components/ui/glow-keyboard

When to use

Hero sections for AI assistants, chat or writing tools – the prompt types itself and invites people to try
Landing pages that want an interactive scene instead of a video

When not to use

As your real chat input – it is a showcase; use Chat Composer for a working input
Small cards on mobile – the keyboard legends get tiny below ~360px width

Usage

import { GlowKeyboard } from "@/components/ui/glow-keyboard";

export function Hero() {
  return (
    <section style={{ maxWidth: 1100, margin: "0 auto" }}>
      <GlowKeyboard />
    </section>
  );
}

Props

Name	Type	Default	Description
`prompts`	`string[]`	`three hiking prompts`	Prompts the demo types one after another; each one is sent with Enter
`placeholder`	`string`	`"Ask AI anything..."`	Placeholder of the chat input
`onSubmit`	`(text: string) => void`		Called when a prompt is sent with Enter – by the demo or the user
`label`	`string`	`"AI chat input above a glass keyboard…"`	Accessible name of the scene
`className`	`string`		Extra class on the root, e.g. for width or margins

Keyboard

Click: Anywhere on the scene puts the cursor into the input and stops the demo
Any key: Types and lights up the same key on the drawn keyboard
Enter: Sends the prompt and clears the input

Accessibility

The input is a real text field with a label; the drawn keyboard and the floor are hidden from screen readers
The demo stops as soon as the input gets focus, so it never types over the user

Responsive

Keeps an 11 : 6 frame and scales to the width of its container – every detail is sized in container units
Set the background with --ui-gk-bg (default #fafafa, #111113 in dark mode)
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Gradient Floor – A blurred colour gradient that glows up from the bottom edge – two layers that drift and morph
Chat Composer – Prompt composer with model picker, voice input, app connections and approval request