Effects, new

Burn Through

Hold to confirm, and the screen burns away.

$149 once · every Pro piece

Customize

Page

light

dark

Hold (ms)

Burn (ms)

Restore (ms)

Heat fills the pill from the left; on completion a ragged hole burns out from it, white-hot at the edge, then flame, a cool violet band and char, with ash blown off the top and flame tongues licking up from below. The screen underneath is live DOM, revealed through the hole. Restore grows the page back. WebGL with a CSS fallback; a crossfade under reduced motion.

Install

npx shadcn@latest add @obsyde/burn-through

Needs your licence key · Get Pro

Usage

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

import { BurnThrough } from '@/components/obsyde/ember/burn-through/BurnThrough';

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

Files

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

ember/burn-through/BurnThrough.tsxcomponent
ember/burn-through/burn-through-demo.cssstyles
ember/burn-through/burn-through.cssstyles
ember/burn-through/burn-particles.tsmodule
ember/burn-through/burn-gl.tsmodule
ember/burn-through/burn-field.tsmodule
ember/burn-through/BurnHold.tsxmodule
ember/burn-through/BurnThroughDemo.tsxdemo
ember/shared/accent.tsshared
ember/shared/ember.cssshared
ember/shared/spring.tsshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`page`Page	`'light' \| 'dark'`	`'light'`
`holdMs`Hold (ms)	`number`	`1600`
`duration`Burn (ms)	`number`	`5800`
`restoreDuration`Restore (ms)	`number`	`2900`