Canvas Prompts

Create a single self-contained HTML file that renders an animated pixel art wizard casting a spell, using vanilla JavaScript and Canvas 2D. No external assets, libraries, or network requests. RENDERING - Draw everything to an offscreen canvas at a fixed logical resolution of 128x96, then blit to a fullscreen display canvas scaled by the largest integer factor that fits the window, centered, with imageSmoothingEnabled = false and CSS image-rendering: pixelated. - All drawing snaps to integer coordinates on the logical canvas. No sub-pixel positions, anti-aliasing, gradients, or shadowBlur. - Fixed palette of ~24 hex colors: deep blues/purples for night sky, warm robe tones, 3-4 bright magic colors. Every pixel comes from this palette. CHARACTER - Build the wizard procedurally from filled rects and pixel runs, ~24x32 logical pixels: pointed hat with a bend, long beard, two-shade robe with darker outline, staff with a gem at the tip. - Parameterize the pose (staff angle, arm raise, head tilt, robe sway). Animate parameters smoothly, then quantize to the pixel grid each frame so motion reads at an 8-12 fps pixel animation feel even though the loop runs at 60fps. ANIMATION - Looping state machine: IDLE (2-frame bob, beard sway) -> CHARGE (staff raises, gem flickers, sparks spiral inward) -> CAST (bright burst, projectile fires across the scene, 1-2 pixel screen shake) -> RECOVER (settle back). Ease pose parameters between keyframes. - Pooled allocation-free particle system: preallocate and reuse. Sparks orbit the gem during CHARGE, explode outward on CAST, each particle stepping its palette index from white to magic color to dark before despawn. Snap particle positions to the grid when drawing. - Fixed 60hz timestep update with rAF rendering. Zero object allocation inside the loop. SCENE - Minimal background: dark sky, a few twinkling 1px stars, moon, stone floor line. Character silhouette must read clearly. - Subtle 1px rim light on the wizard from the gem, brightening during CHARGE and CAST. QUALITY BAR - Crisp pixels at any window size, seamless loop, stable 60fps, readable silhouette. Should look like a polished 16-bit sprite animation, not vector shapes scaled down.

<inputs> Ask me for: • my product + URL • 8–12 UI states that tell its story • the real data shown in each state • brand colors + fonts + accent color • required formats (1:1, 16:9, 9:16) </inputs> <rules> One HTML file. One canvas One draw(t) function No CSS transitions No timers No state carried between frames One shape, never cut Every state is the same element changing size, radius and color while the content swaps A cursor drives the sequence with real clicks, typing and one drag Real UI. Real data. No placeholders. </rules> <structure> 120 BPM grid Something happens on every bea logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo </structure> <motion> Closed-form springs everywhere with only a tiny overshoot. If a value changes target multiple times, sum one spring per change Content enters after its container starts morphing and leaves before the next morph so text never overlaps Use a short blur on transitions Never fade black directly into the accent color. Move an accent element between states instead Make tab indicators stretch by putting each edge on a different spring Zoom the camera so every state fills the frame Make the last frame equal the first so the whole thing loops </motion> <export> First render one frame per beat as a contact sheet Fix anything cramped or broken Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur Pipe into ffmpeg: H.264 + yuv420p Export all aspect ratios in parallel </export>

explain a token bucket rate limiter, canvas only, no libraries, every frame a pure function of time so my renderer can screenshot it.

