I'll be giving the keynote at this economics conference next week. I'll be talking about artificial intelligence and how it relates to knowledge workers in commercial real estate.
Create a complete, self-contained interactive demo as exactly one HTML code block only.
Output rules:
Return only one fenced ```html code block.
Do not include any explanation before or after the code.
Put all HTML, CSS, and JavaScript in that single file.
Do not use React, JSX, build tools, npm, imports, modules, bundlers, or external dependencies.
The result must run by pasting it directly into a local .html file and opening it in a browser.
If a library would normally be needed, recreate the needed behavior manually in vanilla JavaScript and WebGL or Canvas.
Keep everything fully self-contained.
Build an interactive 3D paper receipt with cloth-style simulation, matching the following specifications as closely as possible in a single HTML file:
Visual layout and UI
The page background must be a light off-white/gray, such as #e5e5e5.
Center the interactive 3D scene on the page.
Below the scene, add simple HTML text that says: Grab and drag the receipt
That instruction text must be centered, cleanly styled, and light gray.
Receipt texture generated from a canvas
Programmatically create an HTML <canvas> and use it as the receipt texture.
Use a monospaced font.
The paper color should be slightly off-white.
The text color should be dark gray or black.
Render this exact receipt content onto the texture canvas:
[CENTERED, LARGE, BOLD]: THE FLORNRM SHOP
[CENTERED]: 42 Mesh Lane, WebGL City
[CENTERED]: Tel: (555) 042-1337
[LEFT ALIGNED]: Date: 2026-02-23 14:17
[LEFT ALIGNED]: Order: #00382
[DASHED LINE DIVIDER]
[LEFT & RIGHT ALIGNED COLUMNS]:
Vertex Shader $4.20
Fragment Shader $3.50
Normal Map $2.80
UV Unwrap $1.50
Cloth Simulation $6.00
[DASHED LINE DIVIDER]
Subtotal $18.00
Tax (8%) $1.44
[THICK LINE DIVIDER]
[BOLD] TOTAL $19.44
[CENTERED, BOTTOM]: Thank you for visiting!
[CENTERED, BOTTOM, SMALLER]: https://t.co/CR5FmpuhHX
3D scene setup
Create a receipt mesh using a subdivided rectangular grid with a high segment count comparable to 3 x 6 world units and about 25 x 50 subdivisions so it can bend smoothly.
Render both sides of the paper.
Shade it so the folds are visible and the material feels like rough paper.
Add ambient light and directional light so the folds and curvature read clearly.
Simulate realistic depth and shadowing visually, even if implemented approximately.
Cloth / paper physics
Do not use any external physics library.
Implement a custom mass-spring or Verlet-based simulation directly in vanilla JavaScript.
Represent the receipt as a grid of particles connected by structural constraints between adjacent points.
Apply gravity downward.
Pin the top row of particles so the receipt hangs naturally from the top.
Each animation frame should:
integrate particle motion,
satisfy constraints multiple times for stiffness,
update the rendered mesh vertices.
The receipt should bend, fold, swing, and settle like thin paper or light cloth.
Interaction
The receipt must be draggable with the pointer.
On pointer down, detect the closest particle to the hit position and mark it as grabbed.
While dragging, move that particle in 3D space based on pointer position.
The rest of the receipt should respond dynamically, folding and pulling through the constraints.
On release, let the receipt swing back and settle naturally.
Show a small semi-transparent circular grab indicator at the grabbed position.
Technical constraints
Use only standard browser APIs in one HTML file.
Prefer WebGL for the 3D rendering. You may implement the rendering manually or with raw WebGL.
The code must be robust, readable, and organized.
The demo must work immediately when saved as a single .html file and opened in a browser.
Quality bar
Make it visually polished and satisfying to interact with.
Keep the receipt legible.
Keep performance reasonable.
Do not simplify it into a flat 2D mockup. It must feel genuinely 3D and physically simulated.
Again: output exactly one single ```html code block and nothing else.
She started cheering way before anyone else, a woman who knows what her horse is capable of. All she needed to see was the spark and she knew she had a chance. Special moment. First ever woman trainer to win the derby. Great for sports. Great for the derby.🐎
A few lesser-known products I love and use a ton:
1. https://t.co/gStIkibwnT for screenshots
2. https://t.co/8GYt1Z1D2C replaced Loom for me, so clean
3. https://t.co/tEyEC35G0J for frequent snippets
4. https://t.co/DgiC52h6qZ for emojis
5. https://t.co/G11YmC3TGL for focus
Here are 5 epic prompts to use with ChatGPT's new image generator.
It's the most powerful image generator on the market, so let's use it to our advantage.
Save this one 📌
WORK SETUP AUDIT: upload a photo of your desk and try this one.
Create a visual-first, editorial-style infographic auditing the desk setup in the attached photo. Show a side-by-side of current vs. optimized setup with annotations on monitor height, chair position, lighting, cable management, and clutter. Rate each issue with symbols like Top Fix, ✅ (working), 👍 (acceptable), ⚠️ (costing energy), and ❌ (actively hurting), tying each to a consequence like back pain, eye strain, or focus loss. Rank fixes by impact and group them into free fixes, under $50, and worth the investment. Include a Focus Forecast gauge predicting daily deep work hours possible with the current setup vs. after the top 3 fixes. Keep it clean, minimal text, no paragraphs.
POSTURE/STRENGTH READOUT: upload a photo of you standing or working and try this one.
Create a visual-first, editorial-style infographic analyzing the posture and mobility patterns in the attached photo. Show an annotated full-body diagram marking forward head, rounded shoulders, hip shift, pelvic tilt, and other patterns, each rated with symbols like Priority Fix, ✅ (aligned), 👍 (minor), ⚠️ (compensating), and ❌ (high-risk). Show a side-by-side of current vs. corrected alignment and the top 3 mobility exercises to fix the biggest issue, with reps and frequency as small icons. Include a Movement Age gauge estimating the subject's movement age vs. actual age, plus a 6-week projection with the prescribed work. Keep it focused on capability and longevity, minimal text, no paragraphs.
CUSTOM HAIRSTYLE IDEAS: upload a simple photo of your face and try this one.
Create a visual-first, high-end hairstyle analysis infographic based on the attached image, showing side-by-side comparisons of multiple hairstyle, haircut, and hair color options for the same subject. Include visible ratings for every option using symbols like “Top Pick,” ✅ (highly flattering), 👍 (good), ⚠️ (situational), and ❌ (not recommended). Feature one clearly labeled Best Overall look, followed by several top matches, a few bold or experimental options, and a set of low-compatibility styles to avoid. Include a range of hair color variations and styling options (for example sleek, waves, updos) applied to the same base cuts. Keep the design visual with minimal text, no paragraphs, using a clean editorial or magazine-style layout with consistent framing of the subject across variations. Ensure the recommendations reflect face balance, structure, harmony, and Andre Walker hair type, and include both conventional flattering styles and radically different transformations while keeping the subject recognizable in every variation.
LINKEDIN GLOW-UP: upload a screenshot of your LinkedIn page and try this one.
Create a visual-first, editorial-style infographic auditing the LinkedIn profile in the attached screenshot. Show a side-by-side of current vs. optimized profile with annotations on headline, photo framing, about section, featured content, and experience descriptions. Rate each element with symbols like Top Rewrite, ✅ (strong), 👍 (decent), ⚠️ (underselling), and ❌ (losing opportunities), and provide specific before/after rewrites for the headline and about section. Rank improvements by impact on inbound opportunities, recruiter visibility, and authority signaling. Include a Recruiter Heat Map showing which roles, industries, and seniority levels the profile currently attracts vs. could attract after rewrites. Keep it magazine-style, minimal text, no paragraphs.
SUBSCRIPTION COST SAVINGS: search 'subscription' in your phone settings, screenshot, and upload that to try this one.
Create a visual-first, editorial-style infographic auditing the subscriptions in the attached screenshot. Show every subscription as a card sorted into Keep ✅, Downgrade 👍, Pause ⚠️, and Cancel Now ❌, with monthly and annual costs displayed. Surface one Top Cut with the highest savings-to-regret ratio. For each Cancel Now and Downgrade, suggest a cheaper or free alternative that delivers most of the value. Show total annual spend, total recommended cuts, and resulting yearly savings. Include Freedom Math projecting the annual savings invested at 7% over 10, 20, and 30 years, alongside a "what this could buy instead" line like a flight, a course, or a month of rent. Keep it magazine-style, minimal text, no paragraphs.
GPT Image 2 on ChatGPT
Prompt:
Create a stylized travel poster / graphic collage for [country]. The main subject should be a stylish international tourist visiting [country], clearly presented as a traveler and not a local resident. Show the tourist wearing modern travel fashion, with details such as a camera, backpack, sunglasses, map, or suitcase, exploring the culture and atmosphere of [country]. Place the tourist in a dynamic composition surrounded by iconic architecture, streets, landscapes, landmarks, transportation, food, signage, and cultural elements associated with [country]. Blend realistic character detail with a graphic collage background made of layered paper textures, torn poster edges, sticker elements, halftone dots, editorial typography, and bold geometric shapes. Include authentic visual motifs from [country], but keep the tourist’s appearance and styling globally fashionable and clearly foreign to the setting. Add a large readable headline: “LOST IN [country]”. Modern, artistic, premium editorial travel poster aesthetic, balanced layout, print-worthy composition.