Almost Timely News: 🗞️ How I Think About Building with AI (2026-02-15)

The distance to done is shrinking

Feb 15, 2026

Almost Timely News: 🗞️ How I Think About Building with AI (2026-02-15) :: View in Browser

The Big Plug

Two new things to try out this week:

1. Got a stuck AI project? Try out Katie’s new, free AI Readiness Assessment tool. A simple quiz to help predict project success.

2. Wonder how your website is seen by AI? Try my new, free AI View tool (limited to 10 URLs per day). It looks at your site and tells you what an AI crawler likely sees.

Content Authenticity Statement

95% of this week’s newsletter content was originated by me, the human. You’ll see outputs from Claude Code in the opening segment. Learn why this kind of disclosure is a good idea and might be required for anyone doing business in any capacity with the EU in the near future.

Watch This Newsletter On YouTube 📺

Click here for the video 📺 version of this newsletter on YouTube »

Click here for an MP3 audio 🎧 only version »

What’s On My Mind: How I Think About Building with AI

Last month, Hubspot cofounder Dharmesh Shah wrote this very hard-hitting LinkedIn post:

Here’s a quick tip on how to build an effective presence on LinkedIn. Too many people on LinkedIn are “performing” for their current (and future) followers. Instead of self-centered performing, focus on generous sharing. We all have something to share that will be helpful/useful to others. Things we are experts in or passionate about. What’s often even better is sharing mistakes we’ve made and lessons we’ve learned. Share, don’t perform and you’ll pull people in.

I loved this quote and thanks to the magic on the LinkedIn feed algorithms, I didn’t see it until last week. But it still hit. So in the spirit of sharing, let me share how I built an absolutely ridiculous thing recently for a conference so you can see what I do and how I do it. Take anything useful for yourself, leave the rest behind.

The Torrington Gopher Hole Museum

I was preparing for my keynote at the Tourism Industry Association of Alberta and wanted to showcase just how powerful AI is for even the smallest organization. But I needed an example of a very small place, the kind of place that doesn’t make headlines, that AI wouldn’t naturally recommend by itself. Ask ChatGPT or Claude where to go in Alberta and you’ll always get the high probability answers - Banff, Jasper, Calgary. And for good reason, they’re beautiful places. But they’re the places everyone else goes, so if you want a truly unique adventure, you’re probably not going to find it there.

No, the low probability places can only come from insider knowledge. So my first step was to find it. A while back, I wrote a content extraction tool that uses the Reddit developer API to extract the contents of subreddits, one at a time. You can’t scrape all of Reddit, nor should you, but you can absolutely dive deep on any one community. I fired up the tool and grabbed r/Alberta, r/Calgary, r/Edmonton, and a few other relevant communities. My software ingests the subreddit up to a specific number of days, then formats it for AI use by converting it to a machine-friendly language. My recommended default these days is YAML - although JSON is great and especially useful for structured table-like data (CSV to JSON is chefs kiss) YAML is WAY more efficient in terms of space taken up.

I loaded 150,000 conversations into NotebookLM and asked it a simple prompt, to find the off-the-beaten-path places that don’t make the top 10 lists for tourists, the rare places, the weird places. Places like the mining ghost town in Dorothy.

As an aside, this prompt template that is in Notebook LM for this that requests the frequency is a quality check of its own. For Notebook LM, which is based on Google Gemini, if you just say give me low frequency stuff, but you don’t ask it to try to infer what those frequencies are, you’re not going to get as good a result as spelling it out and giving it an actual template. So make sure that you do that.

Number 8 on the list caught my eye: the Torrington Gopher Hole Museum. It’s a museum in Torrington, Alberta, about an hour north of Calgary, and it has taxidermy stuffed gophers from the Alberta prairie dressed up in dioramas, scenes fo Alberta life. So weird. So wacky. I loved it. So I went to their website and it was… well, they’re doing the best they can with obviously very limited resources.

