Magnetic Lattice Hero

A full-bleed canvas draws a regular lattice of nodes joined by thin lines. As the pointer moves inside the section, nodes within the radius are pulled towards it, the lines bend with them, and nearby nodes and lines light up in a glowing neon accent. Click and a ripple spreads out from that point, pushing each node it passes 14px outward before it springs back with a brief flash. Every node returns to rest through spring integration, and a dark radial scrim behind the centred text keeps the headline readable however busy the lattice gets.

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">

<MagneticLatticeHero/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/magnetic-lattice-hero.en.json

Usage

import { MagneticLatticeHero } from "@/components/ui/magnetic-lattice-hero";

<MagneticLatticeHero
  eyebrow="格點雲 2.0 開發者預覽"
  title="讓每一次部署都看得見"
  subtitle="服務、佇列與資料庫的連線狀態畫成一張即時拓樸圖。"
  primaryAction={{ label: "建立免費專案", href: "/signup" }}
  secondaryAction={{ label: "閱讀文件", href: "/docs" }}
  gap={36}
  radius={160}
  diagonal
/>

Props

MagneticLatticeHeroAction

MagneticLatticeHeroRipplePoint

How it works

• Every node has a rest position and a current position, and chases its target each frame through spring integration (stiffness 0.08, damping 0.82). Once everything is back at rest the loop stops on its own and wakes again on the next pointer move.
• Magnetism only responds to mouse and pen: nodes inside the radius move towards the pointer by (1 - d/r)² × strength, never further than their distance to it. Touch drags do not pull the lattice, but a tap still sends out a ripple.
• The ripple ring is 40px wide and expands at --wb-magnetic-lattice-hero-ripple-speed (default 600px/s) until it reaches the corner farthest from its origin. Up to 4 run at once; beyond that the oldest is dropped.
• The glow (shadowBlur) is only drawn on bright nodes and the whole lattice is stroked in one pass, keeping each frame cheap. Canvas DPR is capped at 2, a ResizeObserver rebuilds the lattice, an IntersectionObserver pauses it when scrolled out of view, and everything is cleaned up on unmount.
• Overridable CSS variables: --wb-magnetic-lattice-hero-accent (dark defaults to #2dd4bf; auto uses #0d9488 in light and #2dd4bf in dark), --wb-magnetic-lattice-hero-ripple-speed and --wb-magnetic-lattice-hero-duration. Colours are read inside the effect and re-read on theme changes when surface="auto".
• Entrance order: eyebrow, title, 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 title's useId.
• The canvas and the radial scrim are both aria-hidden and purely decorative; the scrim behind the text keeps the headline contrasted against the lattice.
• CTAs are <a> elements or type="button" buttons with a focus-visible ring; focusing a CTA from the keyboard fires one decorative ripple at the button.
• With prefers-reduced-motion (reduce motion) enabled, only a static lattice is drawn — no pointer follow and no ripples — and the entrance becomes a 150ms fade with no stagger.