Presenter demo / 02:20 / Published 2026-08-28
Build a Shareable Site
An outcome-first website teaser leads into a private trip-site build, an expense-tracker revision, a sharing request, and a recurring dashboard example.
Useful to borrow
Show a compelling result first, then explain the source material and a meaningful revision. Keep build, review, sharing, and maintenance distinct.
Do not infer
The generated travel and dashboard pages are demo outputs, not the host app's native UI. A sharing request alone does not prove every recipient gained access.
18 shot groups.
Read across from the observed content to its treatment and possible adaptation. Enlarge the frame for detail.
Approximate study intervals; horizontal scrolling reveals all columns on small screens.
| Moment / source | Reference frame | What is on screen | Framing / edit | Useful adaptation |
|---|---|---|---|---|
| Shot group 01 ≈ 00:00–00:06 People / environmentWatch from here ↗ | Sample 00:04.000 | Topic opening Overhead and laptop shots introduce the site-building topic. | Environmental title sequence. | Use a concise opening before showing the result. |
| Shot group 02 ≈ 00:06–00:12 People / environmentWatch from here ↗ | Sample 00:08.000 | Presenter introduction The speaker sets up the website example. | Wide desk composition. | Keep spoken framing in the talking-head recording. |
| Shot group 03 ≈ 00:12–00:14 App / browser screenWatch from here ↗ | Sample 00:12.000 | Site artifact teaser A site card appears in the conversation with a preview image. | Saved artifact shown before the build sequence. | Lead with the outcome when it makes the task immediately clear. |
| Shot group 04 ≈ 00:14–00:18 App / browser screenWatch from here ↗ | Sample 00:16.000 | Generated itinerary site The browser scrolls from the site's introduction to its itinerary. | Readable full-page sections with browser context retained. | Show a useful interior section, not only a decorative hero. |
| Shot group 05 ≈ 00:18–00:34 People / environmentWatch from here ↗ | Sample 00:26.000 | Presenter explanation Wide and close presenter shots introduce the build process. | Human bridge after the outcome teaser. | Use narration to explain why the site matters. |
| Shot group 06 ≈ 00:34–00:50 App / browser screenWatch from here ↗ | Sample 00:44.000 | Contextual build dictation A voice-input waveform sits below existing trip information. | Close conversation crop keeps source context visible. | Show which existing information the new task uses. |
| Shot group 07 ≈ 00:50–00:54 App / browser screenWatch from here ↗ | Sample 00:52.000 | Private site request The submitted request specifies a private mobile-friendly trip hub and review before sharing. | Readable prompt followed by task response. | Preserve review and privacy constraints in the demo story. |
| Shot group 08 ≈ 00:54–01:00 App / browser screenWatch from here ↗ | Sample 00:58.000 | Site construction preview A side pane shows a preparing state while a preview image appears in the conversation. | Task and not-yet-ready artifact share the frame. | Distinguish a loading preview from a finished site. |
| Shot group 09 ≈ 01:00–01:06 People / environmentWatch from here ↗ | Sample 01:04.000 | Presenter bridge A short speaker segment precedes the revision. | Wide and close human views. | Use the talking head to frame the next change. |
| Shot group 10 ≈ 01:06–01:14 App / browser screenWatch from here ↗ | Sample 01:12.000 | Expense-tracker revision A follow-up asks the displayed expense tracker to split costs and accept receipts. | Composer close-up retains the current site beside it. | Keep the requested change tied to the actual result. |
| Shot group 11 ≈ 01:14–01:20 App / browser screenWatch from here ↗ | Sample 01:18.000 | Revised expense page The site shows expense totals, entries, and person-level balances. | Stable artifact pane with a readable result table. | Demonstrate the changed behavior with concrete state. |
| Shot group 12 ≈ 01:20–01:26 People / environmentWatch from here ↗ | Sample 01:24.000 | Sharing explanation The presenter returns before the sharing request. | Human bridge. | Separate a finished private artifact from a distribution action. |
| Shot group 13 ≈ 01:26–01:36 App / browser screenWatch from here ↗ | Sample 01:30.000 | Recipient-based sharing request The prompt asks to share with the trip participants using mail context. | Close composer then wider task response. | Show recipient selection and avoid implying unverified delivery. |
| Shot group 14 ≈ 01:36–01:54 People / environmentWatch from here ↗ | Sample 01:44.000 | Maintenance introduction The presenter explains a second site-maintenance use case. | Wide and close shots. | Use a chapter transition between unrelated sites. |
| Shot group 15 ≈ 01:54–02:08 App / browser screenWatch from here ↗ | Sample 02:06.000 | Recurring dashboard request A voice request becomes text asking for recurring updates from several sources. | Saved site card remains above the composer. | Keep maintenance instructions attached to the artifact they update. |
| Shot group 16 ≈ 02:08–02:12 App / browser screenWatch from here ↗ | Sample 02:10.000 | Site library The app's site list shows saved outputs and sharing controls. | Navigation returns to the management surface. | Show where outputs can be found after the demo. |
| Shot group 17 ≈ 02:12–02:18 People / environmentWatch from here ↗ | Sample 02:14.000 | Presenter ending The speaker closes the explanation. | Wide human finish. | Leave the closing performance to the supplied recording. |
| Shot group 18 ≈ 02:18–02:20 Title / identityWatch from here ↗ | Sample 02:20.000 | End identity A white identity ending closes the film. | Clean final card. | Use the presentation's own ending. |