Scroll Timeline Playground - Online Scroll‑Driven Animation
Create an animation that advances with scroll using animation‑timeline: scroll(). See the visual timeline editor. Modern CSS.
UD5 Toolkit
Generate realistic project timeline visualizations with dummy data for presentations, mockups & planning
| # | Task Name | Start Date | End Date | Duration (days) | Progress | Depends On | Type |
|---|
Create an animation that advances with scroll using animation‑timeline: scroll(). See the visual timeline editor. Modern CSS.
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Write Mermaid syntax inside Markdown blocks and instantly see rendered flowcharts, sequence diagrams, and Gantt charts. Copy SVG.
Customize falling snow particles with pure CSS or canvas. Adjust speed, size, and wind. Copy the code for your website.
Divide your day into blocks with color codes. Drag tasks into slots. See free time at a glance.
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Draw shapes and experiment with globalCompositeOperation. See Porter‑Duff operators in action. Great for game devs.
Generate an <img> tag with the loading='lazy' attribute and optional low‑quality placeholder. Improve Core Web Vitals. Copy the snippet.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Keep track of stitches and rows for your knitting projects. Multiple counters with increase/decrease shortcuts. Data saved in your browser.
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Select a caching strategy and see a flow diagram of how requests are handled. Learn PWA patterns.
Create a pure CSS scroll progress indicator using animation‑timeline: scroll(). No JavaScript. Copy the complete code.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Explore the Mandelbrot set with click-to-zoom and vibrant colors. A mesmerizing math journey inside your browser.
Create a custom element with named slots and see content projection in action. Learn Web Components basics.
Select cheese type (cheddar, brie) to see recommended curd cut size and visual cube comparison.
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Select starting and ending surface condition to get an optimal sandpaper grit sequence. Never skip a grit again and achieve a flawless wood finish.
Build a virtual grocery list with estimated prices and see total before you shop. Adjust quantities, mark bought items. Data stays in browser.
Register and apply a custom paint worklet to draw a background pattern dynamically. Write the paint function in the browser.
Adjust root, margin, and threshold. See a live log of intersection events as you scroll. Debug lazy loading.
Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.
Pixelate selected areas of an image to hide faces or sensitive data. Adjust block size. Download the censored result.
Upload a small image and see it tiled as a canvas pattern. Export the pattern or copy the JavaScript.
Generate a complete <head> section with meta charset, viewport, SEO, favicon, and social tags. Customize and copy.
Configure a modern HTML5 boilerplate with your choice of meta tags, social media cards, favicon links, and CSS/JS includes. Download or copy the code.
A customisable Matrix‑style digital rain animation. Adjust speed, characters, and colors. Fullscreen mode for ambiance.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.