Scenejs
🎬 Scene.js is JavaScript & CSS timeline-based animation library
Install / Use
/learn @daybrush/ScenejsREADME
🚀 Examples
- ClapperBoard Animation
- Panda eating Bamboo Animation
- Circle Burst
- Motion Effect
- Tree Animation
- Snow Animation
- Card Rotation
- Raindrop Effect
- Cube
- Shape
- Timer
⚙️ Installation
$ npm install scenejs
<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>
📄 Documents
📦 Packages
|Package|Version|Description|
|---|---|---|
|react-scenejs|
|A React Component that create JavaScript & CSS timeline-based animation with Scene.js.|
|svelte-scenejs|
|A Svelte Component that create JavaScript & CSS timeline-based animation with Scene.js.|
|vue-scenejs|
|A Vue 3 Component that create JavaScript & CSS timeline-based animation with Scene.js.|
|vue2-scenejs|
|A Vue 2 Component that create JavaScript & CSS timeline-based animation with Scene.js.|
|@scenejs/render|
|Make a movie of CSS animation through Scene.js.|
|@scenejs/effects|
|Effect collection library where you can add scene effects to Scene.js.|
|@scenejs/timeline|
|A library that represents the timeline of Scene.js. You can control time, properties, and items.|
|@scenejs/media|
|A library for playing or controlling media with Scene.js.|
|@scenejs/iframe|
|A library that control the animation of iframe with Scene.js.|
🎬 Make Scene
import Scene from "scenejs";
const scene = new Scene({
".class": {
0: "left: 0px; top: 0px; transform: translate(0px);",
1: {
"left": "100px",
"top": "0px",
transform: "translate(50px)",
},
2: {
"left": "200px",
"top": "100px",
transform: {
translate: "100px",
},
}
}
}, {
selector: true,
easing: "ease-in-out",
}).play();
🎬 Add Media (Audio/Video)
This library supports adding video and audio components to your scene. To add a video or an audio, you need to install @scenejs/media library.
Add necessary npm package
$ npm i @scenejs/media
How to use
import MediaScene from '@scenejs/media';
const mediaScene = new MediaScene();
mediaScene
.addMedia("background", "./background.mp3")
.seek(0, 40.79);
mediaScene
.addMedia("video", "./video.mp4")
.seek(0, 40.79)
.setVolume(1)
.setPlaySpeed(1)
.setDelay(startTime);
scene.setItem("video",mediaScene);
Please note that this library uses the built-in capability of your browser to play audio and video files. Make sure necessary codecs are installed, and the browser supports the video/audio file being added to the project
✨ Effects
Related Skills
bluebubbles
344.4kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
node-connect
344.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
slack
344.4kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
99.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
