Skip to content
StyleDrop 04 · 27 Sept 2026Complete kit · 12 assets

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.

Featured
NewPro

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.

herocanvasbeams
NewPro

A 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.

backgroundwebglshader
New

A 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.

buttonctaborder beam
New

A 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.

cardspotlightborder glow
NewPro

A 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.

navigationnavbarcommand palette
New

Slit Light Heading

text effects

A 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.

text effectheadingscroll
NewPro

Features 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.

featuressectioncircuit
New

An 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.

forminputemail
NewPro

Pricing 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.

pricingsectionslider
New

A 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.

footersectionwordmark
New

Beam Connector

animations

A 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.

animated beamconnectorsvg

The site they were cut from

Every asset above, composed as one working site. It ships with the kit.

viberdy.dev/library/dark-precision-site

Dark Precision Site

View template

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

6 Pro and 6 free assets. Pro installs through the @viberdy namespace with your API key, set up once. Set it up

Signal Field

backgrounds

A machined dot grid lit by slow waves of light, with a pointer lens and click ripples.

backgroundcanvascursor

Slow conic light beams rotating behind content, CSS-only and compositor-friendly.

backgroundbeamsconic-gradient

A canvas dot grid that bulges and brightens away from the cursor.

backgroundcanvascursor
Trending
Pro

Glare Tilt Card

components

A card that tilts toward the pointer with a true angular specular sweep.

card3dglare
Pro

A tile field that leans toward the pointer and brightens with proximity.

gridmagneticpointer
Pro

A full-bleed radial glow that tracks the cursor with zero re-renders.

spotlightcursorradial-gradient
Pro

A waitlist hero that actually captures: validation, pending, success and queue position.

herowaitlistform