GPT-5 Coding Examples

Weather Theatre is built as a self-contained React + Canvas application with the following characteristics:

• Rendering: All visuals are drawn to an HTML Canvas, driven by React state. The canvas automatically adjusts for the device pixel ratio.
• Visual Logic: The spotlight, fog, rain, and color blending are determined by the combination of mood slider values.
• Data: No external APIs are used. React is loaded via CDN and the weather forecast data is mocked.
• Determinism: The scene is deterministic per page load using a seed, though refreshing the page will vary the skyline and cloud layouts.

Weather Theatre is a deterministic React + Canvas application. It uses React state to drive all visuals drawn to an HTML Canvas, which automatically adjusts for the device pixel ratio.

Key technical characteristics:

• Data: No external APIs are used; the weather forecast is mocked.
• Visuals: The spotlight, fog, rain, and color palettes are blended dynamically based on the combination of mood slider values.
• Layout: The skyline and cloud layouts are deterministic per page load using a seed, but refreshing the page will vary the layout.

The simulation uses a qualitative model tuned for feel rather than scientific accuracy.

Risk Factors: Risk of crumbling increases based on:

• Higher tea temperature
• Longer dunk time
• More fragile or porous biscuit types
• Lower structural integrity

Mathematical Model: Absorption is modeled using the formula: 1 - e^{-k t}, where parameters are driven by the user-controlled sliders.

Pixel Paint ’99 is a lightweight pixel art application that runs directly in the browser without a build step. To use the application, simply open the index.html file in any modern web browser.

Open index.html in any modern browser.

Pixel Paint ’99 supports several keyboard shortcuts for efficient drawing and canvas management:

• B: Select Pencil tool
• E: Select Eraser tool
• F: Select Fill bucket tool
• G: Toggle grid visibility
• C: Clear the entire canvas
• Ctrl/Cmd+Z: Undo last action
• Shift+Ctrl/Cmd+Z or Ctrl/Cmd+Y: Redo last action

To explore the curated collection of demo applications locally, clone the repository and execute the following commands within the front-end directory. The application will be served at http://localhost:3000.

cd front-end
npm install
npm run dev

The Tea Dunkability Simulator is a single-page React experience that simulates biscuit dunkability using sliders for tea temperature, dunk time, biscuit type, and structural integrity. It features a looping teacup animation, a live 'Crumble-o-meter' graph, and crumb particle effects.

To run the simulator, simply open the index.html file in any modern web browser. No build step or installation is required as the project uses React 18 and Babel via CDN.

To start the local development environment, run one of the following commands in your terminal. Once the server is running, you can view the application at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Non-developers can build and preview single-page applications entirely in the browser using ChatGPT with GPT-5:

1. Copy a prompt from the examples for inspiration and customize it.
2. Let GPT-5 generate the HTML/CSS/JavaScript code.
3. Use the Canvas preview feature to see the application run live.
4. Download or copy the generated HTML for use in other environments.

For a seamless terminal-based coding experience, use the Codex CLI. When provided with a prompt and the --full-auto flag, the CLI will generate code, execute it in a sandbox, install necessary dependencies, and provide a live preview. Use the --model gpt-5 flag to specify the model.

codex --model gpt-5 --full-auto "Build a simple photobooth application with camera access in a single HTML file"

Weather Theatre is a single-file React + Canvas experience that requires no build step or installation. To run it, simply open the index.html file in any modern web browser (such as Chrome, Edge, Firefox, or Safari).

Once running, you can interact with the experience using the following controls:

• Mood Sliders: Adjust the sliders for Cosy, Eerie, and Heroic to reshape the weather into different parallax backdrops, spotlight sweeps, and velvet curtain reveals.
• Raise Curtain: Click this button to reveal the scene.
• Matinée/Night Toggle: Switch between these modes to change the palette and ambience (time of day).
• Mouse Movement: Move your mouse over the stage to trigger subtle parallax effects.