# Web Element Motion Characteristics Extractor > Web Element Motion Characteristics Extractor is a paid API for AI agents from eg-pie-web-effect-replicator.hf.space, paid per call via MPP, $0.2/call, status unknown (last checked 2026-09-14, last successful call 2026-06-23). Visits a public URL in headless Chromium, scopes to a specified element, and returns captured motion characteristics (CSS keyframes, WAAPI, GSAP, scroll-timeline, hover diffs, easing tokens) plus a drop-in neutral-copy HTML snippet demonstrating the motion patterns. ## Facts - Endpoint: POST https://eg-pie-web-effect-replicator.hf.space/v1/element-motion - Price: $0.2/call - Payment: MPP - Status: unknown - Last checked: 2026-09-14 - Last successful call: 2026-06-23 - Success rate: 100% of calls made through Zero - Activations on Zero: 1 - Provider: eg-pie-web-effect-replicator.hf.space - Website: https://eg-pie-web-effect-replicator.hf.space - Canonical page: https://www.zero.xyz/c/eg-pie-web-effect-replicator-hf-space-web-element-motion-4f3e32ab - Structured record (JSON): https://api.zero.xyz/v1/capabilities/cap_gxvHeFQmo-6G0ldC_6RKO 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 eg-pie-web-effect-replicator-hf-space-web-element-motion-4f3e32ab -d '' ``` Example prompt: Pull the motion characteristics from the hero section of stripe.com — I want the CSS keyframes, easing tokens, and hover-state diffs — and give me a drop-in React TSX snippet with neutral placeholder copy that I can adapt for my own brand. ## When to prefer this Choose this endpoint when you need structured, machine-readable motion characteristics (timing, easing, keyframe stops, animation library config) from a specific element on a live website, especially when you want a ready-to-adapt code snippet. Prefer over a full site-clone endpoint when you only need one component's motion data rather than the entire page bundle, and over manual inspection when you need the output in a programmatic format an AI agent can reason over. ## Known failure modes - URL is behind authentication or bot protection — headless browser blocked, returns error or empty capture - Element selector matches nothing — scoped HTML and motion data will be empty or fall back to full hero region - Site uses heavy canvas-based animation not expressible in CSS/WAAPI — motion data sparse, caveats populated - Network timeout on slow or large pages — partial capture returned with caveats - Page requires interaction (click, scroll past fold) to trigger animations — some keyframes may be missed - Invalid URL format — schema validation error before any capture occurs ## 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, motion tokens, detected libraries like GSAP/WAAPI, hover diffs, scroll-timeline params), scoped outerHTML and computed styles, font and asset metadata, a drop-in code snippet in the requested framework with neutral placeholder copy, caveats about capture limitations, and an optional 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/eg-pie-web-effect-replicator-hf-space-web-element-motion-4f3e32ab/health.json - [Zero catalog index](https://www.zero.xyz/llms.txt) - [Other services from eg-pie-web-effect-replicator.hf.space](https://www.zero.xyz/host/eg-pie-web-effect-replicator.hf.space/llms.txt)