Dark Precision
OLED black, 1px hairlines and light that answers the pointer: beams, lit borders, lit grids.
Every asset, standalone
Designed together as one site, then cut apart. Take one, or take the whole kit.
Beam Lattice Hero
heroesA 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.
Lit Dot Matrix Field
backgroundsA WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
Orbit Light Button
componentsA dark pill whose border carries one light: it laps the outline slowly, glides to the nearest point of the border under the pointer and lights the surface from there, and a press sends a ring outward.
Pointer Lit Card
componentsA card lit from the pointer: a bright arc of light on the hairline border, a softer wash across the surface, a two-degree tilt toward the pointer and a little counter-parallax on the content.
Morphing Command Nav
componentsA floating nav pill that grows into a command palette in place: the same surface morphs from pill to panel, results are grouped with a light that slides between them, and it shrinks back on Escape or a pick.
Slit Light Heading
text effectsA heading lit by a narrow slit of light that crosses it as it scrolls into view: letters under the slit burn white, letters it has passed stay lit, letters ahead wait in the dark.
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.
Deploy Log Input
patternsAn email field that answers with a streaming log: on submit, short lines stream under it with spinners turning into checks while a beam of light runs along its top edge, and the last line waits for your handler.
Fit Light Pricing
sectionsPricing driven by a usage slider on a log scale: every price rolls to its new digits as you drag, and a light moves to the plan that costs least at that volume, its arc growing as usage nears the next plan.
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.
Beam Connector
animationsA hairline beam between any two elements, routed with rounded right-angle elbows, that carries a pulse of light once per cycle and lands with a flash at the far end.
The site they were cut from
Every asset above, composed as one working site. It ships with the kit.
Complete kit · Drop 04
The whole Dark Precision kit in one command.
npx shadcn@latest add @viberdy/beam-lattice-hero @viberdy/lit-dot-matrix-field @viberdy/orbit-light-button @viberdy/pointer-lit-card @viberdy/morphing-command-nav @viberdy/slit-light-heading @viberdy/circuit-feature-map @viberdy/deploy-log-input @viberdy/fit-light-pricing @viberdy/horizon-light-footer @viberdy/beam-connector @viberdy/dark-precision-site6 Pro and 6 free assets. Pro installs through the @viberdy namespace with your API key, set up once. Set it up
More Dark Precision in the library
Signal Field
backgroundsA machined dot grid lit by slow waves of light, with a pointer lens and click ripples.
Beam Sweep Backdrop
backgroundsSlow conic light beams rotating behind content, CSS-only and compositor-friendly.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Glare Tilt Card
componentsA card that tilts toward the pointer with a true angular specular sweep.
Magnetic Tile Grid
backgroundsA tile field that leans toward the pointer and brightens with proximity.
Spotlight Follow Background
backgroundsA full-bleed radial glow that tracks the cursor with zero re-renders.
Waitlist Capture Hero
heroesA waitlist hero that actually captures: validation, pending, success and queue position.