{"id":"fa4e10dc-1fab-4da5-a85f-d19b6f5cf614","entityType":"agent","slug":"clawhub-lucas-kay8-gsap","name":"Gsap","canonicalUrl":"https://www.xpersona.co/agent/clawhub-lucas-kay8-gsap","canonicalPath":"/agent/clawhub-lucas-kay8-gsap","generatedAt":"2026-10-10T21:53:01.132Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":null},"description":"GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe... Skill: Gsap Owner: lucas-kay8 Summary: GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-20T11:21:58.204Z | auto GSAP animation reference for HyperFrames, first release: - Provides practical examples and best practices for using GSAP (gsap.to(), .from(), .","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.3K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s1761m7dq1gcshz013v85wrpg586z1tn:gsap","sourceUrl":"https://clawhub.ai/lucas-kay8/gsap","homepage":"https://clawhub.ai/lucas-kay8/skills/gsap","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/lucas-kay8/gsap","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/lucas-kay8/skills/gsap","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":62,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":null},"stars":null,"forks":null,"downloads":1281,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T19:23:29.031Z","lastCrawledAt":"2026-10-10T19:23:29.031Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T19:23:29.031Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-05-20T11:21:58.204Z","changelog":"GSAP animation reference for HyperFrames, first release: - Provides practical examples and best practices for using GSAP (`gsap.to()`, `.from()`, `.fromTo()`, timelines) within HyperFrames compositions. - Details the HyperFrames contract: timeline creation, registry, and integration constraints for render-critical motion. - Documents transform aliases, easings, staggering, function-based values, and performance tips for animation. - Explains timeline sequencing with the position parameter, labels, nesting, and timeline control methods. - Lists essential DOs and DON'Ts for GSAP usage in a HyperFrames context. - Includes links to GSAP and HyperFrames-specific documentation for further guidance.","fileCount":5,"zipByteSize":11357}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1761m7dq1gcshz013v85wrpg586z1tn:gsap","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T21:53:01.132Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-gsap/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":null},"readme":"Skill: Gsap\n\nOwner: lucas-kay8\n\nSummary: GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-05-20T11:21:58.204Z | auto\n\nGSAP animation reference for HyperFrames, first release:\n\n- Provides practical examples and best practices for using GSAP (`gsap.to()`, `.from()`, `.fromTo()`, timelines) within HyperFrames compositions.\n- Details the HyperFrames contract: timeline creation, registry, and integration constraints for render-critical motion.\n- Documents transform aliases, easings, staggering, function-based values, and performance tips for animation.\n- Explains timeline sequencing with the position parameter, labels, nesting, and timeline control methods.\n- Lists essential DOs and DON'Ts for GSAP usage in a HyperFrames context.\n- Includes links to GSAP and HyperFrames-specific documentation for further guidance.\n\nArchive index:\n\nArchive v1.0.0: 5 files, 11357 bytes\n\nFiles: references/effects.md (8761b), scripts/extract-audio-data.py (6463b), skill-card.md (2231b), SKILL.md (7776b), _meta.json (123b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: gsap\ndescription: GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.\n---\n\n# GSAP\n\n## HyperFrames Contract\n\nHyperFrames controls GSAP through its `gsap` runtime adapter. Create a paused timeline synchronously, register it on `window.__timelines` with the exact `data-composition-id`, and let HyperFrames seek it.\n\n```html\n\n\n```\n\n- The registry key must match the composition root's `data-composition-id`.\n- Do not call `tl.play()` for render-critical motion.\n- Do not build timelines inside async code, timers, or event handlers.\n- Keep loops finite. HyperFrames renders finite video durations.\n\n## Core Tween Methods\n\n- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.\n- **gsap.from(targets, vars)** — animate from `vars` to current state (entrances).\n- **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end.\n- **gsap.set(targets, vars)** — apply immediately (duration 0).\n\nAlways use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).\n\n## Common vars\n\n- **duration** — seconds (default 0.5).\n- **delay** — seconds before start.\n- **ease** — `\"power1.out\"` (default), `\"power3.inOut\"`, `\"back.out(1.7)\"`, `\"elastic.out(1, 0.3)\"`, `\"none\"`.\n- **stagger** — number `0.1` or object: `{ amount: 0.3, from: \"center\" }`, `{ each: 0.1, from: \"random\" }`.\n- **overwrite** — `false` (default), `true`, or `\"auto\"`.\n- **repeat** — finite number; never `-1` in HyperFrames. Compute repeats from the visible duration. **yoyo** — alternates direction with repeat.\n- **onComplete**, **onStart**, **onUpdate** — callbacks.\n- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite.\n\n## Transforms and CSS\n\nPrefer GSAP's **transform aliases** over raw `transform` string:\n\n| GSAP property | Equivalent |\n| --------------------------- | ------------------- |\n| `x`, `y`, `z` | translateX/Y/Z (px) |\n| `xPercent`, `yPercent` | translateX/Y in % |\n| `scale`, `scaleX`, `scaleY` | scale |\n| `rotation` | rotate (deg) |\n| `rotationX`, `rotationY` | 3D rotate |\n| `skewX`, `skewY` | skew |\n| `transformOrigin` | transform-origin |\n\n- **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.\n- **CSS variables** — `\"--hue\": 180`.\n- **svgOrigin** _(SVG only)_ — global SVG coordinate space origin. Don't combine with `transformOrigin`.\n- **Directional rotation** — `\"360_cw\"`, `\"-170_short\"`, `\"90_ccw\"`.\n- **clearProps** — `\"all\"` or comma-separated; removes inline styles on complete.\n- **Relative values** — `\"+=20\"`, `\"-=10\"`, `\"*=2\"`.\n\n## Function-Based Values\n\n```javascript\ngsap.to(\".item\", {\n x: (i, target, targets) => i * 50,\n stagger: 0.1,\n});\n```\n\n## Easing\n\nBuilt-in eases: `power1`–`power4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine`. Each has `.in`, `.out`, `.inOut`.\n\n## Defaults\n\n```javascript\ngsap.defaults({ duration: 0.6, ease: \"power2.out\" });\n```\n\n## Controlling Tweens\n\n```javascript\nconst tween = gsap.to(\".box\", { x: 100 });\ntween.pause();\ntween.play();\ntween.reverse();\ntween.kill();\ntween.progress(0.5);\ntween.time(0.2);\n```\n\n## gsap.matchMedia() (Responsive + Accessibility)\n\nRuns setup only when a media query matches; auto-reverts when it stops matching.\n\n```javascript\nlet mm = gsap.matchMedia();\nmm.add(\n {\n isDesktop: \"(min-width: 800px)\",\n reduceMotion: \"(prefers-reduced-motion: reduce)\",\n },\n (context) => {\n const { isDesktop, reduceMotion } = context.conditions;\n gsap.to(\".box\", {\n rotation: isDesktop ? 360 : 180,\n duration: reduceMotion ? 0 : 2,\n });\n },\n);\n```\n\n---\n\n## Timelines\n\n### Creating a Timeline\n\n```javascript\nconst tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2.out\" } });\ntl.to(\".a\", { x: 100 }).to(\".b\", { y: 50 }).to(\".c\", { opacity: 0 });\n```\n\n### Position Parameter\n\nThird argument controls placement:\n\n- **Absolute**: `1` — at 1s\n- **Relative**: `\"+=0.5\"` — after end; `\"-=0.2\"` — before end\n- **Label**: `\"intro\"`, `\"intro+=0.3\"`\n- **Alignment**: `\"<\"` — same start as previous; `\">\"` — after previous ends; `\"<0.2\"` — 0.2s after previous starts\n\n```javascript\ntl.to(\".a\", { x: 100 }, 0);\ntl.to(\".b\", { y: 50 }, \"<\"); // same start as .a\ntl.to(\".c\", { opacity: 0 }, \"<0.2\"); // 0.2s after .b starts\n```\n\n### Labels\n\n```javascript\ntl.addLabel(\"intro\", 0);\ntl.to(\".a\", { x: 100 }, \"intro\");\ntl.addLabel(\"outro\", \"+=0.5\");\ntl.play(\"outro\");\ntl.tweenFromTo(\"intro\", \"outro\");\n```\n\n### Timeline Options\n\n- **paused: true** — create paused; call `.play()` to start.\n- **repeat**, **yoyo** — apply to whole timeline.\n- **defaults** — vars merged into every child tween.\n\n### Nesting Timelines\n\n```javascript\nconst master = gsap.timeline();\nconst child = gsap.timeline();\nchild.to(\".a\", { x: 100 }).to(\".b\", { y: 50 });\nmaster.add(child, 0);\n```\n\n### Playback Control\n\n`tl.play()`, `tl.pause()`, `tl.reverse()`, `tl.restart()`, `tl.time(2)`, `tl.progress(0.5)`, `tl.kill()`.\n\n---\n\n## Performance\n\n### Prefer Transform and Opacity\n\nAnimating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.\n\n### will-change\n\n```css\nwill-change: transform;\n```\n\nOnly on elements that actually animate.\n\n### gsap.quickTo() for Frequent Updates\n\n```javascript\nlet xTo = gsap.quickTo(\"#id\", \"x\", { duration: 0.4, ease: \"power3\" }),\n yTo = gsap.quickTo(\"#id\", \"y\", { duration: 0.4, ease: \"power3\" });\ncontainer.addEventListener(\"mousemove\", (e) => {\n xTo(e.pageX);\n yTo(e.pageY);\n});\n```\n\n### Stagger > Many Tweens\n\nUse `stagger` instead of separate tweens with manual delays.\n\n### Cleanup\n\nPause or kill off-screen animations.\n\n---\n\n## References (loaded on demand)\n\n- **[references/effects.md](references/effects.md)** — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames.\n\n## Best Practices\n\n- Use camelCase property names; prefer transform aliases and autoAlpha.\n- Prefer timelines over chaining with delay; use the position parameter.\n- Add labels with `addLabel()` for readable sequencing.\n- Pass defaults into timeline constructor.\n- Store tween/timeline return value when controlling playback.\n\n## Do Not\n\n- Animate layout properties (width/height/top/left) when transforms suffice.\n- Use both svgOrigin and transformOrigin on the same SVG element.\n- Chain animations with delay when a timeline can sequence them.\n- Create tweens before the DOM exists.\n- Skip cleanup — always kill tweens when no longer needed.\n- Use infinite repeat values in HyperFrames compositions. Use finite repeat counts computed from the visible duration.\n\n## Credits And References\n\n- HyperFrames adapter source: `packages/core/src/runtime/adapters/gsap.ts`.\n- GSAP documentation: https://gsap.com/docs/v3/\n- GSAP timeline pause and seek behavior: https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn70kae1g9r73x5v5vn83saj7h86yevd\",\n \"slug\": \"gsap\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1779276118204\n}\n\nFile v1.0.0:references/effects.md\n\n# GSAP Effects for HyperFrames\n\nDrop-in animation patterns for HyperFrames compositions. Each effect is self-contained with HTML, CSS, and code.\n\nAll effects follow HyperFrames composition rules — deterministic, no randomness, timelines registered via `window.__timelines`.\n\n## Table of Contents\n\n- [Typewriter](#typewriter)\n- [Audio Visualizer](#audio-visualizer)\n\n---\n\n## Typewriter\n\nReveal text character by character using GSAP's TextPlugin.\n\n### Required Plugin\n\n```html\n\n\n\n```\n\n### Basic Typewriter\n\n```js\nconst text = \"Hello, world!\";\nconst cps = 10; // chars per second: 3-5 dramatic, 8-12 conversational, 15-20 energetic\ntl.to(\n \"#typed-text\",\n { text: { value: text }, duration: text.length / cps, ease: \"none\" },\n startTime,\n);\n```\n\n### With Blinking Cursor\n\nThree rules:\n\n1. **One cursor visible at a time** — hide previous before showing next.\n2. **Cursor must blink when idle** — after typing, during pauses.\n3. **No gap between text and cursor** — elements must be flush in HTML.\n\n```html\n|\n```\n\n```css\n@keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n}\n.cursor-blink {\n animation: blink 0.8s step-end infinite;\n}\n.cursor-solid {\n animation: none;\n opacity: 1;\n}\n.cursor-hide {\n animation: none;\n opacity: 0;\n}\n```\n\nPattern: blink → solid (typing starts) → type → solid → blink (typing done).\n\n```js\ntl.call(() => cursor.classList.replace(\"cursor-blink\", \"cursor-solid\"), [], startTime);\ntl.to(\"#typed-text\", { text: { value: text }, duration: dur, ease: \"none\" }, startTime);\ntl.call(() => cursor.classList.replace(\"cursor-solid\", \"cursor-blink\"), [], startTime + dur);\n```\n\n### Backspacing\n\nTextPlugin removes from front — wrong for backspace. Use manual substring removal:\n\n```js\nfunction backspace(tl, selector, word, startTime, cps) {\n const el = document.querySelector(selector);\n const interval = 1 / cps;\n for (let i = word.length - 1; i >= 0; i--) {\n tl.call(\n () => {\n el.textContent = word.slice(0, i);\n },\n [],\n startTime + (word.length - i) * interval,\n );\n }\n return word.length * interval;\n}\n```\n\n### Spacing with Static Text\n\nWhen a typewriter word sits next to static text, use `margin-left` on a wrapper span. Don't use flex gap (spaces cursor from text) or trailing space in static text (collapses when dynamic is empty).\n\n```html\n\n Ship something\n |\n
\n```\n\n### Word Rotation\n\nType → hold → backspace → next word. Cursor blinks during every idle moment (holds, after backspace).\n\n```js\nwords.forEach((word, i) => {\n const typeDur = word.length / 10;\n // Solid while typing\n tl.call(() => cursor.classList.replace(\"cursor-blink\", \"cursor-solid\"), [], offset);\n tl.to(\"#typed-text\", { text: { value: word }, duration: typeDur, ease: \"none\" }, offset);\n // Blink during hold\n tl.call(() => cursor.classList.replace(\"cursor-solid\", \"cursor-blink\"), [], offset + typeDur);\n offset += typeDur + 1.5; // hold\n\n if (i < words.length - 1) {\n tl.call(() => cursor.classList.replace(\"cursor-blink\", \"cursor-solid\"), [], offset);\n const clearDur = backspace(tl, el, word, offset, 20);\n tl.call(() => cursor.classList.replace(\"cursor-solid\", \"cursor-blink\"), [], offset + clearDur);\n offset += clearDur + 0.3;\n }\n});\n```\n\n### Appending Words\n\nBuild a sentence word-by-word into the same element:\n\n```js\nlet accumulated = \"\";\nwords.forEach((word) => {\n const target = accumulated + (accumulated ? \" \" : \"\") + word;\n const newChars = target.length - accumulated.length;\n tl.to(\"#typed-text\", { text: { value: target }, duration: newChars / 10, ease: \"none\" }, offset);\n accumulated = target;\n offset += newChars / 10 + 0.3;\n});\n```\n\n### Multi-Line Cursor Handoff\n\nWhen handing off between typewriter lines: hide previous → blink new → pause → solid when typing. Never go hidden→solid (skips idle state).\n\n```js\ntl.call(\n () => {\n prevCursor.classList.replace(\"cursor-blink\", \"cursor-hide\");\n nextCursor.classList.replace(\"cursor-hide\", \"cursor-blink\");\n },\n [],\n handoffTime,\n);\n\nconst typeStart = handoffTime + 0.5; // brief blink pause\ntl.call(() => nextCursor.classList.replace(\"cursor-blink\", \"cursor-solid\"), [], typeStart);\ntl.to(\"#next-text\", { text: { value: text }, duration: dur, ease: \"none\" }, typeStart);\ntl.call(() => nextCursor.classList.replace(\"cursor-solid\", \"cursor-blink\"), [], typeStart + dur);\n```\n\n### Timing Guide\n\n| CPS | Feel | Good for |\n| ----- | ---------------- | -------------------------- |\n| 3-5 | Slow, deliberate | Dramatic reveals, suspense |\n| 8-12 | Natural typing | Dialogue, narration |\n| 15-20 | Fast, energetic | Tech demos, code |\n| 30+ | Near-instant | Filling long blocks |\n\n---\n\n## Audio Visualizer\n\nPre-extract audio data, drive canvas/DOM rendering from GSAP timeline.\n\n### Extract Audio Data\n\n```bash\npython scripts/extract-audio-data.py audio.mp3 -o audio-data.json\npython scripts/extract-audio-data.py video.mp4 --fps 30 --bands 16 -o audio-data.json\n```\n\nRequires ffmpeg and numpy.\n\n### Data Format\n\n```json\n{\n \"fps\": 30, \"totalFrames\": 5415,\n \"frames\": [{ \"time\": 0.0, \"rms\": 0.42, \"bands\": [0.8, 0.6, 0.3, ...] }]\n}\n```\n\n- **rms** (0-1): overall loudness, normalized across track\n- **bands[]** (0-1): frequency magnitudes. Index 0 = bass, higher = treble. Each normalized independently.\n\n### Loading the Data\n\n```js\n// Option A: inline (small files, under ~500KB)\nvar AUDIO_DATA = {\n /* paste audio-data.json contents */\n};\n\n// Option B: sync XHR (large files — must be synchronous for deterministic timeline construction)\nvar xhr = new XMLHttpRequest();\nxhr.open(\"GET\", \"audio-data.json\", false);\nxhr.send();\nvar AUDIO_DATA = JSON.parse(xhr.responseText);\n```\n\n**Do NOT use async `fetch()` to load audio data.** HyperFrames requires synchronous timeline construction — the capture engine reads `window.__timelines` synchronously after page load. Building timelines inside `.then()` callbacks means the timeline isn't ready when capture starts.\n\n### Rendering Approaches\n\n**Canvas 2D** (most common — bars, waveforms, circles, gradients):\n\n```js\nfor (let f = 0; f < AUDIO_DATA.totalFrames; f++) {\n tl.call(\n () => {\n const frame = AUDIO_DATA.frames[f];\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n // draw using frame.rms and frame.bands\n },\n [],\n f / AUDIO_DATA.fps,\n );\n}\n```\n\n**WebGL / Three.js** — HyperFrames patches `THREE.Clock` for deterministic time. Update uniforms from audio data each frame.\n\n**DOM Elements** — fine for < 20 elements, less performant than Canvas for many.\n\n### Spatial Mapping\n\n- **Horizontal**: bass left, treble right (iterate bands left-to-right)\n- **Vertical**: bass bottom, treble top\n- **Circular**: bass at 12 o'clock, wrap clockwise; mirror for full circle\n\n### Smoothing\n\n```js\nlet prev = null;\nconst smoothing = 0.25; // 0.1-0.2 snappy, 0.3-0.5 flowing\nfunction smooth(f) {\n const raw = AUDIO_DATA.frames[f];\n if (!prev) {\n prev = { rms: raw.rms, bands: [...raw.bands] };\n return prev;\n }\n prev = {\n rms: prev.rms * smoothing + raw.rms * (1 - smoothing),\n bands: raw.bands.map((b, i) => prev.bands[i] * smoothing + b * (1 - smoothing)),\n };\n return prev;\n}\n```\n\n### Motion Principles\n\n- **Bass drives big moves** — scale, glow, position shifts\n- **Treble drives detail** — shimmer, flicker, edge effects\n- **RMS drives globals** — background brightness, overall energy\n- Pick 2-3 properties to animate. More looks noisy.\n- Keep minimums above zero — quiet sections need life.\n\n### Band Count\n\n| Bands | Detail | Good for |\n| ----- | --------- | -------------------------- |\n| 4 | Low | Background glow, pulsing |\n| 8 | Medium | Bar charts, basic spectrum |\n| 16 | High | Detailed EQ (default) |\n| 32 | Very high | Dense radial layouts |\n\n### Layering\n\nLayer multiple canvases with CSS z-index for depth — a background layer driven by bass/rms and a foreground layer driven by individual bands creates depth without complexity.\n\n```html\n\n\n```\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nGSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[lucas-kay8](https://clawhub.ai/user/lucas-kay8)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and designers use this skill to write deterministic GSAP animations for HyperFrames compositions, including tweens, timelines, transform-friendly motion, typewriter effects, and audio visualizers.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The audio visualizer helper can consume excessive local resources when run with extreme frame-rate, band-count, or media-size settings.\n\nMitigation: Run the helper manually on trusted media and keep fps and band counts reasonable.\n\nRisk: Example animations may include CDN-hosted GSAP scripts that do not match every project policy.\n\nMitigation: Review CDN script usage against the target project's dependency and security policy before adopting the examples.\n\n## Reference(s):\n\n- [GSAP Effects for HyperFrames](references/effects.md)\n- [GSAP documentation](https://gsap.com/docs/v3/)\n- [GSAP Timeline pause documentation](https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/)\n- [ClawHub skill page](https://clawhub.ai/lucas-kay8/skills/gsap)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Shell commands, Configuration instructions, Guidance]\n\n**Output Format:** [Markdown guidance with HTML, CSS, JavaScript, bash, and JSON examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May propose use of the bundled audio extraction helper, which produces per-frame JSON audio visualization data.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: Gsap Owner: lucas-kay8 Summary: GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-20T11:21:58.204Z | auto GSAP animation reference for HyperFrames, first release: - Provides practical examples and best practices for using GSAP (gsap.to(), .from(), .","codeSnippets":[],"executableExamples":[{"language":"html","snippet":"\n"},{"language":"javascript","snippet":"gsap.to(\".item\", {\n x: (i, target, targets) => i * 50,\n stagger: 0.1,\n});"},{"language":"javascript","snippet":"gsap.defaults({ duration: 0.6, ease: \"power2.out\" });"},{"language":"javascript","snippet":"const tween = gsap.to(\".box\", { x: 100 });\ntween.pause();\ntween.play();\ntween.reverse();\ntween.kill();\ntween.progress(0.5);\ntween.time(0.2);"},{"language":"javascript","snippet":"let mm = gsap.matchMedia();\nmm.add(\n {\n isDesktop: \"(min-width: 800px)\",\n reduceMotion: \"(prefers-reduced-motion: reduce)\",\n },\n (context) => {\n const { isDesktop, reduceMotion } = context.conditions;\n gsap.to(\".box\", {\n rotation: isDesktop ? 360 : 180,\n duration: reduceMotion ? 0 : 2,\n });\n },\n);"},{"language":"javascript","snippet":"const tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2.out\" } });\ntl.to(\".a\", { x: 100 }).to(\".b\", { y: 50 }).to(\".c\", { opacity: 0 });"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: gsap\ndescription: GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.\n---\n\n# GSAP\n\n## HyperFrames Contract\n\nHyperFrames controls GSAP through its `gsap` runtime adapter. Create a paused timeline synchronously, register it on `window.__timelines` with the exact `data-composition-id`, and let HyperFrames seek it.\n\n```html\n\n\n```\n\n- The registry key must match the composition root's `data-composition-id`.\n- Do not call `tl.play()` for render-critical motion.\n- Do not build timelines inside async code, timers, or event handlers.\n- Keep loops finite. HyperFrames renders finite video durations.\n\n## Core Tween Methods\n\n- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.\n- **gsap.from(targets, vars)** — animate from `vars` to current state (entrances).\n- **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end.\n- **gsap.set(targets, vars)** — apply immediately (duration 0).\n\nAlways use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).\n\n## Common vars\n\n- **duration** — seconds (default 0.5).\n- **delay** — seconds before start.\n- **ease** — `\"power1.out\"` (default), `\"power3.inOut\"`, `\"back.out(1.7)\"`, `\"elastic.out(1, 0.3)\"`, `\"none\"`.\n- **stagger** — number `0.1` or object: `{ amount: 0.3, from: \"center\" }`, `{ each: 0.1, from: \"random\" }`.\n- **overwrite** — `false` (default), `true`, or `\"auto\"`.\n- **repeat** — finite number; never `-1` in HyperFrames. Compute repeats from the visible duration. **yoyo** — alternates direction with repeat.\n- **onComplete**, **onStart**, **onUpdate** — callbacks.\n- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite.\n\n## Transforms and CSS\n\nPrefer GSAP's **transform aliases** over raw `transform` string:\n\n| GSAP property | Equivalent |\n| --------------------------- | ------------------- |\n| `x`, `y`, `z` | translateX/Y/Z (px) |\n| `xPercent`, `yPercent` | translateX/Y in % |\n| `scale`, `scaleX`, `scaleY` | scale |\n| `rotation` | rotate (deg) |\n| `rotationX`, `rotationY` | 3D rotate |\n| `skewX`, `skewY` | skew |\n| `transformOrigin` | transform-origin |\n\n- **"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn70kae1g9r73x5v5vn83saj7h86yevd\",\n \"slug\": \"gsap\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1779276118204\n}"},{"path":"references/effects.md","content":"# GSAP Effects for HyperFrames\n\nDrop-in animation patterns for HyperFrames compositions. Each effect is self-contained with HTML, CSS, and code.\n\nAll effects follow HyperFrames composition rules — deterministic, no randomness, timelines registered via `window.__timelines`.\n\n## Table of Contents\n\n- [Typewriter](#typewriter)\n- [Audio Visualizer](#audio-visualizer)\n\n---\n\n## Typewriter\n\nReveal text character by character using GSAP's TextPlugin.\n\n### Required Plugin\n\n```html\n\n\n\n```\n\n### Basic Typewriter\n\n```js\nconst text = \"Hello, world!\";\nconst cps = 10; // chars per second: 3-5 dramatic, 8-12 conversational, 15-20 energetic\ntl.to(\n \"#typed-text\",\n { text: { value: text }, duration: text.length / cps, ease: \"none\" },\n startTime,\n);\n```\n\n### With Blinking Cursor\n\nThree rules:\n\n1. **One cursor visible at a time** — hide previous before showing next.\n2. **Cursor must blink when idle** — after typing, during pauses.\n3. **No gap between text and cursor** — elements must be flush in HTML.\n\n```html\n|\n```\n\n```css\n@keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n}\n.cursor-blink {\n animation: blink 0.8s step-end infinite;\n}\n.cursor-solid {\n animation: none;\n opacity: 1;\n}\n.cursor-hide {\n animation: none;\n opacity: 0;\n}\n```\n\nPattern: blink → solid (typing starts) → type → solid → blink (typing done).\n\n```js\ntl.call(() => cursor.classList.replace(\"cursor-blink\", \"cursor-solid\"), [], startTime);\ntl.to(\"#typed-text\", { text: { value: text }, duration: dur, ease: \"none\" }, startTime);\ntl.call(() => cursor.classList.replace(\"cursor-solid\", \"cursor-blink\"), [], startTime + dur);\n```\n\n### Backspacing\n\nTextPlugin removes from front — wrong for backspace. Use manual substring removal:\n\n```js\nfunction backspace(tl, selector, word, startTime, cps) {\n const el = document.querySelector(selector);\n const interval = 1 / cps;\n for (let i = word.length - 1; i >= 0; i--) {\n tl.call(\n () => {\n el.textContent = word.slice(0, i);\n },\n [],\n startTime + (word.length - i) * interval,\n );\n }\n return word.length * interval;\n}\n```\n\n### Spacing with Static Text\n\nWhen a typewriter word sits next to static text, use `margin-left` on a wrapper span. Don't use flex gap (spaces cursor from text) or trailing space in static text (collapses when dynamic is empty).\n\n```html\n\n Ship something\n |\n
\n```\n\n### Word Rotation\n\nType → hold → backspace → next word. Cursor blinks during every idle moment (holds, after backspace).\n\n```js\nwords.forEach"},{"path":"skill-card.md","content":"## Description:\n\nGSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[lucas-kay8](https://clawhub.ai/user/lucas-kay8)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and designers use this skill to write deterministic GSAP animations for HyperFrames compositions, including tweens, timelines, transform-friendly motion, typewriter effects, and audio visualizers.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The audio visualizer helper can consume excessive local resources when run with extreme frame-rate, band-count, or media-size settings.\n\nMitigation: Run the helper manually on trusted media and keep fps and band counts reasonable.\n\nRisk: Example animations may include CDN-hosted GSAP scripts that do not match every project policy.\n\nMitigation: Review CDN script usage against the target project's dependency and security policy before adopting the examples.\n\n## Reference(s):\n\n- [GSAP Effects for HyperFrames](references/effects.md)\n- [GSAP documentation](https://gsap.com/docs/v3/)\n- [GSAP Timeline pause documentation](https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/)\n- [ClawHub skill page](https://clawhub.ai/lucas-kay8/skills/gsap)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Shell commands, Configuration instructions, Guidance]\n\n**Output Format:** [Markdown guidance with HTML, CSS, JavaScript, bash, and JSON examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May propose use of the bundled audio extraction helper, which produces per-frame JSON audio visualization data.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe... Skill: Gsap Owner: lucas-kay8 Summary: GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labe... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-20T11:21:58.204Z | auto GSAP animation reference for HyperFrames, first release: - Provides practical examples and best practices for using GSAP (gsap.to(), .from(), .","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1161,"uniquenessScore":57,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T19:23:29.031Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T21:53:01.132Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}