← Crafts
Scenes preview

Scenes

Platform pilot Solo engineer

Web-first creative scenes — composable browser animations with explicit lifecycle, errors, and a shipped dither-reveal scene.

Overview

Marketing sites and portfolios often bolt on one-off canvas effects that are hard to reuse or tear down. Scenes is a small library (@svene/scenes) for named scene instances with normalized options, blend/dither uniforms, and a first-party ditherReveal implementation.

Capabilities

  • @svene/scenes package with tree-shakeable exports (sideEffects: false)
  • createDitherReveal scene with look presets (defineDitherRevealLook, ditherRevealLooks)
  • Shared lifecycle types: SceneInstance, SceneStatus, SceneTarget
  • Structured errors: SceneError, createSceneError, isSceneError
  • Bun build to browser ESM; separate ./dither-reveal export path
  • Examples workspace for integration demos
mount(target) ready pause resume destroy Idle Mounting Active Paused Destroyed
Scene lifecycle
export const scene = {
  ditherReveal: createDitherReveal
} as const;

export {
  createDitherReveal,
  defaultDitherRevealOptions,
  defineDitherRevealLook,
  ditherRevealLooks,
  mergeDitherRevealOptions,
  normalizeDitherRevealOptions,
  resolveDitherRevealLook
} from "./scenes/dither-reveal";
Dither reveal scene in browser
Screenshot placeholder — dither-reveal transition on a hero image.