cdx-player
v1.0.3
Published
High-performance Lottie & TGS (.cdx) player for the web with built-in binary decompression.
Maintainers
k.nirmalReadme
CDX player (by K.Nirmal)
High-performance Lottie & TGS (.cdx) player for the web. No dependencies needed in your HTML, it auto-loads Lottie from CDN.
🚀 Features
- Auto Decompression: Directly plays
.cdx,.tgs, and GZipped Lottie files. - Smart Caching: Uses Browser Cache API to save bandwidth.
- Ultra Lightweight: Single file, easy to integrate.
- Framework Ready: Works in React, Vue, Angular, and Plain HTML.
📦 Installation (NPM)
npm install cdx-playerExample package.json
If you are building a React/Next.js or Node project, your package.json should look like this:
{
"name": "my-animation-project",
"version": "1.0.3",
"dependencies": {
"cdx-player": "^1.0.3"
}
}🛠️ Usage
1. Plain HTML
Add this line to your <head>:
<script src="https://dev.dubhub.lk/script/nirmal.js"></script>Basic Implementation
<!-- Playing a .cdx or .edu animation using URL -->
<nirmal-player
src="https://dev.dubhub.lk/anime/dev.cdx"
speed="1"
style="width:300px; height:300px;"
loop
autoplay>
</nirmal-player>2. React / Next.js
If you installed via NPM, import it in your component or _app.js.
import 'cdx-player';
function App() {
return (
<nirmal-player
src="https://dev.dubhub.lk/anime/dev.cdx"
autoplay
speed="1"
style={{ width: '300px', height: '300px' }}
/>
);
}⚙️ Attributes
| Attribute | Description | Default |
|-----------|-------------|---------|
| src | URL or Local path to .cdx, .tgs, or .json | Required |
| autoplay| Start animation automatically | false |
| loop | Loop the animation | false |
| speed | Animation playback speed (e.g., 2, 0.5) | 1 |
🌟 Support
Developed by K.Nirmal (CyberYakku)
For more stickers visit: Sticker Explorer