# Extract Motion Characteristics from Web Element > Extract Motion Characteristics from Web Element is a paid API for AI agents from referrals-shoppers-compute-grown.trycloudflare.com, paid per call via x402, $0.2/call, status down (last checked 2026-09-15). Visits a public URL in headless Chromium, scopes to a specified element, and returns captured motion characteristics including CSS keyframes, WAAPI entries, scroll-timeline params, GSAP config, hover-state diffs, and timing/easing tokens, plus a drop-in neutral-copy HTML snippet. ## Facts - Endpoint: POST https://referrals-shoppers-compute-grown.trycloudflare.com/v1/inspect-element - Price: $0.2/call - Payment: x402 - Status: down - Last checked: 2026-09-15 - Activations on Zero: 1 - Provider: referrals-shoppers-compute-grown.trycloudflare.com - Website: https://referrals-shoppers-compute-grown.trycloudflare.com - Canonical page: https://www.zero.xyz/c/referrals-shoppers-compute-grown-trycloudflare-com-extract-motion-65dc3f03 - Structured record (JSON): https://api.zero.xyz/v1/capabilities/cap_G7oBBDB-IXKZNcxGNK19l 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 referrals-shoppers-compute-grown-trycloudflare-com-extract-motion-65dc3f03 -d '' ``` Example prompt: Go to stripe.com/payments and extract the motion characteristics from the hero section — specifically the CSS keyframes, easing tokens, and any GSAP config — then give me a drop-in React TSX snippet I can adapt with my own copy. ## When to prefer this Choose this endpoint when you need to study and adapt the motion system of a specific element or section on a public website — particularly when you want timing tokens, easing curves, keyframe stops, or animation library configs expressed as reusable parameters. Prefer over full-page clone when you only need motion data and a working snippet for a scoped component, not the entire page bundle. Best when targeting a specific UI pattern like a CTA, nav, or hero. ## Known failure modes - URL is behind authentication or a paywall — returns empty or incomplete motion data - Element selector does not match any DOM node — returns null scope with caveat - JavaScript-heavy animations require hydration time and may be partially captured — caveats array will note missed entries - Cross-origin font or asset restrictions may prevent full asset inlining - Site uses obfuscated CSS class names making selector targeting unreliable - Headless browser detection may serve a degraded or bot-blocked experience - Color scheme variant not served correctly if site ignores media query overrides ## 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 like GSAP or Framer Motion, hover-state diffs, scroll-timeline params), the scoped element's outerHTML, computed CSS styles, full stylesheet list, font metadata, asset inventory, and a drop-in framework-specific code snippet using neutral placeholder copy that demonstrates the captured motion patterns. Also includes capture timestamp, the effective scope selector, and optional caveats about what could not be captured. ## 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/referrals-shoppers-compute-grown-trycloudflare-com-extract-motion-65dc3f03/health.json - [Zero catalog index](https://www.zero.xyz/llms.txt) - [Other services from referrals-shoppers-compute-grown.trycloudflare.com](https://www.zero.xyz/host/referrals-shoppers-compute-grown.trycloudflare.com/llms.txt)