{"uid":"cap_G7oBBDB-IXKZNcxGNK19l","slug":"referrals-shoppers-compute-grown-trycloudflare-com-extract-motion-65dc3f03","name":"Extract Motion Characteristics from Web Element","description":"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.","url":"https://referrals-shoppers-compute-grown.trycloudflare.com/v1/inspect-element","method":"POST","headers":{},"bodySchema":{"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."}}},"responseSchema":{"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)."}}},"example":null,"exampleRequest":null,"tags":[],"displayCostAmount":"0.2","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"down","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.2/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.2","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.2","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_PcrFRyf4Ll3yJ5n4i4osq","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.2","costPer":"request","priority":0,"asset":null,"unit":"request","depositMicros":null,"planRef":null}],"brandName":"referrals-shoppers-compute-grown.trycloudflare.com","brandSlug":"referrals-shoppers-compute-grown-trycloudflare-com-x402","brandBaseUrl":"https://referrals-shoppers-compute-grown.trycloudflare.com","brandDocsUrl":null,"whatItDoes":"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.","exampleAgentPrompt":"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.","exampleUseCases":null,"resultDescription":"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.","failureModes":["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"],"whenToPreferThis":"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.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":1,"lastUsedAt":"2026-05-27T15:54:58.775Z","lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-09-15T00:33:08.267Z","isFirstParty":false}