Clapperboard

Scene.js Recorder

🎬 Make a movie of CSS animation through Scene.js

Github / API / Scene.js / Main Project


* I recommend checking out the Scene.js Recorder demo in Chrome.
* In Safari, the `html-to-image` module may not render some parts.
  Use `@scenejs/render` in Node env.
* On mobile, memory issues may occur.

Motion Effect

  • Size: 200 x 200
  • Duration: 2s
  • Code: JS / React

Clapper 1

  • Size: 350 x 350
  • Duration: 3.5s
  • Code: JS / React

Card

  • Size: 350 x 360
  • Duration: 4s
  • Code: JS / React
K

Clapper 2

  • Size: 400 x 400
  • Duration: 8.1s
  • Code: JS / React

Square Transition

  • Size: 720 x 360
  • Duration: 4.9s
  • Code: JS / React
Scene 1
Scene 2