Beam

Hairline curves drawn between nodes, measured from the elements themselves and re-measured when anything resizes.

$149 once · every Pro piece

Customize

Layout

fan-in

chain

Trigger

interval

manual

Interval (ms)

Travel (ms)

Tail (px)

Bow (px)

A pulse runs along a curve with a white head and a tail that fades back through the accent to nothing, on an interval or when fired, and the node it lands on warms for a moment. In a chain an arriving pulse carries on to the next node.

Install

npx shadcn@latest add @obsyde/beam

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { BeamNode } from '@/components/obsyde/ember/beam/Beam';

export function Example() {
  return (
    <BeamNode />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/beam/Beam.tsxcomponent
ember/beam/beam-demo.cssstyles
ember/beam/beam.cssstyles
ember/beam/BeamDemo.tsxdemo
ember/effects-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`layout`Layout	`'fan-in' \| 'chain'`	`'fan-in'`
`trigger`Trigger	`'interval' \| 'manual'`	`'interval'`
`interval`Interval (ms)	`number`	`1400`
`duration`Travel (ms)	`number`	`1100`
`tail`Tail (px)	`number`	`90`
`curvature`Bow (px)	`number`	`0`