Tactical Button

Three graphite buttons with scattering text and staggered brackets: Classic, Scan and Shutter.

LIVE PREVIEWYour changes update liveLocal renderer

Tweaks

Tactical Button settings

Style

Variant

Choose a motion style; use a preset to apply its complete palette and tuning.

Content & state

Label

Visible label and accessible button name, up to 40 characters.

Disabled

Blocks activation and cancels decorative motion.

Animate

Enable hover and press effects. Reduced-motion preferences always take priority.

Colours

Text color

Resting letter colour.

Background color

Button fill and Shutter panel colour.

Corner color

Bracket colour and Scan sweep accent.

Layout

Desktop font size in pixels; compact screens use 87.5% of this size.

Space on each side of the label in pixels.

Space above and below the label. The native target remains at least 44 pixels high.

Tracking in em units; label and decorative copies stay aligned.

Brackets

Length of each corner arm in pixels.

Stroke weight in pixels.

Outward diagonal travel in pixels. Zero keeps the brackets still.

Travel duration in milliseconds; stagger is independent.

Milliseconds between corners, preserving the Classic corner order.

Text scatter

Scatter colour

Letter colour while scattering. When the text resolves, its normal or Shutter reveal colour returns.

Milliseconds per resolved character. The first character resolves at 60% of this interval.

Scatter text

Use Classic’s character scramble on pointer entry. Turning this off keeps the label readable throughout.

Classic motion

How far the Classic fill retreats on hover, in pixels.

Classic fill blur on hover, in pixels.

Classic label scale on hover. One keeps its original size.

Your settings travel with the component.
Preview size and pause stay here.

Tactical Button v1.0.0

Package 1.0.0 · Independent componentMIT licensed

Install & usageReact component

API reference28 properties

Usage notesComponent documentation

Rendering & accessibilityLocal renderer