More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Parallax Animated Explainer

    1

    Explain a product or process with a playable browser animation, timed captions, scene navigation and pause-and-replay controls.

    $12

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    Parallax Animated Explainer

    Parallax Animated Explainer

    Example session with this skill installed

    Fictional customer request

    All names, numbers, and system behavior below are invented demonstration material. Do not research the web.

    Please build a finished 70–80 second animation explaining how our small-team review queue works. It is for new colleagues at a fictional company called Pebblepath. I need something we can open offline in a browser, play in an onboarding meeting, and send afterward. There is no audio recording and no voice account. Use timed captions; I am happy to read it silently. Please include a way to pause, replay, jump to a stage, and read the explanation without animation. It should look good on a laptop and remain usable on a phone.

    The visual style is ink #19313C, mist #EEF3EF, sea green #317F73, and ochre #C99A3D. Please use original shapes; no external logos, photos, fonts, or music. I want to see one request move through the process, not a slide deck with animated headings.

    Notes from the product team

    Pebblepath is a proposed internal workflow, not a live product. A request has a title, an owner, a requested date, and supporting material. The inbox receives it first. A coordinator checks whether the owner and supporting material are present. If either is missing, the request moves to "Needs information". Its priority does not automatically increase while it waits. When missing information is supplied, it returns to the inbox for another completeness check.

    A complete request moves to "Ready for review". There are two reviewer slots. A ready request can wait when both slots are occupied. Assignment happens when a reviewer becomes free. The system does not automatically approve a request. The reviewer can send it back for clarification or mark the review complete. Only the request owner can then mark the work closed.

    For the animation, follow request R-17, "New welcome email". It begins without its supporting draft. The coordinator sends it to Needs information. The owner adds the draft, then R-17 returns to the inbox. At that point both reviewer slots are occupied. One slot later becomes free, R-17 enters review, the reviewer completes the review, and the owner closes the work.

    Use these arbitrary illustration timings as stages, not real system service levels: intake 8 seconds; missing-information loop 18 seconds; ready queue 14 seconds; review 18 seconds; owner closure and recap 17 seconds. We have not measured throughput, review speed, approval rates, or time savings. The individual stage times are chosen only to help someone follow the story.

    Wording we like

    "Complete information gets a request ready. Capacity gets it into review. The owner closes the loop."

    We have not decided whether to build this workflow. Please keep that context visible somewhere unobtrusive. There are no attached files beyond this text. Make a reasonable animation without waiting for a storyboard sign-off.

    • Read your context and instructions
    • Compiled the parallax animated explainer
    • Generated the UI component

    Fictional demonstration from an actual local trial. This is not a real customer result. Local links and machine-specific paths are displayed as text.

    Created a playable, self-contained 75-second HTML explainer with timed captions, a persistent request card, pause/replay, a seek slider, stage jumps, and the full static process and transcript. It is silent and opens offline. Reduced-motion mode disables spatial playback until explicitly enabled. On a narrow phone screen, the large diagram scrolls horizontally while captions and the static reading version reflow.

    Pebblepath follows R-17 through the missing-draft loop, capacity wait, human review, and owner closure. The 75-second timeline uses the supplied arbitrary stage durations; it is not a service-level claim.

    The saved file completed a real-time playback run in local Chromium. Pause, replay, forward/backward seek, repeated direct frame rendering, stage jumps, stable end state, 390px layout, reduced motion, and JavaScript-disabled static content were checked. Stage and final-state screenshots were inspected. No page errors or external resource requests were observed. This does not establish cross-browser or audience acceptance.

    explainer.html

    <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pebblepath — review queue explainer</title><style>:root{--ink:#19313C;--paper:#EEF3EF;--accent:#317F73;--highlight:#C99A3D}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}main{max-width:1200px;margin:auto;padding:32px}header p{font-size:13px;letter-spacing:.06em}h1{font-size:42px;letter-spacing:-.03em;margin:8px 0 20px}.context{font-size:14px;color:var(--ink);border-left:4px solid var(--accent);padding-left:12px;line-height:1.5}#player{background:white;border:1px solid #ced7d1;border-radius:16px;padding:20px;margin-top:22px}svg{width:100%;height:auto;display:block}.node{fill:var(--paper);stroke:#a6b9b0;stroke-width:2}.node-title{font-size:19px;font-weight:bold;fill:var(--ink)}.minor{font-size:15px;fill:var(--ink)}.route{fill:none;stroke:#9db4ab;stroke-width:3;stroke-dasharray:7 5}.card{fill:var(--accent);stroke:var(--ink);stroke-width:2}.cardtext{fill:white;font-size:18px;font-weight:bold}.cardmeta{fill:white;font-size:14px}.slot{fill:var(--paper);stroke:var(--ink)}#caption{min-height:104px;font-size:21px;line-height:1.45;padding:17px 20px;margin:0;background:var(--paper);border-left:5px solid var(--accent)}#state-label{font-weight:bold;font-size:17px;line-height:1.4;min-height:48px;padding:10px 20px;margin:0}#controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 12px}button{padding:12px 17px;border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);font-size:16px;cursor:pointer}button:disabled{opacity:.45}button:focus-visible,input:focus-visible{outline:3px solid var(--highlight);outline-offset:3px}#seek{flex:1;min-width:200px;accent-color:var(--accent)}#clock{font-variant-numeric:tabular-nums;font-size:15px}.jumps{display:flex;flex-wrap:wrap;gap:8px}.jumps button{font-size:14px;background:var(--paper);color:var(--ink);padding:9px 12px}.jumps button[aria-current=true]{background:var(--accent);color:white}.motion{display:block;margin:15px 0;font-size:14px}#mode-note{font-size:14px}.timing{font-size:14px;line-height:1.5}details{margin-top:28px;border-top:1px solid #a6b9b0;padding-top:18px}summary{font-size:21px;font-weight:bold;cursor:pointer}.static-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.static-card{padding:18px;border:1px solid #b5c7bd;border-radius:10px}.static-card h3{margin:0 0 10px;font-size:19px}.static-card p{font-size:17px;line-height:1.5;margin:0}.mini-path{font-weight:bold;font-size:19px;line-height:1.5;margin:20px 0}.volume{margin:20px 0;font-size:17px}.volume-row{display:grid;grid-template-columns:170px 1fr 60px;gap:10px;align-items:center;margin:12px 0}.volume-bar{height:28px;background:var(--accent)}.volume small{font-size:14px;line-height:1.5}.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}@media(max-width:650px){main{padding:17px}h1{font-size:31px}#player{padding:10px}#caption{font-size:18px;min-height:175px;padding:14px}#state-label{font-size:15px;min-height:70px;padding:10px 12px}#board-wrap{overflow-x:auto}svg{min-width:780px}#controls{gap:9px}#seek{width:100%;flex-basis:100%;min-width:0}.static-grid{grid-template-columns:1fr}.volume-row{grid-template-columns:120px 1fr 30px;font-size:15px}.jumps button{font-size:13px}.context{font-size:13px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media print{#controls,.jumps,.motion,#mode-note{display:none}details{display:block}details>*{display:block}#player{break-inside:avoid}main{padding:0}.static-grid{grid-template-columns:1fr 1fr}}</style></head><body><main><header><p>PEBBLEPATH / CAPTION-LED EXPLAINER</p><h1>One request. A visible path.</h1><div class="context">Proposed workflow · fictional demonstration · not a live product</div></header><section id="player" tabindex="0" aria-label="Animated review queue"><div id="board-wrap"><svg id="board" viewBox="0 0 1100 470" role="img" aria-labelledby="board-title board-desc"><title id="board-title">One request moves through a review queue</title><desc id="board-desc">Inbox, missing-information loop, ready queue, human review, and owner closure. Reviewer capacity and owner responsibility constrain progress.</desc><path class="route" d="M180 185V355M180 145H520H880M880 185V355"/><path class="route" d="M900 210Q1070 430 320 400"/><text x="420" y="438" class="minor">A reviewer may return the request for clarification.</text><g id="nodes"><rect class="node" x="45" y="60" width="270" height="155" rx="15"/><text class="node-title" x="65" y="92">Inbox</text><text class="minor" x="65" y="115">Coordinator checks</text><rect class="node" x="45" y="280" width="270" height="140" rx="15"/><text class="node-title" x="65" y="310">Needs information</text><rect class="node" x="395" y="60" width="270" height="155" rx="15"/><text class="node-title" x="415" y="92">Ready for review</text><text class="minor" x="415" y="115">Wait for capacity</text><rect class="node" x="745" y="60" width="310" height="155" rx="15"/><text class="node-title" x="765" y="92">Human review</text><text class="minor" x="765" y="115">Decision is not automatic</text><rect class="node" x="745" y="280" width="310" height="140" rx="15"/><text class="node-title" x="765" y="310">Owner closure</text><rect class="slot" x="745" y="227" width="150" height="30" rx="5"/><text id="slot-one" class="minor" x="754" y="248">Slot 1: occupied</text><rect class="slot" x="905" y="227" width="150" height="30" rx="5"/><text class="minor" x="913" y="248">Slot 2: occupied</text></g><g id="request-card" transform="translate(70 135)"><rect class="card" width="220" height="65" rx="9"/><text class="cardtext" x="13" y="25" id="request-title"></text><text class="cardmeta" x="13" y="48" id="request-meta">Supporting material missing</text></g><text id="status-top" class="minor" x="45" y="29">Paused · inspect any stage</text></svg></div><p id="state-label">Coordinator checks owner and material</p><p id="caption">R-17 arrives with an owner and requested date, but no supporting draft. A coordinator checks completeness.</p><div id="controls"><button id="play">Play</button><button id="replay">Replay</button><label class="sr" for="seek">Animation position in seconds</label><input id="seek" type="range" min="0" max="75" step="0.1" value="0"><span id="clock">0 / 75 s</span></div><div class="jumps" aria-label="Jump to stage"><button>Inbox</button><button>Missing-information loop</button><button>Ready queue</button><button>Review</button><button>Owner closure</button></div><label class="motion"><input id="allow-motion" type="checkbox"> Allow spatial motion</label><p id="mode-note"></p></section><p class="timing">75 seconds programmed. Stage durations are arbitrary illustration timings, not service levels. No audio or measured performance claims.</p><details id="static" open><summary>Read the process without animation</summary><p class="mini-path">Inbox → information check → ready queue → review → owner closure</p><div class="static-grid"><article class="static-card"><h3>1. Inbox</h3><p>Inbox: coordinator finds the supporting draft missing. Owner and requested date are already present.</p></article><article class="static-card"><h3>2. Missing-information loop</h3><p>Needs information: the owner supplies the draft; priority stays unchanged; the request returns to the inbox for rechecking.</p></article><article class="static-card"><h3>3. Ready queue</h3><p>Ready for review: complete information is present; two occupied reviewer slots prevent assignment.</p></article><article class="static-card"><h3>4. Review</h3><p>In review: a free slot permits assignment; a human reviewer can request clarification or mark review complete.</p></article><article class="static-card"><h3>5. Owner closure</h3><p>Review complete → owner closure: review completion alone does not close the work. Only the owner marks it closed.</p></article></div><h2>Complete caption transcript</h2><p><strong>0–8 s:</strong> R-17 arrives with an owner and requested date, but no supporting draft. A coordinator checks completeness.</p><p><strong>8–26 s:</strong> The coordinator sends R-17 to Needs information. Its priority does not rise while it waits. The owner adds the draft; R-17 returns to the inbox for another check.</p><p><strong>26–40 s:</strong> R-17 is complete and ready, but both reviewer slots are occupied. Complete information does not create reviewer capacity.</p><p><strong>40–58 s:</strong> A slot becomes free. R-17 enters review. The reviewer can ask for clarification or record a completed review; the system does not approve it automatically.</p><p><strong>58–75 s:</strong> Review is complete. The owner marks R-17 closed. Complete information gets a request ready. Capacity gets it into review. The owner closes the loop.</p></details><noscript><p>JavaScript is disabled. The full static process and caption transcript above remain available.</p></noscript></main><script>const D={"brand": "Pebblepath", "title": "One request. A visible path.", "id": "R-17", "request": "New welcome email", "duration": 75, "colors": ["#19313C", "#EEF3EF", "#317F73", "#C99A3D"], "starts": [0, 8, 26, 40, 58], "ends": [8, 26, 40, 58, 75], "names": ["Inbox", "Missing-information loop", "Ready queue", "Review", "Owner closure"], "captions": ["R-17 arrives with an owner and requested date, but no supporting draft. A coordinator checks completeness.", "The coordinator sends R-17 to Needs information. Its priority does not rise while it waits. The owner adds the draft; R-17 returns to the inbox for another check.", "R-17 is complete and ready, but both reviewer slots are occupied. Complete information does not create reviewer capacity.", "A slot becomes free. R-17 enters review. The reviewer can ask for clarification or record a completed review; the system does not approve it automatically.", "Review is complete. The owner marks R-17 closed. Complete information gets a request ready. Capacity gets it into review. The owner closes the loop."], "context": "Proposed workflow \u00b7 fictional demonstration \u00b7 not a live product", "timing": "75 seconds programmed. Stage durations are arbitrary illustration timings, not service levels. No audio or measured performance claims.", "static": ["Inbox: coordinator finds the supporting draft missing. Owner and requested date are already present.", "Needs information: the owner supplies the draft; priority stays unchanged; the request returns to the inbox for rechecking.", "Ready for review: complete information is present; two occupied reviewer slots prevent assignment.", "In review: a free slot permits assignment; a human reviewer can request clarification or mark review complete.", "Review complete \u2192 owner closure: review completion alone does not close the work. Only the owner marks it closed."]};const reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;let t=0,playing=false,raf=0,anchor=0,anchorT=0;const seek=document.querySelector('#seek'),play=document.querySelector('#play'),motion=document.querySelector('#allow-motion'),card=document.querySelector('#request-card');motion.checked=!reduce;document.querySelector('#request-title').textContent=D.id+' · '+(D.id==='R-17'?'Welcome email':'Request');document.querySelector('#request-title').setAttribute('font-size','17');
function lerp(a,b,p){return a+(b-a)*Math.max(0,Math.min(1,p))}function leg(t,a,b,start,end){return[lerp(start[0],end[0],(t-a)/(b-a)),lerp(start[1],end[1],(t-a)/(b-a))]}const inbox=[70,135],missing=[70,330],ready=[420,135],review=[770,135],closed=[770,330];
function stageAt(v){let i=D.starts.findIndex((s,i)=>v>=s&&v<D.ends[i]);return i<0?D.starts.length-1:i}function position(v){const a=D.starts,b=D.ends;if(v<a[1])return inbox;if(v<a[1]+3)return leg(v,a[1],a[1]+3,inbox,missing);if(v<a[2]-3)return missing;if(v<a[2])return leg(v,a[2]-3,a[2],missing,inbox);if(v<a[2]+3)return leg(v,a[2],a[2]+3,inbox,ready);if(v<a[3])return ready;if(v<a[3]+4)return leg(v,a[3],a[3]+4,ready,review);if(v<a[4])return review;if(v<a[4]+5)return leg(v,a[4],a[4]+5,review,closed);return closed}
function render(value){t=Math.max(0,Math.min(D.duration,value));const stage=stageAt(t);let p=position(t);if(!motion.checked){p=[inbox,missing,ready,review,closed][stage]}card.setAttribute('transform','translate('+p[0]+' '+p[1]+')');document.querySelector('#caption').textContent=D.captions[stage];document.querySelector('#clock').textContent=t.toFixed(1)+' / '+D.duration+' s';seek.value=t;document.querySelectorAll('.jumps button').forEach((b,i)=>b.setAttribute('aria-current',String(i===stage)));const attached=t>=D.starts[2]-6;const complete=t>=D.starts[4],isClosed=t>=D.starts[4]+9;document.querySelector('#request-meta').textContent=isClosed?'Owner marked closed':complete?'Review complete · owner next':attached?'Supporting material present':'Supporting material missing';document.querySelector('#slot-one').textContent=t<D.starts[3]?'Slot 1: occupied':complete?'Slot 1: free':'Slot 1: '+D.id;let state=['Coordinator checks owner and material','Priority unchanged while waiting','Both slots occupied; request waits','A human reviewer is responsible','Only the owner can close'][stage];if(stage===1&&D.id!=='R-17')state='Waiting for owner clarification and supporting documentation';if(stage===1&&attached)state='Owner adds material; return to inbox for another check';if(stage===4&&isClosed)state='Closed by owner · review completion was a separate step';document.querySelector('#state-label').textContent=state;document.querySelector('#status-top').textContent=D.names[stage]+' · '+D.id;play.textContent=playing?'Pause':t>=D.duration?'Play again':'Play';document.querySelector('#player').dataset.time=t.toFixed(3);document.querySelector('#player').dataset.stage=stage}
function stop(){playing=false;cancelAnimationFrame(raf);raf=0;render(t)}function tick(now){if(!playing)return;render(anchorT+(now-anchor)/1000);if(t>=D.duration){playing=false;raf=0;render(D.duration);return}raf=requestAnimationFrame(tick)}function start(){if(!motion.checked)return;if(t>=D.duration)t=0;cancelAnimationFrame(raf);playing=true;anchor=performance.now();anchorT=t;render(t);raf=requestAnimationFrame(tick)}function jump(v){const wasPlaying=playing;stop();render(v);if(wasPlaying)start()}play.onclick=()=>playing?stop():start();document.querySelector('#replay').onclick=()=>{stop();render(0);if(motion.checked)start()};seek.oninput=()=>jump(Number(seek.value));document.querySelectorAll('.jumps button').forEach((b,i)=>b.onclick=()=>jump(D.starts[i]));motion.onchange=()=>{stop();play.disabled=!motion.checked;document.querySelector('#mode-note').textContent=motion.checked?'Motion enabled. Playback starts only when you choose Play.':'Static mode. Use the stage buttons or slider; spatial movement is disabled.';render(t)};document.querySelector('#player').addEventListener('keydown',e=>{if(e.code==='Space'&&!e.target.matches('input,textarea,button,select')){e.preventDefault();playing?stop():start()}});if(reduce)document.querySelector('#static').open=true;motion.onchange();window.explainer={render:(v)=>{stop();render(v)},state:()=>({t,playing,stage:stageAt(t),transform:card.getAttribute('transform'),caption:document.querySelector('#caption').textContent,motion:motion.checked}),data:D};render(0);</script></body></html>

    transcript.md

    
# Pebblepath

Proposed workflow · fictional demonstration · not a live product

75 seconds programmed. Stage durations are arbitrary illustration timings, not service levels. No audio or measured performance claims.

## 0–8 seconds: Inbox

R-17 arrives with an owner and requested date, but no supporting draft. A coordinator checks completeness.

Static state: Inbox: coordinator finds the supporting draft missing. Owner and requested date are already present.

## 8–26 seconds: Missing-information loop

The coordinator sends R-17 to Needs information. Its priority does not rise while it waits. The owner adds the draft; R-17 returns to the inbox for another check.

Static state: Needs information: the owner supplies the draft; priority stays unchanged; the request returns to the inbox for rechecking.

## 26–40 seconds: Ready queue

R-17 is complete and ready, but both reviewer slots are occupied. Complete information does not create reviewer capacity.

Static state: Ready for review: complete information is present; two occupied reviewer slots prevent assignment.

## 40–58 seconds: Review

A slot becomes free. R-17 enters review. The reviewer can ask for clarification or record a completed review; the system does not approve it automatically.

Static state: In review: a free slot permits assignment; a human reviewer can request clarification or mark review complete.

## 58–75 seconds: Owner closure

Review is complete. The owner marks R-17 closed. Complete information gets a request ready. Capacity gets it into review. The owner closes the loop.

Static state: Review complete → owner closure: review completion alone does not close the work. Only the owner marks it closed.

    explainer.html

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Show how a product, process or idea works with a playable animation. Turn your script or explanation into connected scenes with visuals and captions.

    What you get

    • A standalone HTML animation with timed captions and a readable transcript.
    • Pause, replay, seeking and scene navigation controls.
    • Editable source and a reduced-motion or static viewing option.

    Bring a script, process description or product flow. Your assistant needs code and file tools; a browser is used to check the result.

    The standard result is a browser animation. Voiceover and MP4 export are optional and require additional tools; they are not included automatically. Load the skill through Agensi. AI service fees are separate.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 3 days ago

    • Passed all security checks, Safe to install

    Listed3 days ago

    What's inside

    Frequently Asked Questions