animation‑composition Demo - Online Blend Multiple Animations
See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.
UD5 Toolkit
Play sprite sheets directly in your browser. Upload, set grid, and preview animations.
Drag & drop sprite sheet here or click to upload
See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.
Create CSS animations and transitions without coding. Define keyframes, easing, and duration. Copy the @keyframes and animation code instantly.
See a cropped or simplified brand logo and guess the company. Hints available, score track. Local fun, no copyright infringement.
Create a 'drawing' effect for any SVG path. Adjust speed and delay. Copy the CSS and SVG code. No JS needed.
Generate a random sequence of button presses that looks like a retro game cheat code. Totally useless, totally fun.
See a random color and type its name. Score based on accuracy. Fun for designers. Local.
Combine two random elements and get a surprising result. Inspired by Little Alchemy. Infinite ideas. All local.
A big button that triggers a colourful confetti cannon full‑screen. Use it to celebrate small wins. Pure joy.
Generate a hash showing how trackers can fingerprint your browser (canvas, WebGL, fonts). Educational and privacy‑aware.
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Create a pure CSS countdown timer with a flipping number effect. Adjust duration and style. No JavaScript needed for display.
Create a glowing or rotating border animation around an element. Copy the CSS keyframes. Pure CSS magic.
Try to draw a perfect circle freehand. Score based on roundness. Fun and addictive. No data sent.
Random world flags shown; pick the correct country name from four choices. Score and streak. Learn geography.
Watch and repeat the growing sequence of colored buttons. How long is your memory? Classic electronic game replica.
Play the extended 5‑gesture version against a CPU. Rules explained. Score tracking. A geek classic.
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
Keep a virtual pet alive by feeding, playing, and cleaning. Its state persists in localStorage. Come back or it gets sad.
Generate random Scattergories‑style lists with a random letter and 12 categories. Great for online game night.
Paste a Kanji and watch it drawn stroke by stroke with numbered sequence. Excellent for learners. Static data set.
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
The original arcade Pong recreated in HTML5. Play against AI or local two‑player. Score up to 11 and win. Pure retro fun.
Watch a color sequence and click the same pattern. Gets longer each round. Test and improve your working memory. All local.
Run Conway's Game of Life on a canvas grid. Draw patterns, start/stop the evolution, and adjust speed. A mesmerizing zero‑player simulation.
Play Rock Paper Scissors against a smart random CPU with win/loss/draw tracking. Smooth CSS animations. No ads, pure fun.
Repeat the growing color sequence. How far can you go? Classic memory game with sound and animations.
Control a lunar module and try to land softly on the moon. Manage fuel and thrust. Classic arcade physics. Canvas.
Paste Lottie JSON code or upload a .json file and see the animation play. Control speed and loop. Perfect for developers.
Enjoy classic Tetris in your browser. Rotate, move, and drop tetrominoes. Clear lines and score. Fully local JavaScript.
Create a virtual scratch card with a hidden message or prize. Send the link; recipient scratchs with mouse/touch. Canvas-based.