Six different edge behaviors
Choose a single runner, opposed dual lights, a spectral loop, narrow scan, ambient pulse, or sequenced corner lock.
Interface & light
Border Beam
Turn a quiet frame into an active boundary with single and dual beams, spectral loops, focused scanners, ambient pulses, or sequenced corners.
Animated edge / focus-awareLet the boundary carry the signal.
Live system / 01Signal received.
Light at the edge
Motion that defines the boundary without stealing focus.
A moving border can signal status, focus, or premium detail without animating the content itself. Every EvenMesh beam remains restrained, focus-aware, and entirely CSS-driven.
Precise boundary control
Shape frame size, radius, border weight, cycle, footprint, glow, direction, surface, resting edge, and two light colors.
CSS-only production output
Copy a dependency-free snippet with focus and reduced-motion states, or download a complete standalone page.
Three-step workflow
How to use the Border Beam studio
- Choose the signal
Match the motion language to the role: status, focus, atmosphere, scanning, or a premium chromatic accent.
- Set a calm pace
Start with a longer cycle, then adjust footprint and glow before increasing speed or thickness.
- Test focus and motion
Hover and keyboard-focus the frame, pause and replay it, then verify the reduced-motion state before export.
Questions, answered.
Does the exported border require JavaScript?
No. The beam, focus response, pause-safe keyframes, and reduced-motion treatment are implemented in HTML and CSS.
Can several beams appear on one page?
Yes. Each instance carries its own values inline, so presets with different colors, sizes, and timings can coexist.
Will the animation flash aggressively?
No. Presets use continuous travel or slow opacity breathing rather than abrupt full-frame flashes.
What happens with reduced motion enabled?
Travel and pulse animations stop on a composed border state while the resting edge, content, and focus outline remain visible.