Which framework does this target?

React/TypeScript with a project Button, utility classes and embedded styled-jsx animation CSS. Adapt the style mechanism to your framework rather than assuming a drop-in port is included.

Does it call any external service?

The inspected component has no integration API calls. It displays local SVG paths, but those files are absent from the ZIP. Supply local assets and test the completed app’s requests separately.

Can I swap the imagery?

Yes. Edit the two mark arrays and supply appropriate local files. For real vendor logos, follow accurate identity and visible-label rules; portraits/photos or abstract plates apply only to suitable added image slots, not as arbitrary logo replacements.

Are the tools already connected?

No. This is a presentation component. Actual integration APIs, authentication and compatibility evidence must come from your product.

Do visitors control the rows by scrolling?

No. Both rows run automatic 30-second CSS loops in opposite directions. Pause/reduced-motion handling and any manual controls need implementation.

Integration Grid Hero

Previews from the publisher

Present an ecosystem message above two opposing rows of tool marks. Each row repeats its supplied SVG paths and moves automatically behind edge fades on a light/dark grid-backed section. The React source gives you the layout and motion; it neither connects services nor verifies the compatibility claims in the sample copy.

What you get

A React/TypeScript IntegrationHero component and minimal usage example. The source is copied and maintained in your project rather than supplied as a versioned package or complete app.
Two arrays with seven local SVG paths each, repeated four times per row. Embedded CSS runs opposite 30-second continuous translations with fade overlays; this is automatic marquee behavior, not a visitor-driven scroll/step controller.
Written references define warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. The icon contract uses inline SVG with 1.5 px square-cap strokes and labeled monochrome marks for real vendors. Apply these during integration: the example’s fixed styles and effect parameters are not all controlled by one theme token.
Local-asset, icon and imagery instructions, third-party notes and a source-check script. The named logo SVGs and local fonts are not included in this archive. The host must supply those assets, React, its Button component, theme/utility styling and support or adaptation for styled-jsx.

Before you choose

Show fewer accurate integrations rather than a large unsupported number. Help visitors identify each tool and reach real documentation; the moving marks should summarize an ecosystem that already exists, not imply one.

Good fit

A product introduction with a real supported-tool ecosystem that needs a compact visual overview.
A page seeking an existing centered-message and repeated-mark layout rather than a blank first section.
A team comfortable maintaining source and replacing demo claims/assets with accurate, documented integration information.

Not for

Connecting accounts, OAuth, API calls, integration configuration or verification that any pictured tool works with your product.
A dependency-free/versioned block or an automatic match for an established design system.
A complete page with functional navigation, forms, authentication or checkout, or evidence supporting the sample 250-plus-tools claim.

How to use

You say

/hero-integration-grid Add the Integration Grid Hero section to the top of the landing page for [product name]. Use my supplied copy and assets, and follow the existing page framework and styling.

Inspect the existing framework and copy the component/demo into its conventions, resolving React and the project Button. The component uses styled-jsx; preserve it in a supported environment or move the animation CSS into the host styling system. A non-React port or standalone HTML version requires an explicit adaptation.
Replace the headline, description and tool-count claim with facts about your product. Edit the two source arrays to include only genuinely supported tools. Logo paths alone do not constitute implementations or vendor approval; link to real integration information if visitors need to evaluate support.
Supply the referenced local mark files and fonts. The current code uses img paths with generic alt text, while the written icon contract calls for inline monochrome vendor marks with visible names. Reconcile those requirements, provide meaningful labels and do not apply the generic abstract-image rule blindly to authentic vendor identity.
Connect Start here to an actual action; the example Button has no handler or destination. Reconcile fixed white/black/gray colors and the 24 px dot field with the written warm/teal ruled-grid contract. The central composition has no content props, so direct source edits or an added API are needed.
Run node scripts/check-blocks.mjs TARGET, build and review the actual host page on phones. Check local logo resolution, accessible naming, focus/action behavior, continuous-loop seams and reduced-motion/pause handling, which is not supplied. The checker cannot verify integrations, asset existence or actual network isolation.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT