Effects, new
Before / After
Two crisp DOM layers divided by a spring-driven heat seam, with pointer momentum, round falling sparks and keyboard control.
$149 once · every Pro piece
Customize
horizontal
vertical
Install
npx shadcn@latest add @obsyde/before-afterNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { BeforeAfter } from '@/components/obsyde/ember/before-after/BeforeAfter';
export function Example() {
return (
<BeforeAfter />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/before-after/BeforeAfter.tsxcomponentember/before-after/before-after.cssstylesember/before-after/BeforeAfterDemo.tsxdemoember/tactile-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/reaction-bar/motion.tssharedember/kit2-kit/kit.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
orientationOrientation | 'horizontal' | 'vertical' | 'horizontal' |
initialPositionInitial position | number | 50 |
glowSeam glow | boolean | true |