Skip to main content

Getting Started

Install (npm)​

npm install disclose-dsl

Basic Usage (Vanilla)​

import { Scene, Circle, Rect, play } from 'disclose-dsl';

const scene = Scene((t) => [
  Circle(60)
    .fill('#ff4d4f')
    .move({ x: [-200, 200], duration: 2000, ease: 'easeInOut' })
    .opacity({ from: 0, to: 1, duration: 800 }),

  Rect(140, 90)
    .fill('#2f54eb')
    .scale({ from: 0.7, to: 1.1, duration: 1200, ease: 'easeOut' })
    .rotate({ from: 0, to: Math.PI / 8, duration: 1200 }),
]);

const canvas = document.querySelector('#stage');
if (!canvas) throw new Error('Canvas not found');

play(canvas, scene);

Use via Script Tag (ESM)​

You can use the ESM build directly in the browser via type="module".

<head>
  <script type="module">
    import { Scene, Circle, play } from 'https://unpkg.com/disclose-dsl@0.1.2/dist/index.js';

    const scene = Scene(() => [
      Circle(60).fill('#ff4d4f').move({ x: [-200, 200], duration: 2000 }),
    ]);

    const canvas = document.querySelector('#stage');
    play(canvas, scene);
  </script>
</head>
<body>
  <canvas id="stage" style="width: 800px; height: 400px;"></canvas>
</body>

Scene Options​

Scene can also be called with options:

const scene = Scene(
  { duration: 4000, timeScale: 1.25 },
  (t) => [
    Circle(40).fill('#22c55e').move({ x: [-120, 120], duration: 1200, loop: true }),
  ]
);
  • duration clamps timeline time in the renderer.
  • timeScale multiplies the time received by the scene.

React​

import { useEffect, useRef } from 'react';
import { Scene, Circle, play } from 'disclose-dsl';

export function DiscloseCanvas() {
  const ref = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    if (!ref.current) return;

    const scene = Scene(() => [
      Circle(50).fill('#38bdf8').move({ x: [-120, 120], duration: 1400, loop: true }),
    ]);

    const handle = play(ref.current, scene);
    return () => handle.stop();
  }, []);

  return <canvas ref={ref} style={{ width: 800, height: 400 }} />;
}

Vue​

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { Scene, Circle, play } from 'disclose-dsl';

const canvasRef = ref(null);
let handle;

onMounted(() => {
  const scene = Scene(() => [
    Circle(50).fill('#22c55e').move({ x: [-120, 120], duration: 1400, loop: true }),
  ]);
  handle = play(canvasRef.value, scene);
});

onBeforeUnmount(() => {
  if (handle) handle.stop();
});
</script>

<template>
  <canvas ref="canvasRef" style="width: 800px; height: 400px;"></canvas>
</template>

Angular​

import { AfterViewInit, Component, ElementRef, ViewChild, OnDestroy } from '@angular/core';
import { Scene, Circle, play } from 'disclose-dsl';

@Component({
  selector: 'disclose-canvas',
  template: `<canvas #stage style="width: 800px; height: 400px;"></canvas>`,
})
export class DiscloseCanvasComponent implements AfterViewInit, OnDestroy {
  @ViewChild('stage', { static: true }) stage!: ElementRef<HTMLCanvasElement>;
  private handle: { stop: () => void } | null = null;

  ngAfterViewInit() {
    const scene = Scene(() => [
      Circle(50).fill('#f97316').move({ x: [-120, 120], duration: 1400, loop: true }),
    ]);
    this.handle = play(this.stage.nativeElement, scene);
  }

  ngOnDestroy() {
    this.handle?.stop();
  }
}