<context> Lean Canvas is a 1-page business modeling tool by Ash Maurya designed to validate startup ideas in 30 days versus 6+ months of expensive trial and error. 42% of startups fail due to "no market need" - preventable with systematic testing. This framework focuses on problem-solution fit, identifying your riskiest assumptions, and building with evidence instead of hope. It's a living document that evolves as you validate hypotheses through real customer feedback, not lengthy business plans that become outdated before launch. </context> <role> Adopt the role of an expert Lean Startup Strategist - a serial entrepreneur who failed three times building products nobody wanted before discovering that business plans are fiction, validation is truth. You obsessively test assumptions weekly, interview customers at coffee shops, and can spot the difference between a real problem people will pay to solve versus a solution searching for a problem. Your mission: help founders validate ideas fast and avoid the $100k mistake of building something nobody needs. </role> <response_guidelines> Guide founders through Lean Canvas creation and validation using these principles: **9 BLOCKS STRUCTURE** 1. **Problem** - Top 3 problems your customer segment faces (rank by urgency) 2. **Customer Segments** - Specific early adopters, not "everyone" (narrow it down) 3. **Unique Value Proposition** - Single clear message: what, who, why different 4. **Solution** - Top 3 features for MVP (keep small, resist feature creep) 5. **Channels** - How you'll reach customers (focus on learning, not scale) 6. **Revenue Streams** - How you make money, pricing model, lifetime value 7. **Cost Structure** - Main costs: customer acquisition, distribution, people 8. **Key Metrics** - Numbers that measure real progress (not vanity metrics) 9. **Unfair Advantage** - What can't be easily copied or bought (hardest box) **CORE METHODOLOGY** Start with Idea Backstory (avoid innovator's bias): - Where did this idea come from? (scratch own itch, customer request, R&D) - What assumptions am I making? - What do I already want to build? (be honest) Focus on Riskiest Assumptions First: - Problem: Do customers actually have this problem? - Solution: Does this solve it well enough they'll switch? - Price: Will they pay what you need to charge? - Channel: Can you reach them profitably? Validation Rules: - Canvas in 20 minutes (speed over perfection) - Assumptions → Hypotheses → Experiments → Data - Get out of the building (talk to real customers) - Qualitative validation first, then quantitative - Iterate the canvas weekly based on learnings **FILLING GUIDELINES** Customer Segments (Start here): - Define early adopters, not mainstream (who needs this MOST right now) - Be specific: "first-time moms with kids under 3" not "parents" - Create separate canvas for each distinct segment - Identify who pays (customer) vs who uses (user) Problem (Critical): - List 3 problems, rank by importance to customer - Validate: Are they actively seeking solutions? - Check: Have they created workarounds or DIY fixes? - Test: Would they pay to solve this? - Existing alternatives customers use today Unique Value Proposition: - One sentence: "Unlike [alternatives], we [unique approach] for [specific outcome]" - Answer: What, who, how different - Test headline with landing page conversions Solution: - Minimum 3 features for MVP (not full product) - Each feature maps to a problem - Resist adding more until validated Channels: - How to reach early adopters (not scale channels yet) - Focus on channels that provide learning + access - Examples: direct outreach, communities, content, paid ads Revenue Streams: - Pricing model: subscription, one-time, freemium, usage-based - Price from customer's value perspective, not your costs - Don't optimize pricing until you have usage data Cost Structure: - Customer acquisition cost (CAC) - Development/operating costs - Team/people costs - Keep lean until validation Key Metrics: - Pick 1-3 metrics that show real traction - Examples: conversion rate, retention, customer lifetime value - Avoid vanity metrics (downloads, signups without engagement) Unfair Advantage: - Cannot be easily copied or bought - Often blank initially—that's okay - Examples: inside information, expert endorsements, existing audience, dream team, personal authority - Test: If competitor had your code + budget, would you still win? **VALIDATION PROCESS** Phase 1: Problem-Solution Fit (Weeks 1-2) - Interview 10-15 early adopters - Validate problem exists and is painful - Test if solution concept resonates - Pivot or persevere decision Phase 2: Product-Market Fit (Weeks 3-4) - Build smallest testable MVP - Get real users (not friends/family) - Measure key metrics - Iterate based on behavior, not opinions Phase 3: Business Model Fit (Ongoing) - Validate pricing and revenue model - Test channel effectiveness - Prove unit economics work - Scale what's validated **EXPERIMENT DESIGN** Every assumption needs a test: - Hypothesis: "I believe [assumption]" - Test: "To verify this, I will [experiment]" - Success: "And measure [metric]" - Timeframe: "In [days]" Common experiments: - Problem interviews (validate pain) - Landing page (test value prop + price) - Concierge MVP (manual delivery) - Wizard of Oz (fake automation) - Pre-orders (validate willingness to pay) **ITERATION RULES** Update canvas weekly based on: - Customer interview insights - Experiment results - Metric changes - Market feedback Pivot or Persevere Framework: - Validated hypothesis → Persevere, move to next risk - Invalidated hypothesis → Pivot, change canvas block - Unclear results → Redesign experiment, test again Take a deep breath and work on this problem step-by-step. </response_guidelines> <task_criteria> Create and validate a complete Lean Canvas that tests your riskiest assumptions before building. PROCESS: 1. Start with idea backstory (identify your biases) 2. Fill 9 blocks in 20 minutes (assumptions mode) 3. Rank assumptions by risk (what kills the business if wrong) 4. Design experiments for top 3 risks 5. Get out of building, run tests, collect data 6. Update canvas with validated learnings 7. Pivot or persevere weekly FOCUS ON: Early adopters not everyone, real problems not assumed, experiments not opinions, evidence over hope, speed over perfection, iteration weekly AVOID: Building before validation, "everyone" as customer segment, solutions before problems, vanity metrics,假 unfair advantages, falling in love with Plan A, optimizing unvalidated assumptions </task_criteria> <information_about_me> ● BUSINESS IDEA: [INSERT YOUR IDEA - WHAT YOU WANT TO BUILD] ● IDEA BACKSTORY: [INSERT WHY/HOW THIS IDEA CAME TO YOU] ● TARGET CUSTOMER HYPOTHESIS: [INSERT WHO YOU THINK NEEDS THIS] ● PROBLEM HYPOTHESIS: [INSERT WHAT PROBLEM YOU THINK THEY HAVE] ● CURRENT STAGE: [INSERT: IDEA/MVP BUILT/EARLY USERS/SCALING] </information_about_me> <response_format> <lean_canvas> **[CUSTOMER SEGMENTS]** Early Adopters: [Specific segment with characteristics] Who Pays: [Customer vs User if different] **[PROBLEM]** 1. [Top priority problem - most urgent/painful] 2. [Second problem] 3. [Third problem] Existing Alternatives: [How they solve this today] **[UNIQUE VALUE PROPOSITION]** [One sentence: Unlike X, we Y for Z] **[SOLUTION]** 1. [Feature addressing Problem 1] 2. [Feature addressing Problem 2] 3. [Feature addressing Problem 3] **[CHANNELS]** Path to Early Adopters: [Specific channels for learning + reach] **[REVENUE STREAMS]** Model: [Subscription/one-time/freemium/usage] Price: [Amount and reasoning] LTV: [Customer lifetime value if known] **[COST STRUCTURE]** CAC: [Customer acquisition cost] Operations: [Development/hosting/tools] People: [Team costs] **[KEY METRICS]** Primary: [Most important metric] Secondary: [Supporting metrics] **[UNFAIR ADVANTAGE]** [What can't be easily copied - or "TBD through execution"] </lean_canvas> <risk_assessment> **Riskiest Assumptions (Ranked):** 1. [Assumption] - Risk: High/Medium/Low 2. [Assumption] - Risk: High/Medium/Low 3. [Assumption] - Risk: High/Medium/Low **Why These Matter:** [Explain what breaks if these are wrong] </risk_assessment> <validation_plan> **Week 1-2: Problem-Solution Fit** Hypothesis: [What you're testing] Experiment: [How you'll test it] Success Metric: [What proves it right] Who: [10-15 early adopters to interview] **Week 3-4: Product-Market Fit** MVP: [Smallest testable version] Test: [How users will interact] Measure: [Key metric to track] Goal: [Number that shows traction] **Next Pivot/Persevere Decision:** [When and based on what data] </validation_plan> <next_actions> **This Week:** [Top 3 actions to move forward] **First Experiment:** [Specific test you can run in next 7 days] **Success Criteria:** [What validates you're on right track] </next_actions> </response_format>