Which framework does this target?

The supplied example uses React/TypeScript and Next Link. Its helpers require project styling/utilities plus several UI/motion libraries; other-framework integration is an adaptation, not a bundled port.

Does it call any external service?

No explicit service API is present in the inspected source. It names local image/wordmark paths, whose files and fonts are absent from the archive. Supply local files and check the integrated page’s requests.

Can I swap the imagery?

Yes. The main image uses invert/contain/blend styling, so choose a compatible abstract plate. Supply accurate partner marks separately and follow identity/visible-label rules; ordinary person/photo slots have different requirements.

Is there a live particle effect?

No. The particle-like artwork is an img element. Motion comes from the partner strip and UI transitions, not a particle simulation.

Does hovering slow the partner strip?

The helper supports durationOnHover, but this hero currently passes differently named speed props. Reconcile that interface before claiming the intended hover slowdown works.

Particle Field Hero

Previews from the publisher

Introduce a product with copy beside an abstract particle-like still, followed by an automatically moving partner strip. The React/Next.js example also includes a fixed header and a mobile menu toggle. The illustration changes crop and treatment across breakpoints and light/dark modes; it is a static image, not a canvas particle simulation or a scroll-controlled visual field.

What you get

HeroSection source and demo, plus local Button, InfiniteSlider and ProgressiveBlur helpers. The package supplies editable component source to integrate and maintain, not a complete application or versioned block package.
A centered small-screen introduction that places text beside an absolutely positioned abstract image on large screens. The partner strip duplicates its children for continuous translation, with layered blur and gradient edges. The header has a functional local menu-open state, but its navigation and account links are placeholders.
The written contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. It calls for restrained motion and inline SVG interface icons with 1.5 px square-cap strokes; real vendor marks should be monochrome and visibly named. Reconcile these references with fixed classes and demonstration assets during integration.
Imagery/icon instructions, third-party notes and a source checker. Local cover/wordmark paths are referenced but their files and WOFF2 fonts are absent from the ZIP. React, Next Link, utility styling, cn, Lucide, Radix Slot, class-variance-authority, react-use-measure and the motion imports need host integration.

Before you choose

Finish the asset and route wiring before judging the hero’s polish. Keep the abstract image in service of a truthful product message, and validate the slider interface instead of assuming a visually plausible demo is already integrated.

Good fit

A product introduction where an abstract still and a compact partner strip support a concise message.
A page needing an editable header/hero composition and a basic mobile disclosure to adapt.
A team prepared to maintain source and supply accurate copy, authorized marks, local assets and actual destinations.

Not for

An interactive particle engine, automatic product-speed evidence or verified partner endorsements.
A dependency-free/versioned block or a guaranteed visual match with an established design system.
Working account authentication, booking, checkout or completed navigation destinations merely because those labels appear in the header.

How to use

You say

/hero-particle-field Add the Particle Field 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 host stack and copy the hero and helpers into its conventions. Resolve Next Link and project aliases; the slider uses framer-motion while ProgressiveBlur imports motion/react, so reconcile both dependencies deliberately. Other frameworks require a real port; standalone HTML is an optional explicit deliverable.
Replace the headline, support, CTA labels and all placeholder #link/# destinations with accurate content and real routes. The sample twice-as-fast claim is not a measured result. Merge or remove the included header if the page already has one, and connect account actions to existing flows.
Supply the abstract-particles cover and actual wordmarks locally; the archive only supplies paths. Follow the image-slot guide, especially using an abstract plate in this invert/contain/blend treatment rather than an ordinary photograph. Use portraits only for people, preserve name/image pairing and supply properly sized WebP/fonts. Replace fictitious partner names rather than presenting them as real customers.
Reconcile slider props before relying on the demo: the hero passes speed/speedOnHover, but the included helper accepts duration/durationOnHover. Correct that mismatch and test the intended speed/hover behavior; the untouched helper defaults to 25 seconds. Apply the documented theme and icon rules rather than assuming every asset treatment is already consistent.
Run node scripts/check-blocks.mjs TARGET and build the host app. Check phone menu disclosure, focus/expanded-state semantics, every destination, abstract-image crop, local asset resolution and reduced-motion handling for the repeating strip. The scanner cannot establish working routes, mobile acceptance, asset existence or real 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