Beam Lattice Hero
A first screen on a lattice of hairline traces where pulses of light run in from the edges and converge on the call to action, the traces light up under the pointer, and the headline is revealed by a scanning light.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Every request on the fastest path.
Oraxis routes inference across 41 regions and 12 model providers, picks the quickest healthy path for each call, and shows you every hop.
- p50 38 ms
- 41 regions
- 99.99% uptime
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
/**
* BeamLatticeHero — a first screen on a routing lattice of light.
*
* Hairline traces are routed in from the edges of the frame to a ring
* around the call to action: a straight run, one 45-degree jog, a straight
* finish. Pulses of light (a white-hot head on a fading tail) run them in
* and swell a halo under the button as they land; hovering or focusing the
* button pulls three times as many. The lattice lights up under the
* pointer, and the headline is revealed once by a scanning light. The call
* to action is the kit's OrbitLightButton.
*
* Canvas 2D, cached lattice, paused when off-screen or hidden. Reduced
* motion keeps the lattice and the pointer light, without pulses or scan.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
The first screen of the Dark Precision kit. Behind the headline, a lattice of hairline traces is routed in from the edges of the frame to a ring around the call to action, the way tracks run into a chip: a straight run, one 45-degree jog, a straight finish, snapped to an 8px grid, with vias at the bends. Pulses of light, a white-hot head on a tail that fades along the trace, run the traces in and swell a halo under the button as they land. Hover or focus the button and three times as many arrive, faster. Move the pointer and the traces around it light up in the accent, with a soft wash on the ground beneath. The headline is revealed once, left to right, by a scanning line of light. The button is the kit's OrbitLightButton, so its own light answers the pointer too. The lattice is cached, the loop pauses off-screen and when the tab is hidden, and reduced motion keeps the lattice and the pointer light but drops the pulses and the scan.
Curator’s note
The Dark Precision kit's signature entry (slot 1, hero), cut from dark-precision-site. Pro: a Canvas 2D routing lattice with pulse physics, a pointer light pass and a synced scan reveal, composing the kit's OrbitLightButton.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Dark Precision Site
templatesA complete launch site for a developer platform in the Linear/Vercel register: a nav that morphs into a command palette, a hero on a routing lattice of light, a trace console, beams that deliver, a circuit of features, pricing lit by a usage slider, a WebGL light-cone call to action and a horizon-lit footer.
Circuit Feature Map
sectionsFeatures as nodes on a hairline circuit around a core chip: traces draw in on scroll, pulses run out of the core to each node, and hovering a node lights its trace, its pin and the core.
Horizon Light Footer
sectionsA footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.