Shockwave
A taut surface you can hit. Each click is an impact: a pressure front leaves the point, fast at first and slowing as it spreads, pushing a faint lattice of points outward so they bunch into a bright compression ring followed by a softer trough and one or two fading ripples.
$149 once · every Pro piece
Points light only where they are squeezed hardest, a thin band of light rides that ring from white-hot to the accent to deep, and the energy falls off with distance and time. Up to four waves superpose, so two clicks visibly interfere. The surface gives a sub-pixel thump and the content, which stays real interactive DOM, is nudged a pixel or two as the front passes. At rest the field is still and nothing runs. Enter or Space on a control inside sends a wave from that control.
Install
npx shadcn@latest add @obsyde/shockwaveNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Shockwave } from '@/components/obsyde/ember/shockwave/Shockwave';
export function Example() {
return (
<Shockwave />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/shockwave/Shockwave.tsxcomponentember/shockwave/shockwave-demo.cssstylesember/shockwave/shockwave.cssstylesember/shockwave/ShockwaveDemo.tsxdemoember/type-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
fieldField | 'dots' | 'grid' | 'none' | 'dots' |
strengthStrength (px) | number | 10 |
durationDuration (ms) | number | 1600 |
densityDensity | number | 1 |
ringLight band | boolean | true |