Render a canvas art image or animation from HTML

Renders a self-contained HTML canvas at exact pixel dimensions and returns a permanent public URL — for social posts, story graphics, quote cards, and link preview art. Costs 0.1 credits per call. Pass animated=true to record the canvas as a looping MP4 instead of a still PNG (animate with infinite CSS keyframes); that returns videoId and an MP4 url, and costs 3 credits. Author the HTML to these design guidelines: ## What You Are Making A canvas is a piece of visual art, not a document. Museum-quality, magazine-quality — never cartoony, never clip-art, never a slide. Before writing any HTML, decide a design direction in one sentence (e.g. "Swiss formalism: one monumental word, hard grid, red/black/paper" or "quiet editorial: thin serif, vast negative space, one photograph"). Every choice then serves that direction. ## Brand Style (check first) - Before choosing a direction, check whether the company has a brand kit saved in the content engine (GET /brand-kits — brand_kit_listBrandKits on the platform API/MCP). Do this BEFORE the first render, not after. - If a brand kit exists, its `imageStylePrompt` is the company's established visual style (palette, mood, typography feel, photographic treatment); its `images` list holds brand assets (logos, product shots, approved photography) with public URLs; and its `webArtifacts` holds the primary `favicon` and `logo` (each with a public `url`). Treat these as the source of truth: derive the palette and type choices from the style prompt, and embed brand assets by their exact URL instead of stock or AI-generated stand-ins when a suitable one exists. Never alter, recolor, or distort a logo. - If no brand kit exists, or the session already supplies brand context in its instructions, skip the lookup and design from the brief. ## Canvas Setup (exact rules) - Output one complete standalone HTML document. No external CSS/JS files; inline a `<style>` block. Plain CSS preferred, but these shared platform libraries may be loaded from their CDNs: - Tailwind CSS: `<script src="https://cdn.tailwindcss.com"></script>` — utility classes; no build step - Lucide Icons: `<script src="https://unpkg.com/lucide@1.33.0/dist/umd/lucide.min.js"></script>` — place `<i data-lucide="arrow-right"></i>`, then call `lucide.createIcons();` after the last icon - Google Fonts: `<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">` — pick faces that match the brand - Size the canvas EXACTLY to the chosen format: `html,body{margin:0;padding:0}` and `body{width:<W>px;height:<H>px;overflow:hidden;position:relative}` - Named formats include: square 1080x1080 (feed), portrait 1080x1350 (feed, default), story 1080x1920 (Stories/Reels), landscape 1200x630 (link previews), slide 1920x1080 (16:9 presentation slide background — decorative art only, no text; editable text is layered on later), plus profile covers (linkedin_banner, twitter_header, facebook_cover), youtube_thumb, email_header, print pages (a4_portrait, a4_landscape, letter_portrait) and business_card. When none fits, an exact custom width/height (200-2160px each) can be supplied instead — size the body to whatever exact dimensions the session gives you. - A canvas is rendered one of two ways, and you are told which one this session wants: - STILL (default): the canvas is photographed the instant it loads. Design it static — no animations or transitions, since only the first frame is ever seen. - ANIMATED: the canvas is recorded to a short MP4. Follow the animation rules below. ## Typography (the heart of the canvas) - Google Fonts only, loaded via `<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">`. - Choose from this curated library — at most TWO fonts per canvas: - Monumental display: Boldonse, Big Shoulders, Erica One, Archivo Black, Bebas Neue - Elegant serif: Gloock, Italiana, Young Serif, Instrument Serif, Playfair Display, Libre Baskerville - Modern sans: Bricolage Grotesque, Outfit, Work Sans, Instrument Sans, Space Grotesk - Editorial body serif: Lora, Crimson Pro, IBM Plex Serif - Technical mono: JetBrains Mono, IBM Plex Mono, DM Mono, Tektur, Jura - Retro pixel: Silkscreen, Pixelify Sans - Handwritten: Nothing You Could Do, Smooch Sans; thin deco: Poiret One - Text is minimal and visual-first: usually one dominant word or short phrase plus tiny supporting labels. Rarely more than a dozen words on the whole canvas. - Make the hero text HUGE — roughly 10-25% of the canvas height. Uppercase display type wants letter-spacing (0.02-0.15em); tiny labels want wide tracking (0.2-0.4em). - Line-height on stacked display lines: some display fonts draw far taller than their em box and collide when stacked (Boldonse needs line-height ~1.3). Use 1.2-1.3 for multi-line display type and only go tighter for fonts you know sit inside their box. - Contrast in scale is the composition: one enormous element, a few whisper-small ones. Nothing in between. ## Icons (Lucide) - When the design calls for an icon — a directional arrow, a play glyph, a small functional mark next to a label — use Lucide, never emoji and never clip-art. - Load it once, at the END of the body, then render the icons: `<script src="https://unpkg.com/lucide@1.33.0/dist/umd/lucide.min.js"></script>` followed by `<script>lucide.createIcons();</script>` - Place an icon with `<i data-lucide="arrow-right"></i>`. Size and color it through CSS on the element — Lucide SVGs inherit `currentColor` and take `width`/`height`: `i[data-lucide]{width:64px;height:64px;stroke-width:1.5}` (the stroke weight matters as much as the size — hairline strokes read as refined, thick ones as cartoonish). - Use real Lucide names (arrow-right, arrow-up-right, sparkles, zap, check, star, play, quote, trending-up, circle-dot). A misspelled name renders nothing at all. - Icons are accents, not the subject: one or two per canvas, small against the hero type. An icon never substitutes for a real design idea. ## Animation (ANIMATED canvases only) Only when the session asks for an animated canvas. A still canvas must have no animation at all — it is photographed on the first frame. - Animate with CSS `@keyframes` on the elements themselves. The recording seeks the page's animation timeline frame by frame, so what is recorded is exactly your CSS timeline. - Every animation MUST be `infinite` and MUST tile seamlessly: the state at the end of one iteration has to match the state at the start, or the loop visibly jumps. The cleanest way is a single cycle that returns home (`0%` and `100%` identical). - Give the whole piece ONE shared cycle length — set every animation to the same `animation-duration` (or an exact divisor of it, e.g. 2s inside an 8s piece) so the composition repeats as a whole rather than drifting out of phase. - Stagger with `animation-delay` (negative delays start an element mid-cycle), never by giving elements unrelated durations. - Animate `transform` and `opacity` above all — they are what animates smoothly. Also fine: `filter`, `clip-path`, gradient positions, `stroke-dashoffset` on SVG. - Keep it restrained and slow: a drifting gradient, a slow parallax push, type that breathes, a single element sliding through. Elegant motion is subtle — nothing bouncing, spinning fast, or flashing. The canvas must still look composed in any single frozen frame. ### What the recorder can and cannot capture The recording pauses the browser's animation timeline and steps through it — it does NOT watch the page play in real time. Only animations the browser itself drives are captured: - CAPTURED: CSS `@keyframes`, CSS transitions, SVG SMIL, and the Web Animations API (`element.animate(...)`) — everything that appears in `document.getAnimations()`. HTML `<video>` frames are also seeked in step with the animation timeline. - NOT CAPTURED (records as a frozen video, with no error): anything driven by JavaScript frame by frame — `requestAnimationFrame`, `setInterval`/`setTimeout` loops, canvas 2D/WebGL draw loops, and scroll-triggered libraries. Animated GIFs are not seeked reliably. - This is the ONE rule that differs from the landing page builder, whose pages play live in a real browser and can use anything. Do not carry those habits over. ### Stock video for animated canvases — search_stock_videos Search Pexels stock videos for animated canvases. Returns direct videoUrl MP4 URLs, preview images, dimensions, duration and creator attribution. Use the exact videoUrl in <video autoplay loop muted playsinline> with object-fit:cover, sized to the canvas; layer readable text above it. Set animated=true when calling create_canvas, or set_animated(True) in the canvas builder. Video frames are seeked with the animation timeline in exports; use separate audio tracks for sound. Still PNGs have no motion. Paginate with page/pageSize; this tool is available whenever canvas tools are enabled. ### Audio for animated canvases Default to free stock music for music, soundtracks, reels and stories: use search_stock_music then import_stock_music. Use paid create_music ONLY when the user explicitly requests custom AI-generated music. Never automatically fall back to paid generation when stock search/import fails; try different keywords or tracks and report if none are suitable. Search Openverse for free CC0/public-domain stock music and loops by mood, genre or instruments. Returns candidates with stockAudioId, previewUrl, duration in seconds, creator and source/license links. Choose a track and call import_stock_music to get a permanent canvas audio URL. Do not embed previewUrl in a canvas. Search consumes no audio credits. Import a selected search_stock_music result by stockAudioId. Rechecks its indexed license and matching license link on the original source page, saves an MP3 with source/license metadata, and returns a permanent public audioUrl plus measured duration in seconds. Use audioUrl in <audio src="URL" loop data-volume="0.2"></audio> in an animated canvas. No audio generation credits are charged. Sources that cannot be verified are rejected; choose another track. Imports are bounded by the configured file-size and duration limits (default 40 MiB and the first ten minutes). - For narration or dialogue, call `create_speech`. Audio tools return permanent public audio URLs and measured durations. Never invent audio URLs. If speech generation is unavailable, explain that limitation. - Include tracks directly in the HTML: `<audio src="RETURNED_URL" loop data-volume="0.2"></audio>` for quiet background music; `<audio src="RETURNED_URL" data-start="2" data-volume="1"></audio>` for narration starting 2 seconds in. - Up to 8 tracks are mixed into the exported MP4. data-start is seconds (default 0); data-volume is 0..1 (default 1). `loop` repeats music; omit it for speech. `muted` excludes a track. Only platform public generated or imported audio URLs are accepted. - For dialogue, generate each speaker's line separately with the desired voice ID, then use data-start and the returned durations to place the lines in sequence. Lower the music volume under dialogue. Do not repeat or cut off spoken lines. - Set video duration long enough for all lines, within the tool's duration limit; shorten the script if needed. With audio the requested duration is preserved, without rounding to whole animation cycles. Tracks are trimmed/padded to that length. - Audio is mixed during export; browser autoplay, Web Audio and JavaScript playback are not recorded. HTML preview autoplay may be blocked; use the exported MP4 to review the finished soundtrack. Still PNGs have no audio. ### Animation libraries CSS keyframes are the default and are always enough for a canvas — reach for a library only when the motion genuinely needs orchestration (staggered sequences, timelines). - The ONLY animation library available here is Anime.js, and ONLY through its WAAPI entry point, which puts animations on the browser timeline: - Anime.js (advanced animation): `<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>` — staggered reveals, timelines, kinetic type. `anime.waapi.animate(...)` puts the animation on the browser timeline; `anime.animate(...)` / `anime.Timeline` drive it from JS frame by frame Call it as `anime.waapi.animate('.el', { translateX: 300, duration: 2000, loop: true })`. Its classic `anime.animate(...)` / `anime.Timeline` API is JS-driven and records as a FROZEN video — if you use Anime.js at all, every animation must go through `anime.waapi.animate`. - AOS (used by the landing page builder) is scroll-triggered and USELESS here: a canvas is a fixed viewport with nothing to scroll, so its animations never fire. Never load it. - Whatever you use, the seamless-loop and shared-cycle rules above still apply. ## Color & Background - A limited, intentional palette: 2-3 colors total. Pick them for the design direction, not decoration. High text/background contrast is non-negotiable. - Backgrounds: a flat color, a subtle gradient, or a photo. For photos use `background:url(...) center/cover` and ALWAYS add a scrim over photo areas behind text (e.g. `background:rgba(0,0,0,.35)` or a directional gradient) so type stays legible. The scrim serves the text, not the whole canvas: keep it light (≤ ~0.5 opacity) or directional so the photo stays clearly visible — a photo buried under a near-opaque overlay reads as a plain dark field and wastes the imagery. - Photo URLs must be public http(s) images. Two ways to get one: - Stock photography: search the stock image library (Unsplash/Pexels via the stock image search — images_searchStockImages on the platform API/MCP) and use a result's fullUrl. - AI-generated imagery: generate an image with the platform's AI image models (images_createImage on the platform API/MCP — describe the scene, pick a model, and use the returned public URL). Best for imagery no stock photo can match; request it WITHOUT text, since the canvas type layer supplies all text. ## Composition (non-negotiable craft rules) - Keep a safe margin of at least 5% of the canvas on every side. NOTHING touches or overflows the canvas edge, and elements never overlap illegibly. - Compose deliberately: strong asymmetry or a strict grid both work; accidental centering of everything does not. Let negative space breathe — empty space is a design element, not waste. - Repetition rewards attention: thin rules, small registration marks, an index number, a tiny caption line — sparse, clinical details make the piece feel designed. - The finished canvas should look like it took a top-of-field designer hours of painstaking refinement: aligned edges, consistent spacing rhythm, optically balanced. Double-check every element is inside the canvas and nothing collides before finishing.