TypeCraft
Build real visual components block-by-block. Type HTML, style it with CSS, and bring it to life with JavaScript. Your typing physically builds the result!
Bouncing Ball
beginnerA neon ball bouncing around the screen, leaving a colorful glowing trail behind — built with Canvas and simple physics.
CSS Flower
beginnerBuild a beautiful animated flower using only HTML and CSS — with rotating petals, a glowing center, a green leaf, and a soft sky background.
Firework Burst
beginnerLaunch a colorful firework explosion from the center of the screen — particles fly outward with gravity and fade away.
Gradient Border Spinner
beginnerA sleek spinning ring with a rainbow conic gradient — built with pure CSS masks and animations.
Matrix Rain
beginnerCreate the iconic Matrix digital rain effect — green characters cascading down a dark canvas using the Canvas API.
Neon Text Glow
beginnerA glowing neon sign effect that pulses between cyan and magenta — pure CSS, zero JavaScript.
Neon Toggle
beginnerCreate a glowing neon on/off switch with smooth CSS transitions, a dark theme, and clean class-based JS toggling.
Pulsing Rings
beginnerCreate a hypnotic, 3D pulsing rings animation using DOM elements and CSS transform animation with staggered delays.
Rainbow Spiral
beginnerWatch a mesmerizing rainbow spiral draw itself endlessly from the center — shifting colors with every frame using HSL and simple trigonometry.
Ripple Rings
beginnerColorful rings expand and fade from the center of the canvas — click anywhere to spawn new ripples. Pure Canvas magic.
Starfield Warp
beginnerFly through a warp-speed starfield — stars zoom toward you from deep space using simple 3D projection on Canvas.
Traffic Light
beginnerBuild an interactive traffic light that cycles through red, yellow, and green with glowing effects.
Cosmic Galaxy Swirl
intermediateBuild a visually stunning deep space galaxy animation using the HTML5 Canvas API and circular trigonometry.
Digital Clock
intermediateBuild a glowing real-time table clock with labeled digit segments, a blinking separator, AM/PM, and live date — powered by JavaScript's Date API.
Gradient Generator
intermediateBuild an interactive gradient generator with two colour pickers and an angle slider — updates the live preview and outputs the real CSS instantly.
Orbit Loader
intermediateBuild a mesmerising multi-ring orbit loader with glowing cyan, purple, and green rings spinning at different speeds — pure CSS animation magic.
Particle Network
intermediateCreate a beautiful, interactive network of floating particles that connect with lines when close to each other, using the HTML5 Canvas API.
Glassmorphism Card
advancedCraft a stunning frosted-glass profile card with layered blur effects, gradient blobs, and a smooth hover lift — pure HTML and CSS.
Mini Calculator
advancedBuild a fully functional calculator with a dark UI, expression history, and live evaluation — powered by pure HTML, CSS, and JavaScript.
Typing Speed Meter
advancedBuild a real-time typing speed meter that tracks WPM, accuracy, and elapsed time as you type — with a live progress bar and reset button.