But this was a great candidate for showcasing what AI can do. Well-funded organizations can use AI to do cool stuff, but they could also afford to do cool stuff without it. A tiny operation that doesn’t have massive resources, rich donors, and robust cash flow is much more interesting to use as a case study because the before and after is much more stark.

Deciding What To Build

Now that I had an example of a great tourism-focused business, it was time to decide what to do. One of the perennial challenges of tourism-related businesses is seasonality. The Gopher Hole Museum is no exception; on their website, they say they’re closed for the season. That’s understandable - other than ski areas, Alberta’s tourism business gets quieter in the winters because the winters are often quite harsh.

But bills don’t stop just because business does. One of the key questions at the Tourism Advocacy Summit was how tourism businesses that are highly seasonal could become more like year-round businesses. It’s at this point where I bring out the ultimate agentic AI framework for planning and building: Katie Robbert’s Trust Insights 5P Framework. If you’re unfamiliar, it goes like this:

The 5Ps are Purpose, People, Process, Platform, and Performance.

Purpose - What is the question we’re trying to answer? What is the problem we’re trying to solve?
People - Who should you involve? Who needs to know about this?
Process - How will we answer this question, solve this problem? What are the specific methods, processes, techniques, and tactics involved?
Platform - What tools will we use, digital and analog?
Performance - How will we measure success? How do we know we solved the problem? How do we quantify success?

So rather than just rush right into building a better website, we stop and think. What’s the purpose? What’s the big picture purpose. The purpose, at least from my perspective, is to find a way to drive more year-round revenue for the Gopher Hole Museum. Any earnings above zero are a positive because off season, they earn no revenue.

Second, a static website improvement, even with nice design, isn’t going to help matters much. Yes, it can make the conversion experience better, but ultimately, AI is eating search. We see this most strongly in Google’s AI Overviews - they’re so rich and robust that the user needs to click through much less, which means in turn we get less traffic. If your digital presence is content that can easily be summarized by AI, then you’re not in a great place.

So those are the two dual mandates restricting me: whatever I come up with has to drive revenue year-round, and it has to be resistant to AI summarization.

There are additional constraints: whatever I come up with has to be lightweight. It’s evident from the website that a place like the Gopher Hole Museum does not have resources to devote to technology investments. Buying a server cluster or a cloud-hosted interactive platform isn’t in the cards. Whatever I come up with has to be lightweight and have as few dependencies as possible. And because they’re so resource constrained, it has to be zero cost, meaning no technologies that cost money on an ongoing basis other than what they have.

This is where I do start engaging with AI, in Claude Code. I ask questions and ask it to brainstorm some different ways we can make something interactive. I strongly recommend having the Superpowers plugin installed and active - its brainstorming skill is wonderful.

After providing it all the background material, it came up with 6 different ideas:

“Gopher Town 3D” — Retro FPS-style Explorer (your Wolfenstein idea, evolved)

Using a raycasting engine like
https://cdnjs.com
or a lightweight WebGL library like Three.js, we build a first-person exploration of a gopher-scale underground tunnel network that opens up into diorama rooms. You’re a gopher. The “town” is the museum. You waddle through tunnels, pop up into scenes — the beauty parlour, the pool hall, the curling rink. No violence. Instead, the “gameplay” is finding hidden objects, collecting tiny hats and props, and unlocking diorama scenes. Think Myst meets Wolfenstein meets a prairie
gopher hole.

“Diorama Builder” — Drag-and-Drop Creator

A Paper.js or Fabric.js powered scene builder where visitors create their OWN gopher dioramas. Pick a background (pool hall, fire station, church), dress up gophers from a wardrobe of tiny outfits, pose them, add props. Save and share your creation. A gallery wall of user-generated dioramas. This is inherently viral — people share their weird creations on social media.

“Gopher Hole Tycoon” — Museum Management Sim

A lightweight idle/tycoon game. You manage the Gopher Hole Museum itself — acquire new gophers, design dioramas, attract tourists, manage donations, survive winter. Could use Phaser.js for a 2D pixel-art vibe. Off-season visitors play this while dreaming of visiting for real.

“Underground” — A Gopher’s-Eye-View Walking Sim

An atmospheric, ambient exploration. You’re underground in the tunnel system. The world is rendered in earthy tones. You discover rooms where gophers are “living” their diorama lives — frozen in tableau. Almost like visiting a tiny civilization. Background audio of prairie wind, birds. Could use A-Frame (WebVR/WebXR) so it even works with VR headsets.

“Gopher Snap” — AR Photo Booth

Using AR.js or MindAR, visitors point their phone camera and gophers appear in their real world — on their desk, in their kitchen. Dress the AR gopher, pose it, take a photo. Share it. Off-season engagement machine.

“Escape the Gopher Hole” — Puzzle/Escape Room

A point-and-click escape room set inside a gopher tunnel. Solve puzzles themed around small-town life (fix the curling stone, find the RCMP badge, mix the right hair color at the beauty parlour). Each puzzle unlocks a new diorama to view. Could use Phaser.js or even vanilla JS with GSAP for animations.

You can see the ideas ranged from simple to totally out there - a 3D FPS gopher game. Of these, I knew that for a simple demo and something that would be thematically on brand for the Gopher Hole Museum, #2 would be the best fit, though any of them would be solid candidates.

The Build

Using Claude Code is like having a team of developers on standby, ready to answer the call. And like a team of developers, things will go well or poorly depending on how clear your project plan is. To ensure success, you need these ingredients at a bare minimum:

The current best practices for your environment. Are you building in Python? React? Rust? Something else? Whatever you’re building in, you should have a Deep Research project of the known best practices and most modern libraries for your environment. Without this, you’re relying on the internal training data of the model, which could be months or even years out of date. Take the time to look at your project overall and commission a deep research report almost like a technical requirements document for your project.
A full, complete product requirements document (PRD). Good PRDs have a ton of detail in them, like user stories, functional requirements, domain requirements, technical requirements, etc. and the more time you spend building this out, the better an outcome you’ll get. One of my tricks when I’m using Claude Code and building PRDs is to say, could a software project manager manage the entire project from this PRD? If not, keep adding detail until a software project manager could manage the entire project from this requirements document. If you use that particular trick, you will get phenomenal results.
An execution recipe. The execution recipe is basically the prompt to build the system. Unlike the PRD, this is the instructions to Claude itself about what it should be doing and substitute Claude for ChatGPT, Gemini, the coding model of your choice. The framework I use for these is the 5Ps, because nothing encapsulates the build instructions better. The real key are the bookends - purpose and performance - because they help the agentic AI decide what to do and know when it has succeeded.

If you’d like to see the full execution recipe, it’s at the end of the newsletter because it’s a couple of pages long.

If you just tell AI to do a good job, it has to infer what a good job means, and depending on the tool you’re using, that could be anything from working software to just reassuring words. If you tell AI exact requirements for what constitutes success, agentic systems can run in loops until they meet the success condition.

That’s the secret of what makes them so powerful - give them great instructions with clear, objective outcomes and they’ll just keep working until they hit the outcomes.

The Result

Here’s the rough timeline, which occurred during my flight. I started as we crossed into Manitoba and finished up by the time we were exiting Saskatchewan, about an hour, give or take.

Brainstorming: about 15 minutes, give or take. The airplane wifi wasn’t the best.
Deep research: via Google Gemini, done in about 15 minutes. I used the Trust Insights CASINO framework to get this right.
PRD: about 15 minutes. Lots of back and forth, lots of “are you sure this is the best choice?” and fact checking.
Software build: about 30 minutes. Once the execution recipe was done, I sent Claude Code out to get it done. It churned away for half an hour and notified me when it was all set.
QA and debugging: about 15 minutes. Because the instructions were so clear, QA didn’t take long.

You’ll note that the planning time took about the same amount of time as the execution time. That’s generally a good sign for an AI project - the more time you spend planning, the less time you typically spend in execution (especially debugging) because the plan is the blueprint for success. In general, a good rule of thumb is that you should always spend more time planning than executing for an AI project.

And if you’d like to see the proof of concept, you can visit it here.

The Takeaways

I closed my keynote with this:

The distance from idea to done keeps getting shorter with every generation of AI.

I look at AI in three levels, which I borrowed from product-market fit.

Done by you, done with you, done for you.

Done by you: when ChatGPT first rolled out three years ago, it was very capable, and we all saw the potential - but the reality is that we were copy paste robots for it. We’d paste things in, it would do things, and we’d copy the results out. We’re still the middleware there. That was good at the time, but inconvenient.

Done with you: These were natural evolutions - GPTs, Gems, Claude Projects. They have some automations built in to help get things done faster, but they still had a lot of interaction required of us.

Done for you: This is where we are today. This is agentic AI, where you give it the idea and it just goes, and minutes to hours later, it comes back with a result. And if your guidance was good and your plans were good, that result is a winner.

There’s a fourth level, a level we’re starting to peek at now with tools like OpenClaw et. al.: done without you. As agents get ever more powerful and more integrated, as they continue to evolve their capabilities of reasoning and judgement - and today’s state of the art models do simulate judgement very well - we’ll be able to hand more off to them. For the Torrington Gopher Hole Museum, I had to do a lot of the decision-making and prep all the materials.

Those tasks are interim tasks. The components exist today for the tools to do that without me, but the connective tissue to weave them all together is still being built. It will happen, and probably in months, rather than years. But that’s where things are going.

Finally, I know someone’s going to read or watch or listen and say, but I don’t want to code. I don’t want to be involved in coding. How is this relevant to me? It is relevant to you because the same process of deep research, extensive planning, and then a build document works for any task in any domain, not just coding.

For example, let’s say you wanted to work on your 2026 marketing strategy. You would sit down and s review with the AI tool of your choice. “Here’s what we’re doing right now and here’s the results we’re getting or are not getting”. You would then say, “let’s do some deep research to figure out what’s the state of the market right now”. Using the Trust Insights CASINO prompt framework will get you that deep research and have it be very high quality.

You would then go on to say, “let’s develop a requirements document for what a great marketing strategy should be based on the deep research, based on the information provided”, the tools would go ahead and do that. And finally you would say “let’s build a build recipe based on the Trust Insights 5P framework to build the strategy, the tactics, the execution, and the measurement plans for bringing your marketing strategy to life”.

Once you do that and you have those three critical components, you hand it off to an agentic system like Claude Code with the right plugins and stuff installed, and it will just go and do it and come back to you with some results for you to review.

It isn’t code, it isn’t Python, it isn’t Rust or Java or any of the computer languages that you might think a tool like Claude Code would need. Under the hood, all these agentic AI systems are still language models, which means that they can do language model tasks even if they’re not explicitly coding tasks. And that is the key to making these things really work for you. Rather than interactively having to sit there and talk with it back and forth every quarter, once you develop those components and that workflow, you then build the recipe and say, just go do it and come back and review it later on.

I hope this walkthrough of a case study I did shows you how I think about these tools, how I use them, and gave you some ideas for your own work that will help you get more out of the AI you’re already paying for.

How Was This Issue?

Rate this week’s newsletter issue with a single click/tap. Your feedback over time helps me figure out what content to create for you.

Here’s The Unsubscribe

It took me a while to find a convenient way to link it up, but here’s how to get to the unsubscribe.

[](https://almosttimely.substack.com/action/disable_email?utm_source=almost-timely-newsletter&utm_medium=email&utm_campaign=almost-timely-2024- 12-28)

If you don’t see anything, here’s the text link to copy and paste:

https://almosttimely.substack.com/action/disable_email

Share With a Friend or Colleague

Please share this newsletter with two other people.

Send this URL to your friends/colleagues:

https://www.christopherspenn.com/newsletter

For enrolled subscribers on Substack, there are referral rewards if you refer 100, 200, or 300 other readers. Visit the Leaderboard here.

ICYMI: In Case You Missed It

Here’s content from the last week in case things fell through the cracks:

On The Tubes

Here’s what debuted on my YouTube channel this week:

Skill Up With Classes

These are just a few of the classes I have available over at the Trust Insights website that you can take.

Premium

Free

Advertisement: New AI Book!

In Almost Timeless, generative AI expert Christopher Penn provides the definitive playbook. Drawing on 18 months of in-the-trenches work and insights from thousands of real-world questions, Penn distills the noise into 48 foundational principles—durable mental models that give you a more permanent, strategic understanding of this transformative technology.

In this book, you will learn to:

Master the Machine: Finally understand why AI acts like a “brilliant but forgetful intern” and turn its quirks into your greatest strength.
Deploy the Playbook: Move from theory to practice with frameworks for driving real, measurable business value with AI.
Secure Your Human Advantage: Discover why your creativity, judgment, and ethics are more valuable than ever—and how to leverage them to win.

Stop feeling overwhelmed. Start leading with confidence. By the time you finish Almost Timeless, you won’t just know what to do; you will understand why you are doing it. And in an age of constant change, that understanding is the only real competitive advantage.

👉 Order your copy of Almost Timeless: 48 Foundation Principles of Generative AI today!

Get Back To Work!

Folks who post jobs in the free Analytics for Marketers Slack community may have those jobs shared here, too. If you’re looking for work, check out these recent open positions, and check out the Slack group for the comprehensive list.

Advertisement: New AI Strategy Course

Almost every AI course is the same, conceptually. They show you how to prompt, how to set things up - the cooking equivalents of how to use a blender or how to cook a dish. These are foundation skills, and while they’re good and important, you know what’s missing from all of them? How to run a restaurant successfully. That’s the big miss. We’re so focused on the how that we completely lose sight of the why and the what.

This is why our new course, the AI-Ready Strategist, is different. It’s not a collection of prompting techniques or a set of recipes; it’s about why we do things with AI. AI strategy has nothing to do with prompting or the shiny object of the day — it has everything to do with extracting value from AI and avoiding preventable disasters. This course is for everyone in a decision-making capacity because it answers the questions almost every AI hype artist ignores: Why are you even considering AI in the first place? What will you do with it? If your AI strategy is the equivalent of obsessing over blenders while your steakhouse goes out of business, this is the course to get you back on course.

👉 Take the course now!

How to Stay in Touch

Let’s make sure we’re connected in the places it suits you best. Here’s where you can find different content:

My blog - daily videos, blog posts, and podcast episodes
My YouTube channel - daily videos, conference talks, and all things video
My company, Trust Insights - marketing analytics help
My podcast, Marketing over Coffee - weekly episodes of what’s worth noting in marketing
My second podcast, In-Ear Insights - the Trust Insights weekly podcast focused on data and analytics
On Bluesky - random personal stuff and chaos
On LinkedIn - daily videos and news
On Instagram - personal photos and travels
My free Slack discussion forum, Analytics for Marketers - open conversations about marketing and analytics

Listen to my theme song as a new single:

Advertisement: Ukraine 🇺🇦 Humanitarian Fund

The war to free Ukraine continues. If you’d like to support humanitarian efforts in Ukraine, the Ukrainian government has set up a special portal, United24, to help make contributing easy. The effort to free Ukraine from Russia’s illegal invasion needs your ongoing support.

👉 Donate today to the Ukraine Humanitarian Relief Fund »

Events I’ll Be At

Here are the public events where I’m speaking and attending. Say hi if you’re at an event also:

Joist.ai Basics of GEO, February 2026
SMPS AI Conference, November 2026

There are also private events that aren’t open to the public.

If you’re an event organizer, let me help your event shine. Visit my speaking page for more details.

Can’t be at an event? Stop by my private Slack group instead, Analytics for Marketers.

Required Disclosures

Events with links have purchased sponsorships in this newsletter and as a result, I receive direct financial compensation for promoting them.

Advertisements in this newsletter have paid to be promoted, and as a result, I receive direct financial compensation for promoting them.

My company, Trust Insights, maintains business partnerships with companies including, but not limited to, IBM, Cisco Systems, Amazon, Talkwalker, MarketingProfs, MarketMuse, Agorapulse, Hubspot, Informa, Demandbase, The Marketing AI Institute, and others. While links shared from partners are not explicit endorsements, nor do they directly financially benefit Trust Insights, a commercial relationship exists for which Trust Insights may receive indirect financial benefit, and thus I may receive indirect financial benefit from them as well.

Thank You

Thanks for subscribing and reading this far. I appreciate it. As always, thank you for your support, your attention, and your kindness.

Please share this newsletter with two other people.

See you next week,

Christopher S. Penn

Appendix: The Build Recipe

Project: Interactive Diorama Builder for the Torrington Gopher Hole Museum
Framework: Trust Insights 5P Framework
Date: February 2026

1. PURPOSE

Core question: Can we deliver a fully functional, error-free, browser-based Gopher Diorama Builder that meets the complete specification and runs without a backend?

Business context (for reference — not in scope for this build): The Torrington Gopher Hole Museum needs year-round digital engagement and revenue. The builder is the chosen solution. Business outcomes like social virality, revenue generation, and visitor conversion are downstream concerns outside the developer’s control. This recipe covers only the software build.

Technical constraints governing the build:

Zero ongoing cost. No SaaS subscriptions, cloud hosting, or server infrastructure. Everything runs client-side.
Lightweight and dependency-free. No build tools, no backend servers. All libraries loaded via CDN. Must function when opened directly from file:// protocol.
Low maintenance. No deployments, databases, or software updates required by museum staff.
Interactive, not static. The deliverable is a working application, not a content website.

The deliverable: A single-page browser application where users select backgrounds, drag in cartoon gophers, dress them in outfits, add props, arrange scenes on a canvas, save/load their work, export as PNG, share via URL, browse a gallery, and access a simulated print-on-demand flow. It must run error-free in Chrome, Firefox, and Safari at desktop, tablet, and mobile breakpoints.

2. PEOPLE

Build Team

RoleResponsibilityDeveloper (Builder)Architect, code, test, and deliver the complete application with 100% test coverageDesigner / IllustratorCreate or approve the SVG asset library (gophers, backgrounds, outfits, props) — can be the same person as the developer if assets are generated programmatically

Reviewers / Acceptors

RoleResponsibilityMuseum Staff / BoardReview and approve creative representation of gophers and dioramas; accept final deliverableQA ReviewerVerify all tests pass, confirm 100% coverage, run through verification checklist

3. PROCESS

Phase 1: Asset Creation (Batch 1 — All Independent, Run in Parallel)

These four workstreams have no dependencies on each other and can be executed simultaneously.

A. SVG Asset Library

Create all visual assets programmatically as inline SVG:

8 background scenes (800×600 viewBox): curling rink, beauty parlour, pool hall, fire station, church, prairie, main street, hockey rink
6 gopher poses: standing, sitting, waving, running, dancing, thinking
10 outfit overlays: RCMP uniform, firefighter, wedding dress, hockey jersey, priest robes, cowboy, chef, farmer, doctor, curler
12 props: curling stone, pool cue, hairdryer, fire hose, hockey stick, book, guitar, lasso, wagon, broom, coffee mug, camera

Art direction: Illustrated/cartoon style. Warm brown fur (#A0522D base, #D2B48C belly) for gophers. Round bodies, big eyes, buck teeth. Backgrounds use flat illustration with 3–4 depth layers and a warm prairie palette.

B. CSS Stylesheet (css/styles.css)

Prairie-themed design system:

Background: #F5E6D3 (warm parchment)
Primary: #8B6914 (golden wheat)
Secondary: #4A7C59 (prairie green)
Accent: #C73E1D (barn red)
Dark: #3D2B1F (rich earth brown)
Canvas: #E8DCC8 (light canvas)

Typography: “Fredoka” for headings via Google Fonts CDN, system sans-serif for body. Asset panel thumbnails get rounded corners and hover scaling via GSAP. Canvas area gets an inset shadow to simulate a physical shadow box frame. Toolbar uses subtle wood-grain CSS gradients.

C. Sharing/Export Module (js/sharing.js)

Functions for PNG download, share URL generation (JSON → LZ-String compress → URL param), Web Share API integration with clipboard fallback, and a simulated print-on-demand order modal with pricing (postcard $4.99, magnet $6.99, framed mini print $12.99).

D. Gallery Module (js/gallery.js)

Loads curated sample dioramas from a static JSON file. Renders a Bootstrap card grid with polaroid-style thumbnails. Supports “Remix” (loads a gallery scene into the builder for editing) and full-size preview modal.

Phase 2: Core Engine (Batch 2 — Depends on Batch 1 Asset Paths)

E. Diorama Engine (js/diorama-engine.js)

Konva.js-powered canvas engine managing three layers:

backgroundLayer — single background image, non-draggable
objectLayer — all gophers, outfits, props (draggable, selectable, transformable)
uiLayer — selection handles, alignment grid, guides

Core capabilities: add/remove/duplicate objects, Transformer handles for resize/rotate, z-ordering (bring forward/send backward), undo/redo stack (50 states max, full Konva JSON snapshots), scene serialization (toJSON/fromJSON), PNG export at 2x resolution, responsive scaling via fitToContainer().

F. Main App Logic (js/app.js)

Alpine.js data store managing all UI state: active tab selection, builder/gallery/myDioramas view switching, first-time tutorial overlay, properties panel binding (opacity, flip H/V, lock), saved dioramas via localforage, and share link detection on page load (?d= parameter).

Phase 3: Assembly (Batch 3 — Depends on Batch 2)

G. index.html — Main Page

Single-page app with three-column layout: asset panel (left, tabbed: backgrounds/gophers/outfits/props), Konva canvas (center, 800×600), properties panel (right). Toolbar across top (undo, redo, delete, duplicate, z-order, zoom, grid). Bottom bar with save, download, share, order print, gallery, visit museum, and donate buttons.

Responsive behavior: tablet collapses left panel to icon rail; mobile uses bottom sheet drawer for assets and floating action buttons for toolbar.

H. Gallery Data (data/gallery.json)

4–6 pre-populated sample dioramas created by placing assets programmatically. Each entry includes title, author, base64 thumbnail, and full Konva scene JSON.

Phase 4: Integration & Polish (Batch 4)

I. Welcome Tutorial

4-step GSAP-animated overlay: welcome with waving gopher, “pick a scene” arrow, “add gophers and dress them up” arrow, “share your creation” arrow. Auto-advances every 3 seconds or on click. Skip button in corner. Completion stored in localStorage.

J. Testing & Verification

Run through the full verification checklist and confirm 100% test coverage (see Performance section below).

4. PLATFORM

Tech Stack (All via CDN — Zero Build Tools, Zero Cost)

LibraryVersionPurposeCDN URLKonva.js10.0.2Canvas rendering, drag-drop, layers, Transformer handles, JSON serializationcdnjs.cloudflare.com/ajax/libs/konva/10.0.2/konva.min.jsAlpine.js3.15.0Reactive UI for panels/toolbars (15KB, no build step)cdnjs.cloudflare.com/ajax/libs/alpinejs/3.15.0/cdn.min.jsGSAP3.13.0Animations, transitions, MorphSVG, DrawSVG (now 100% free incl. all plugins)cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.jslocalforage1.10.0Client-side IndexedDB storage with localStorage fallbackcdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.jsLZ-String1.5.0URL compression for shareable linkscdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.jsBootstrap5.3.8CSS layout frameworkcdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.cssBootstrap Icons1.11.0Icon set for toolbar buttonscdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css

Why Konva.js over alternatives (evaluated Feb 2026):

PixiJS v8 (8.13.2) — faster rendering via WebGPU but lacks native drag-drop, Transformer handles, and scene serialization. Would require building all editor UX from scratch.
Weave.js (Jan 2026, Inditex) — built on Konva.js but requires React and targets real-time collaboration. Overkill for single-user builder with no backend.
Fabric.js — capable but slower at scale (30–45fps vs Konva’s 60fps at 1000+ objects).

Hosting: Any static hosting — museum’s existing web host, GitHub Pages, or even direct file:// access. No server required. Print-on-demand integration (Gelato API) is a future concern outside this build scope.

File Structure

output/interactive/
├── index.html
├── css/
│   └── styles.css
├── js/
│   ├── app.js
│   ├── diorama-engine.js
│   ├── gallery.js
│   └── sharing.js
├── assets/
│   ├── backgrounds/    (8 SVGs)
│   ├── gophers/        (6 SVGs)
│   ├── outfits/        (10 SVGs)
│   └── props/          (12 SVGs)
└── data/
    └── gallery.json

5. PERFORMANCE

Performance for this build is defined strictly as: does the software work, is it error-free, and is it fully tested?

Testing Requirements (Non-Negotiable)

RequirementTargetPass/FailUnit tests100% pass rateAny failure = build failureEnd-to-end (E2E) tests100% pass rateAny failure = build failureTest coverage100% code coverageAnything less than 100% = build failureRuntime errorsZero errors in browser consoleAny uncaught error = build failure

All modules (diorama-engine.js, app.js, sharing.js, gallery.js) must have complete unit test suites covering every function, branch, and edge case. E2E tests must validate every user workflow end-to-end: asset loading → drag-drop → property editing → save/load → export → share → gallery browse → remix. No code ships without 100% coverage confirmed.

Functional Verification Checklist

Every item must pass. Any failure is a build failure.

Asset Loading: All 36 SVGs (8 backgrounds, 6 gophers, 10 outfits, 12 props) render correctly in Chrome, Firefox, and Safari
Drag-Drop: Objects can be added from the asset panel, moved, resized, and rotated on canvas
Z-Ordering: Bring forward / send backward changes visual stacking order correctly
Undo/Redo: Actions can be undone and redone (test 5+ actions deep)
Save/Load: Save a diorama, refresh page, load it back — scene is identical
PNG Export: Downloaded PNG matches canvas at 2x resolution
Share URL: Generate a share link, open in new tab — scene loads correctly from the ?d= parameter
Gallery: Gallery view renders sample dioramas from gallery.json; “Remix” loads scene into builder
Responsive: Layout renders correctly at 1440px (desktop), 768px (tablet), and 375px (mobile) widths
Welcome Tutorial: Shows on first visit, does not show on second visit, “Skip” dismisses permanently
Canvas Performance: Smooth 60fps with 15+ objects on canvas (no dropped frames, no lag on drag)
Print Modal: “Order a Print” button opens modal displaying three products with pricing
External Links: “Visit Gift Shop,” “Donate,” and “Plan Your Visit” buttons open correct URLs
Error-Free Runtime: Zero errors or warnings in browser console during all of the above operations
file:// Protocol: Application loads and functions fully when opened via file:// (no server required)

Bottom Line

The build succeeds when every feature works, every test passes, and there are zero runtime errors. 100% unit test pass rate, 100% E2E test pass rate, 100% code coverage, and a clean browser console across Chrome, Firefox, and Safari at all three breakpoints. If any of those conditions are not met, the build has failed.

Discussion about this post

Ready for more?