# enter-chat.github.io

`<enter-chat>` is a small Web Component that renders a stylable `Enter Chat` button inside Shadow DOM. When a pointer gets too close, the button eases away to another open spot within its configured view box.

## Files

- `/home/runner/work/enter-chat.github.io/enter-chat.github.io/enter-chat.js` – custom element definition
- `/home/runner/work/enter-chat.github.io/enter-chat.github.io/index.html` – demo page with quick usage notes

## Usage

```html
<script type="module" src="./enter-chat.js"></script>

<enter-chat viewbox="420 220"></enter-chat>
```

- `viewbox="300"` creates a square 300px interaction area.
- `viewbox="420 220"` creates a 420px by 220px interaction area.
- `viewbox="0 0 420 220"` is also accepted and uses the last two numbers as width and height.

## Styling

The component exposes `part="button"` so you can style the inner button with `::part(button)`. It also supports these CSS custom properties on the host:

- `--enter-chat-button-bg`
- `--enter-chat-button-color`
- `--enter-chat-button-border`
- `--enter-chat-button-radius`
- `--enter-chat-button-padding`
- `--enter-chat-button-font`
- `--enter-chat-button-shadow`

Example:

```css
enter-chat {
  --enter-chat-button-bg: linear-gradient(135deg, #7c3aed, #2563eb);
}

enter-chat::part(button) {
  letter-spacing: 0.01em;
}
```

## Prompt provenance

This Web Component was created with this prompt:

> Create a `<enter-chat>` Web Component that displays a stylable `<button>Enter Chat</button>` inside shadowDOM, when the user cursor gets too close to the button it slowly animates away with a subtle animation, to an empty space within the specified viewBox (or 300 px) Ignore keyboard interaction. Create a demo page index.html with documentation pointing to README.md