# Atmosphere Background Demo Prompts

## Minimal prompt

Use $atmosphere-background to create a polished standalone HTML example that clearly demonstrates the skill.

## Recreate the demo

Use $atmosphere-background to build a responsive reference demo for this capability:

> Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.

### Direction

Use a full-bleed procedural canvas atmosphere behind precise interface framing.

Use an art-directed composition with one clear focal point, restrained supporting copy, and enough surrounding interface to show how the technique behaves in a real product or landing page.

### Canonical example

- Render eighteen slow procedural wave bands and one narrow moving signal beam.
- Place the animated field behind compact live-system metadata.

### Deliverable

- Create demo/index.html as a standalone document.
- Keep CSS and JavaScript inline.
- Put any required images, fonts, models, textures, or vendor files in demo/assets/.
- Do not add a framework, package manager, build step, or node_modules.
- Add controls only when they help inspect or replay the technique.

### Acceptance checks

- Keep the demo responsive from 390px through 1440px.
- Use semantic HTML, visible focus states, and reduced-motion handling.
- Keep all HTML, CSS, and JavaScript inside demo/index.html.
- Use only relative local asset paths.
- Keep the canvas decorative and the content readable if rendering is unavailable.
- Cap device pixel ratio and pause when the document is hidden.

## Remix prompt

Use $atmosphere-background and keep the same implementation contract, but change the subject, copy, palette, and content hierarchy. Preserve the core technique, accessibility behavior, responsive rules, and performance constraints demonstrated by the reference.