@reiirene/sleeve-reveal

WebGL die-cut sleeve reveal built with Three.js, packaged for vanilla JS or React (including Figma Make kits).

Install

npm install @reiirene/sleeve-reveal

Peer dependency when using the React entry: react and react-dom (18+ or 19+).

Vanilla

import { initSleeveReveal } from '@reiirene/sleeve-reveal';
import '@reiirene/sleeve-reveal/sleeve-reveal.css';

const ctrl = initSleeveReveal({ canvas: '#webgl' });
// ctrl.dispose();

React (Figma Make)

import { SleeveReveal } from '@reiirene/sleeve-reveal/react';
import '@reiirene/sleeve-reveal/sleeve-reveal.css';

export function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <SleeveReveal canvasId="webgl" />
    </div>
  );
}

If you omit canvasId, a unique id is generated. The canvas fills its parent; give the parent a defined height (e.g. 100vh).

Publish to npm / Figma Make

1. Bump version in this package.json.
2. From repo root: npm run build:package (writes dist/; it is gitignored but included in the tarball).
3. cd packages/sleeve-reveal && npm publish (or publish a private scope per Figma’s registry docs).
4. In Figma Make, add the package to your kit and include guidelines for layout and SleeveReveal usage.