Skip to content
Get Pro
Effects

Cinder

A transition where content burns away along an organic edge.

$149 once · every Pro piece

Customize

Distance from the origin, roughened by smooth fractal noise, is thresholded into a hard, irregular front that clips the real content. On the content side of the front runs a 6px char band and a 3px rim from accent through hot to white, with a soft bloom, and a few sparks rise from it. Fully shown means no clip at all; reversing mid-burn runs back from the current front.

Install

npx shadcn@latest add @obsyde/cinder

Needs your licence key · Get Pro

Usage

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

import { Cinder } from '@/components/obsyde/ember/cinder/Cinder';

export function Example() {
  return (
    <Cinder origin="pointer" />
  );
}

Files

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

  • ember/cinder/Cinder.tsxcomponent
  • ember/cinder/cinder-demo.cssstyles
  • ember/cinder/cinder.cssstyles
  • ember/cinder/CinderDemo.tsxdemo
  • ember/effects-kit/kit.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
originOrigin'pointer' | 'center' | 'edge''pointer'
durationDuration (ms)number900
scaleNoise scale (px)number60