# Subscribe Button — `subscribe-button@1.0.0`

The call to action that ends creator videos: a SUBSCRIBE pill slides in, a cursor clicks it, it turns into SUBSCRIBED with a tick and a bell rings.

The call to action every creator video ends on: a red pill pops in with a small overshoot, a cursor glides to it and clicks (the button squashes and a ring ripples out), the pill turns into a grey one with a tick, and a bell swings beside it. The words are options, so it works for follow, join or buy prompts too. Choose the two labels, the colours (red, blue, green or gold), whether the bell rings and the backdrop colour.

- Kind: text; status: published; digest sha256:8bc9920ab6de64fc25cc913f75aefb21502b085d1c632c4af9b14d7c4ab5c01d
- Role: Effect overlay (Canvas 2D): the end-of-video prompt for creators and brands.
- Implementation: canvas2d; entry `src/subscribe-button.js`
- Files: https://aipixelwizard.com/registry/subscribe-button/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/subscribe-button.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/subscribe-button/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/subscribe-button/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `apw-runtime@1.0.0` (demo) — Demo harness. The reusable source has no dependencies.

## Exports
- `createSubscribeButton({ label?, doneLabel?, theme?, bell?, clickAt?, fontFamily? }) => { draw(ctx, info, width, height), revealDuration }` — Canvas 2D layer driven by info.time (seconds); draws on top of the canvas.
- `THEMES: { red, blue, green, gold }` — Button and done-state colours.

## Parameters
- `label` (text, default "SUBSCRIBE") — Button text
- `doneLabel` (text, default "SUBSCRIBED") — After the click
- `theme` (select one of red | blue | green | gold, default "red") — Colours
- `bell` (boolean, default true) — Bell
- `background` (color, default "#16181f") — Backdrop

## Composition
- Inputs: Canvas 2D context, info.time (seconds), width, height.
- Outputs: Draws the button, cursor and bell on top of the canvas; does not clear it.
- Coordinates: Centred (shifted left a little to make room for the bell); the pill is 150 units tall on a 1080 canvas; the cursor comes in from the lower right.
- Lighting: A soft drop shadow lifts the pill.
- Timing: Pure function of time: pop-in 0.2 s, cursor 0.9 s, click at 1.6 s, flip, tick and bell shortly after; revealDuration says when it has settled.
- Works with: kinetic-title, gradient-background
- The pill grows to fit the longer label after the click.
- Text is treated as private: it is not stored in shared packs unless you choose to include it.

## Output and loop
- 1080×1080, 30 fps, 5 s, procedural
- Seamless loop: no — Not a loop: it plays once and ends on the done state with the bell at rest.
- Verified 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes

## Use it
New project: Create the button once, then each frame draw your backdrop and call cta.draw(ctx, { time: frame / fps }, width, height).

Existing project: Copy src/subscribe-button.js. Call draw on your existing 2D canvas after the rest of the frame.

Reuse ideas:
- Creator video end: Red, with bell.
- Social follow: Follow, blue.
- Shop demo: Gold, buy now.

## Limitations
- System fonts differ between computers; pass fontFamily and load the font first for identical renders.
- It is a generic button: it does not use any platform's logo or exact design.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).