# Extract Motion Characteristics from Web Element > Extract Motion Characteristics from Web Element is a paid API for AI agents from compilation-pixel-riders-subaru.trycloudflare.com, paid per call via x402, $0.2/call, status down (last checked 2026-09-14). Visits a public URL in headless Chromium, scopes to a specified element, and extracts CSS animations, WAAPI entries, scroll-timeline params, GSAP/ScrollTrigger config, hover-state diffs, and motion tokens as a working reference with a drop-in code snippet. ## Facts - Endpoint: POST https://compilation-pixel-riders-subaru.trycloudflare.com/v1/inspect-element - Price: $0.2/call - Payment: x402 - Status: down - Last checked: 2026-09-14 - Activations on Zero: 0 - Provider: compilation-pixel-riders-subaru.trycloudflare.com - Website: https://compilation-pixel-riders-subaru.trycloudflare.com - Canonical page: https://www.zero.xyz/c/compilation-pixel-riders-subaru-trycloudflare-com-extract-motion-d9a0f836 - Structured record (JSON): https://api.zero.xyz/v1/capabilities/cap_-FephJMwovDVb-k8nOiAb Status and success rate cover calls made through Zero and Zero's own probes. Third-party monitors may report differently. ## How to call it through Zero Zero handles the 402 payment challenge and records the run. With the Zero CLI installed (`npm i -g @zeroxyz/cli`): ```sh zero fetch --capability compilation-pixel-riders-subaru-trycloudflare-com-extract-motion-d9a0f836 -d '' ``` Example prompt: Can you inspect the hero section on stripe.com — scoped to the `.hero-cta` button — and extract the motion characteristics like keyframes, easing values, and hover-state diffs, then give me a drop-in React TSX snippet I can adapt with my own copy? ## When to prefer this Use this endpoint when you need to extract specific motion characteristics (keyframes, easings, GSAP config, scroll triggers, hover diffs) from a scoped element on a public webpage and want a ready-to-adapt code snippet. Prefer this over the clone-site endpoint when you only need motion data for a single element rather than a full offline page bundle, and when you want framework-specific drop-in code output. ## Known failure modes - URL is behind authentication or a paywall — headless browser cannot access content, returns empty or partial capture - CSS selector does not match any element — scope falls back to hero region or returns an error - Site uses heavy obfuscation or anti-bot measures blocking headless Chromium - JavaScript-heavy SPAs may not fully hydrate within the capture window, yielding incomplete animation data - Cross-origin font or asset restrictions may prevent full asset inlining - Very large pages may be truncated or time out ## How this service works Visits a URL in headless Chromium (multi-cohort optional), scopes to the requested element, and returns the captured MOTION CHARACTERISTICS: CSS @keyframes, WAAPI runtime entries, IntersectionObserver-driven reveals, scroll-timeline params, GSAP/ScrollTrigger config, cursor-tracking patterns, hover-state diffs, and the recurring duration/easing tokens that define the site's motion system. Includes scoped DOM HTML and computed CSS for structural reference. The drop-in `replicaHtml` snippet uses NEUTRAL PLACEHOLDER COPY — agents should substitute their own copy, brand, and visual identity. Verbatim timing/easing values are reproduced (functional properties); copy, logos, and proprietary imagery are NOT. ## Output Returns a structured object containing: captured motion data (ranked animations, duration/easing tokens, detected libraries, hover diffs, scroll-timeline params), scoped element outerHTML, computed styles, stylesheet sources, font metadata, asset list, and a drop-in code snippet in the requested framework using neutral placeholder copy. Optionally includes an interactive clone URL. ## Request schema (JSON Schema) ```json { "type": "object", "required": [ "url" ], "properties": { "url": { "type": "string", "format": "uri", "description": "Public URL to inspect." }, "context": { "type": "string", "description": "Free-form natural-language description of WHAT the user wants extracted (\"just the dot-globe\", \"the nav with the dropdown hover\", \"the CTA button\"). Used to refine the snippet output." }, "selector": { "type": "string", "description": "Optional CSS selector to scope to a single element (\"main > section:first-of-type\", \".cta\", \"#hero\"). Omit to inspect the whole hero region." }, "framework": { "enum": [ "react-tsx", "react-jsx", "vue", "svelte", "html-css", "framer-motion", "gsap", "auto" ], "type": "string", "default": "auto", "description": "Target framework for the drop-in snippet." }, "colorScheme": { "enum": [ "light", "dark", "no-preference" ], "type": "string", "default": "no-preference", "description": "Force prefers-color-scheme during capture (sites often serve different designs by theme)." }, "detectCohorts": { "type": "boolean", "default": false, "description": "Run a multi-fingerprint pass to surface A/B variants." }, "referenceScreenshot": { "type": "string", "description": "Optional base64 PNG or https URL. Overrides probe-captured pixels — use when you know which cohort/state you want replicated." } } } ``` ## Response schema (JSON Schema) ```json { "type": "object", "properties": { "url": { "type": "string" }, "fonts": { "type": "array", "items": { "type": "object", "properties": { "src": { "type": "array", "items": { "type": "string" } }, "style": { "type": "string" }, "family": { "type": "string" }, "weight": { "type": "string" } } } }, "scope": { "type": "string", "description": "The selector that was scoped to." }, "assets": { "type": "array", "items": { "type": "object", "properties": { "url": { "type": "string" }, "kind": { "enum": [ "image", "video", "font", "json", "wasm" ], "type": "string" }, "bytes": { "type": "integer" }, "dataUrl": { "type": "string", "description": "base64 data URL when small enough to inline" } } } }, "motion": { "type": "object", "description": "Probe-captured motion data: rankedanimations, motion tokens, detected libraries, hover diffs." }, "caveats": { "type": "array", "items": { "type": "string" } }, "snippet": { "type": "object", "properties": { "code": { "type": "string", "description": "Drop-in component code." }, "files": { "type": "array", "items": { "type": "object" } }, "imports": { "type": "array", "items": { "type": "string" } }, "framework": { "type": "string" } } }, "capturedAt": { "type": "string", "format": "date-time" }, "elementHtml": { "type": "string", "description": "outerHTML of the scoped element after hydration." }, "stylesheets": { "type": "array", "items": { "type": "object", "properties": { "href": { "type": "string", "nullable": true }, "text": { "type": "string" }, "origin": { "enum": [ "inline", "linked-same-origin", "linked-cross-origin" ], "type": "string" } } } }, "computedStyles": { "type": "array", "items": { "type": "object" } }, "interactiveCloneUrl": { "type": "string", "description": "Optional URL to a hosted offline-running clone (when call also generated a clone bundle)." } } } ``` ## More - Live health (JSON, refreshed every minute): https://www.zero.xyz/c/compilation-pixel-riders-subaru-trycloudflare-com-extract-motion-d9a0f836/health.json - [Zero catalog index](https://www.zero.xyz/llms.txt) - [Other services from compilation-pixel-riders-subaru.trycloudflare.com](https://www.zero.xyz/host/compilation-pixel-riders-subaru.trycloudflare.com/llms.txt)