Add this component

npx zentauri-ui add electric-border

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Surfaces & interaction

Give your content a little current.

A living perimeter for the things worth noticing. Quiet current, a local surge, and a little spark when you interact.

Interaction study / 002Electric Border

Zentauri / CurrentOnline

A little current.

Move along the edge. Send a signal. Your content stays at the center of it all.

Ready when you are

Hover to surge · Click to pulseSVG · Motion aware · No extra dependencies

The current lab

Find your frequency.

Zentauri / CurrentOnline

A little current.

Move along the edge. Send a signal. Your content stays at the center of it all.

Ready when you are

AppearanceSpeed1×Intensity1Thickness1.5pxRadius24px

System reduced motion always takes priority. Use the page theme toggle to compare light and dark.

Move along the edge. Send a signal. Your content stays at the center of it all.

Ready when you are

Install the current.

Use the package entry or vendor the source through the Zentauri CLI. No optional animation peer is needed.

pnpm add @zentauri-ui/zentauri-components

# Or vendor the component source:
npx @zentauri-ui/zentauri-components add electric-border

Electric Border API

Generated from the package prop types and variant definitions.

ElectricBorder

ElectricBorderProps

Variants

Prop	Type	Default
appearance	`amberbluecontrastcyandefaultdestructiveemeraldglassgradient-bluegradient-emeraldgradient-roseinfo`+8	default

Behavior

Prop	Type	Default
activeEnable animation. False retains a static rim and usable content.	`boolean \| undefined`	true
glowShow the soft glow around the current and static rim.	`boolean \| undefined`	true
intensityStrand displacement, clamped to 0–2. Zero keeps a smooth perimeter.	`number \| undefined`	1
interactiveEnable fine-pointer surges and click/keyboard activation pulses.	`boolean \| undefined`	true
introReveal the current around the perimeter on activation.	`boolean \| undefined`	true
radiusUniform corner radius in CSS pixels, clamped to 0–9999 and fitted to the box.	`number \| undefined`	24
reducedMotionForce a static rim. System reduced-motion preferences always take precedence.	`boolean \| undefined`	false
sparksShow up to two short-lived arcs outside the perimeter.	`boolean \| undefined`	true
speedAnimation rate, clamped to 0–3. Zero renders a static rim.	`number \| undefined`	1
thicknessStroke thickness in CSS pixels, clamped to 0.5–4.	`number \| undefined`	1.5

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

Electric Border CSS variables

Colors for the static rim, current, glow, and gradient endpoints. Every public token has a dark partner. Radius, speed, and deformation use props; --_eb-* values are private.

48 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-electric-border-core: #ffffff;
  --zui-electric-border-color: #0891b2;
  --zui-electric-border-subtle-color: #64748b;
  --zui-electric-border-contrast-color: #0f172a;
  --zui-electric-border-primary-color: #2563eb;
  --zui-electric-border-secondary-color: #64748b;
  --zui-electric-border-success-color: #16a34a;
  --zui-electric-border-destructive-color: #dc2626;
  --zui-electric-border-warning-color: #d97706;
  --zui-electric-border-info-color: #0284c7;
  --zui-electric-border-blue-color: #3b82f6;
  --zui-electric-border-cyan-color: #0891b2;
  --zui-electric-border-emerald-color: #059669;
  --zui-electric-border-violet-color: #7c3aed;
  --zui-electric-border-rose-color: #e11d48;
  --zui-electric-border-amber-color: #d97706;
  --zui-electric-border-slate-color: #475569;
  --zui-electric-border-gradient-blue-color: #2563eb;
  --zui-electric-border-gradient-blue-color-end: #0891b2;
  --zui-electric-border-gradient-emerald-color: #059669;
  --zui-electric-border-gradient-emerald-color-end: #65a30d;
  --zui-electric-border-gradient-rose-color: #e11d48;
  --zui-electric-border-gradient-rose-color-end: #9333ea;
  --zui-electric-border-glass-color: #64748b;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-electric-border-core-dark: #ffffff;
  --zui-electric-border-color-dark: #7df9ff;
  /* ...same variables with -dark at the end */
}

Overview

Import ZuiElectricBorder from the electric-border entry and wrap your own content. The root is a ref-forwarding div with no extra focus stop or button semantics. Provide your own padding, background, accessible labels, and visible child focus styles. The border does not clip content.

Defaults: appearance=default, active=true, interactive=true, speed=1, intensity=1, thickness=1.5px, radius=24px, glow=true, sparks=true, intro=true, and reducedMotion=false. Speed is clamped to 0–3, intensity to 0–2, thickness to 0.5–4, and radius to 0–9999. Nonfinite values use defaults. Intensity zero keeps a smooth outline and suppresses sparks.

The introduction takes about 600ms and a click pulse about 400ms at speed=1. Speed scales animation time. Toggling active back on replays the introduction; changing configuration preserves the running phase. These are Zentauri timings, not claimed reference constants.

Consumers using Tailwind v4 must include the package in their @source scan. The component server-renders its content and static rim; browser work starts after mounting. A missing matchMedia API keeps the static fallback.

Up to three strands, 320 perimeter samples, and two short-lived arcs are rendered at a maximum of 30 updates per second. Hidden tabs and offscreen instances suspend animation. On older browsers without ResizeObserver, mount, window resize, and child load events remeasure the frame.

The glow and arcs extend up to roughly 50px outside the frame at maximum intensity. Reserve surrounding space and avoid overflow:hidden on ancestors when you want the full effect. Use this on a few highlights rather than every item in a large list. Custom asymmetric or percentage corner radii are outside the uniform-radius API.

Common use cases

Feature cards, pricing highlights, and product announcements.
Composers and panels with native interactive content.
Status surfaces where text and semantics carry the meaning.

FAQ

Does this require Framer Motion, canvas, or WebGL?

No. Electric Border uses independently written SVG geometry and a bounded animation loop. It adds no dependency beyond the standard Zentauri React/CVA/class utility peers.

What happens with reduced motion or touch input?

System reduced-motion preferences, reducedMotion=true, active=false, and speed=0 produce a static rim. Touch and coarse pointers keep ambient animation without cursor tracking. Native child buttons and links remain usable; their activation can trigger a pulse when interactive=true.

How can I change colors and size?

Choose an appearance or override its paired --zui-electric-border-* CSS tokens. Use className and style for width, height, and content styling. Radius is a uniform corner radius in CSS pixels; it is fitted to the element dimensions.

Is this the React Bits implementation?

No. The interaction principles were studied in the React Bits demo. Zentauri uses an original SVG renderer, a smaller API, theme-aware colors, and a static fallback. It does not redistribute React Bits code or assets.

Interaction study inspired by React Bits Electric Border. Independently written SVG rendering; no reference code or assets are included.