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

beginner

A neon ball bouncing around the screen, leaving a colorful glowing trail behind — built with Canvas and simple physics.

Start Building →
🛠️

CSS Flower

beginner

Build a beautiful animated flower using only HTML and CSS — with rotating petals, a glowing center, a green leaf, and a soft sky background.

Start Building →
🛠️

Firework Burst

beginner

Launch a colorful firework explosion from the center of the screen — particles fly outward with gravity and fade away.

Start Building →
🛠️

Gradient Border Spinner

beginner

A sleek spinning ring with a rainbow conic gradient — built with pure CSS masks and animations.

Start Building →
🛠️

Matrix Rain

beginner

Create the iconic Matrix digital rain effect — green characters cascading down a dark canvas using the Canvas API.

Start Building →
🛠️

Neon Text Glow

beginner

A glowing neon sign effect that pulses between cyan and magenta — pure CSS, zero JavaScript.

Start Building →
🛠️

Neon Toggle

beginner

Create a glowing neon on/off switch with smooth CSS transitions, a dark theme, and clean class-based JS toggling.

Start Building →
🛠️

Pulsing Rings

beginner

Create a hypnotic, 3D pulsing rings animation using DOM elements and CSS transform animation with staggered delays.

Start Building →
🛠️

Rainbow Spiral

beginner

Watch a mesmerizing rainbow spiral draw itself endlessly from the center — shifting colors with every frame using HSL and simple trigonometry.

Start Building →
🛠️

Ripple Rings

beginner

Colorful rings expand and fade from the center of the canvas — click anywhere to spawn new ripples. Pure Canvas magic.

Start Building →
🛠️

Starfield Warp

beginner

Fly through a warp-speed starfield — stars zoom toward you from deep space using simple 3D projection on Canvas.

Start Building →
🛠️

Traffic Light

beginner

Build an interactive traffic light that cycles through red, yellow, and green with glowing effects.

Start Building →
🛠️

Cosmic Galaxy Swirl

intermediate

Build a visually stunning deep space galaxy animation using the HTML5 Canvas API and circular trigonometry.

Start Building →
🛠️

Digital Clock

intermediate
🔒

Build a glowing real-time table clock with labeled digit segments, a blinking separator, AM/PM, and live date — powered by JavaScript's Date API.

Pro Required
🛠️

Gradient Generator

intermediate
🔒

Build an interactive gradient generator with two colour pickers and an angle slider — updates the live preview and outputs the real CSS instantly.

Pro Required
🛠️

Orbit Loader

intermediate
🔒

Build a mesmerising multi-ring orbit loader with glowing cyan, purple, and green rings spinning at different speeds — pure CSS animation magic.

Pro Required
🛠️

Particle Network

intermediate

Create a beautiful, interactive network of floating particles that connect with lines when close to each other, using the HTML5 Canvas API.

Start Building →
🛠️

Glassmorphism Card

advanced
🔒

Craft a stunning frosted-glass profile card with layered blur effects, gradient blobs, and a smooth hover lift — pure HTML and CSS.

Pro Required
🛠️

Mini Calculator

advanced
🔒

Build a fully functional calculator with a dark UI, expression history, and live evaluation — powered by pure HTML, CSS, and JavaScript.

Pro Required
🛠️

Typing Speed Meter

advanced
🔒

Build a real-time typing speed meter that tracks WPM, accuracy, and elapsed time as you type — with a live progress bar and reset button.

Pro Required