The Future of Web Dev
The Future of Web Dev
Easy Pixel Animation Creation – Svelte Animated Pixels
Discover a simple yet powerful way to build pixel animations. Explore Svelte Animated Pixels and bring your retro visions to life.
Svelte Animated Pixels is a UI component for transforming your digital canvas into a vibrant pixel art animation.
By simply defining pixel maps as strings, users can unleash their creativity and bring static images to life.
Key Features
🖌 Simple Pixel Mapping: Define pixel animations with easy-to-understand strings.
🛠Easy Integration: Easily embed into any Svelte project.
🔄 Consistent Frame Dimensions: Maintain uniformity with consistent width and height across frames.
🖥 Optimized Performance: Designed for smooth rendering of animations.
How to use it:
1. Install the package using NPM.
npm i -D svelte-animated-pixels
2. Import the necessary components in your Svelte component:
import { Animated, PixelMap } from 'svelte-animated-pixels';3. Create an array of strings, with each string representing a single frame in your animation.
const FRAMES = [
`
. x . . . . . x .
. . x . . . x . .
. . x x x x x . .
. x x x x x x x .
. x x x x x x x .
. . x x x x x . .
. x . . . . . x .
. . x . . . x . .
`,
`
. . . x . x . . .
. . x . . . x . .
. . x x x x x . .
. x x x x x x x .
. x x x x x x x .
. . x x x x x . .
. . x x . x x . .
. . . . . . . . .
`
];
4. Use the Animated and PixelMap components provided by the library. Pass your frame array to the frames prop of the Animated component and utilize the map from the using directive within the PixelMap component. Adjust the scale as needed.
<div class="wrapper">
<Animated frames={FRAMES} let:using={{ map }}>
<PixelMap scale={5} {map} />
</Animated>
</div>
Preview:
