Particle Field Hero

A full-bleed canvas particle field fills the background. Each particle gets its starting position and direction from a seed, drifts 0.15–0.4px per frame and bounces off the edges; any two particles closer than linkDistance are joined by an accent-colored line that fades with distance. When the pointer comes within 120px it pushes particles away, and they slip back into their drift once it leaves. A radial mask fading from the background color to transparent sits under the headline, so the text keeps its contrast however dense the field gets. Optionally, a glass-framed photo card sits on the right.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ParticleFieldHero/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/particle-field-hero.en.json

Usage

import { ParticleFieldHero } from "@/components/ui/particle-field-hero";

<ParticleFieldHero
  eyebrow="潮汐感測平台 · 公開測試中"
  title="把每一個感測點連成一張網"
  subtitle="千台裝置的即時讀數在同一個畫面流動。"
  primaryAction={{ label: "申請試用", href: "/signup" }}
  secondaryAction={{ label: "看架構說明", href: "/docs" }}
  count={100}
  linkDistance={120}
  showMedia
  images={[{ src: "/hero/sensor.jpg", alt: "海岸邊的感測站" }]}
/>

Props

ParticleFieldHeroAction

ParticleFieldHeroImage

How it works

• Particles come from a mulberry32 PRNG seeded with seed, so positions and directions are identical every time; changing speed does not reseed, so nothing jumps.
• The repel is only a draw-time offset that is never written back to the particle, so once the pointer leaves, particles carry on along their original path. Pointer position and repel strength ease at 0.12 per frame for smooth entry and exit. Only mouse and pen respond; touch drags don't trigger it.
• Colors are read with getComputedStyle inside the effect: particles use the canvas currentColor (neutral-400 light, neutral-500 dark) and links use the accent at 25% opacity; both are re-read when the theme changes.
• Canvas resolution is capped at DPR 2 and follows its size through a ResizeObserver; rAF pauses when the field scrolls out of view (IntersectionObserver) or the tab is hidden (visibilitychange), and everything is cleaned up on unmount.
• Overridable CSS variables: --wb-particle-field-hero-accent (default #0d9488, #2dd4bf in dark mode), --wb-particle-field-hero-speed, --wb-particle-field-hero-duration.
• Entrance: the canvas fades in over 800ms; eyebrow, headline, subtitle and CTAs rise 16px and fade in, 80ms apart, easing cubic-bezier(0.22,1,0.36,1).

Accessibility

• The root is a <section aria-labelledby> pointing at the headline's useId.
• The canvas and radial mask are aria-hidden and purely decorative; the placeholder photo card uses role="img" with its alt text.
• CTAs are <a> elements or type="button" buttons with a focus-visible ring.
• With "reduce motion" enabled, a single static frame of particles and links is drawn: no rAF loop and no repel. The text entrance becomes a 150ms fade with no stagger.