Space & sci-fiIntermediate
Ray-traced black hole hero (WebGL)
An Interstellar-style black hole — a glowing disk bent by gravity around a dark shadow — rendered live behind a GPU-cloud landing page.
Oct 26, 2026
— Prompt library
Prompts for pages people remember
Every prompt comes with a live demo of exactly what it builds — 3D scenes, shaders and interactive pages made only with code, so the result doesn't depend on a video file you don't have.
55 prompts · 6 categories · included with the course
55 prompts
- Live demo
- Live demo
Product & brandIntermediate3D luxury watch that shows the real time (Three.js)
A rose-gold watch built only from code — guilloché dial, blued hands, leather strap — turning under a spotlight and showing the visitor's real local time.
Oct 26, 2026 - Live demo
InteractiveIntermediateReal-time ink fluid simulation hero (WebGL)
A real stable-fluids simulation on the GPU: your cursor pushes glowing, swirling ink across a dark landing page for a creative tool.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateThunderstorm weather hero with liquid-glass cards
A live WebGL thunderstorm — rolling clouds lit from inside by branching lightning, slanted rain, a city skyline — under a liquid-glass forecast dashboard.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateSynthwave sunset hero with VHS effects (WebGL)
A retro-futurist sunset in one shader: a striped sun, wireframe mountains and a racing neon grid, finished with scanlines, bloom and VHS wobble.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateUnderwater dive-resort hero with caustics and boids
A shader ocean — god rays from a rippling surface, caustics on the sand, marine snow, bubbles and a schooling shoal — behind an editorial dive-resort page.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateCinematic planet-sunrise hero (Three.js)
A giant planet low in the frame, a sun rising over its glowing horizon, satellites on orbit trails and a starfield — all live 3D.
Oct 26, 2026 - Live demo
Product & brandIntermediateLiquid chrome hero with a morphing 3D blob
A mirror-chrome blob that ripples like liquid and reacts to your mouse, in front of a giant wordmark on a light, airy page.
Oct 26, 2026 - Live demo
InteractiveIntermediateFloating voxel island that builds itself (Three.js)
A pastel floating voxel island that drops in block by block, with a looping cube waterfall, drifting clouds, soft shadows and drag-to-spin.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateNorthern lights over a mirror lake
Live aurora curtains with shimmering rays above snowy peaks, reflected in a still lake — a hero for a travel or expedition brand.
Oct 26, 2026 - Live demo
Product & brandIntermediateRainy window at night shader for a music brand
Look through a rainy window at a neon city: real-time raindrops that slide, refract the bokeh behind them and wipe the fog, behind a moody record-label page.
Oct 26, 2026 - Live demo
AI & techIntermediateIsometric smart city with day-to-night (Three.js)
An isometric 3D city twin: buildings rise in, cars stop at red lights, a toggle turns day into night, and hovering a building shows its stats.
Oct 26, 2026 - Live demo
InteractiveIntermediateKinetic type poster with cursor warp (WebGL)
A Swiss-poster studio page where giant headline type bends under your cursor like a lens, above outline marquees that slide with your scroll.
Oct 26, 2026 - Live demo
Product & brandIntermediate3D card carousel with metal, glass and holo finishes
Seven premium payment cards on a 3D ring — brushed titanium, holographic foil, frosted glass and more — with drag, inertia, snapping and a live detail panel.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateFirefly night forest with moon and pond (WebGL)
A cinematic night forest for a glamping brand: layered pines, mist, moonbeams, a big moon and hundreds of blinking fireflies reflected in a still pond.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateRay-marched desert dunes at dusk (WebGL)
Live sand dunes at sunset for a luxury travel brand: long soft shadows, wind ripples, sand blowing off the crests, heat shimmer and one lit camp tent.
Oct 26, 2026 - Live demo
AI & techIntermediateLiquid voice orb that listens, thinks and speaks (WebGL)
A glowing liquid orb for a voice assistant: it ripples while listening, swirls while thinking and pulses while speaking, with live captions and an opt-in mic.
Oct 26, 2026 - Live demo
AI & techIntermediateGlowing LED dot-matrix board hero (WebGL)
A big LED wall spells out the headline in glowing round dots, scrolls a metrics ticker and draws a live chart — above glass KPI cards with sparklines.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateScroll-driven hyperspace tunnel
A light-speed tunnel that accelerates as you scroll, with story panels that fly out of the vanishing point and an arrival into pure light.
Oct 26, 2026 - Live demo
Product & brandIntermediateGlitch streetwear hero on a satin shader (WebGL)
A streetwear drop page: a giant wordmark printed on moving black satin, sliced and RGB-split by glitch bursts, plus garment cards drawn in code.
Oct 26, 2026 - Live demo
AI & techIntermediateInteractive dotted globe with live routes
A drag-to-spin globe made of thousands of glowing dots, with animated routes between cities and a live routing card.
Oct 26, 2026 - Live demo
AI & techIntermediate3D neural network that lights up on recall
A living network of nearly a thousand nodes with pulses racing along its links. Ask a question and a glowing path lights up hop by hop.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateShader sunset over the ocean
A live sea at golden hour — rolling waves, a low sun, glowing clouds and a glittering sun path — behind a calm, editorial landing page.
Oct 26, 2026 - Live demo
InteractiveIntermediateScroll-through 3D art gallery hall (Three.js)
Scroll to walk a softly lit gallery hall of generative paintings with a mirror-polished floor; hover a work to lift it off the wall and read its label.
Oct 26, 2026 - Live demo
InteractiveIntermediateLow-poly floating island game hero (Three.js)
A golden-hour, low-poly floating island with ruins, a waterfall spilling into the void, drifting clouds and birds — drag to orbit, hover to wake the crystals.
Oct 26, 2026 - Live demo
AI & techIntermediateLive radar HUD console for a security product
A phosphor-green radar sweeps for threats: blips flare and fade, tracked targets carry labels, and side panels stream an example threat log.
Oct 26, 2026 - Live demo
AI & techIntermediateCode-rain headline that assembles itself (Canvas 2D)
A rain of hex glyphs that locks into place to spell the headline, then glitches, behind a security landing page with a live example scan card.
Oct 26, 2026 - Live demo
InteractiveIntermediateCursor flashlight reveal hero (WebGL + CSS mask)
A pitch-black studio page where your cursor is a flashlight: it reveals a vivid paper-cut artwork, a coloured headline and project tiles hidden underneath.
Oct 26, 2026 - Live demo
AI & techIntermediateLive murmuration of thousands of birds at dusk
Thousands of boids flock like starlings over a dusk lake, follow or flee your cursor, and now and then stream into a ring or your logo.
Oct 26, 2026 - Live demo
Product & brandIntermediateHolographic 3D event ticket (CSS 3D + foil)
A conference page with a silver-holographic ticket that tilts with your pointer under a spotlight: sliding foil, glare, a perforated stub and a live countdown.
Oct 26, 2026 - Live demo
Product & brandIntermediate3D smart-speaker configurator (Three.js)
A light, premium product page with a procedural knit-fabric speaker you can turn, a glowing touch ring and colour swatches that dye the fabric from the bottom up.
Oct 26, 2026 - Live demo
InteractiveIntermediateInteractive fireworks over a lake (WebGL)
Click or tap the sky to launch peony, willow, ring and crackle shells, with glowing trails, bloom and rippling lake reflections, on a festival page.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateRay-marched cloud flight hero (WebGL)
Glide over a sea of ray-marched volumetric clouds at sunrise, with silver-lit edges, behind a premium airline page and a glass booking widget.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateGolden-hour wind farm hero (WebGL shader)
Golden-hour hills, swaying grass and spinning wind turbines at every distance, all in one fragment shader behind a bright clean-energy landing page.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateInteractive 3D solar system with real planet facts
Click a planet to fly to it: a shader Sun, eight procedural planets with real Earth coastlines, Saturn's rings and NASA fact cards, clearly marked not to scale.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateRotating starfield with hover-traced constellations
A deep night sky with realistic star brightness and colour slowly turns over a hilltop observatory; hover anywhere to trace a glowing star figure.
Oct 26, 2026 - Live demo
AI & techIntermediateLight-through-a-prism hero with real optics (WebGL)
A white beam hits a glass prism and fans into a spectrum you steer with your cursor — Snell's law, dispersion and dust in the beam, behind an AI-observability page.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateLive topographic map with a routed trail (WebGL)
A tilted contour map drawn in a shader: hypsometric tints, a trail routed by slope with a walking hiker, summit labels, and ground that rises under the cursor.
Oct 26, 2026 - Live demo
Sections & UIIntermediateFloating 3D phones app showcase (CSS 3D)
Three floating phones in real CSS 3D, each running live, animated app screens — balance, spending ring, cards — on a soft light landing page for a finance app.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateSpace 404 page with a tumbling astronaut and mini game
A playful 404: a code-drawn astronaut tumbles in front of a giant 404 on a drifting tether, above a planet horizon — and you can catch stars to restore the signal.
Oct 26, 2026 - Live demo
Product & brandIntermediateIridescent soap bubbles product page (WebGL)
Thin-film soap bubbles float around a CSS-drawn skincare bottle, stick together with shared walls and pop with a tiny splash when you hover them.
Oct 26, 2026 - Live demo
Sections & UIIntermediateAmber CRT terminal hero you can type into (WebGL)
A retro-futurist studio page with a curved, glowing CRT monitor that boots up and runs real commands — scanlines, bloom and phosphor trails in one shader.
Oct 26, 2026 - Live demo
AI & techIntermediateParticle DNA double helix with scan and annotations
A genomics landing page with a right-handed DNA helix of 35,000 particles, depth of field, a scanning read band and hover annotations on a small gene.
Oct 26, 2026 - Live demo
InteractiveIntermediateMagnetic field particle hero (Canvas 2D)
Thousands of glowing particles ride the field lines between a charger and a car, and your cursor becomes a third pole that bends the whole field.
Oct 26, 2026 - Live demo
Space & sci-fiIntermediateWireframe terrain flyover with a drone HUD
Fly over a glowing wireframe terrain while a laser scans the ground, with a live HUD: telemetry, a heading tape, a mini map and tags pinned to real peaks.
Oct 26, 2026 - Live demo
Nature & wellnessIntermediateGuided breathing orb (light WebGL hero)
A calm, pastel meditation-app hero: a glowing orb grows, shimmers and shrinks to guide 4-7-8, box or even breathing, with a live progress ring.
Oct 26, 2026 - Live demo
InteractiveIntermediate24,000 particles that morph between shapes
A wordmark made of particles that flies apart into a sphere, a knot and a galaxy. Click to morph, move the cursor to push them.
Oct 26, 2026 - Live demo
Sections & UIIntermediatePixel-dissolve portfolio grid (canvas 2D)
A clean designer portfolio whose code-drawn project covers dissolve into rippling pixels under the cursor, with a View cursor and animated filter chips.
Oct 26, 2026 - Live demo
Sections & UIIntermediatePage-flip magazine with corner drag (CSS 3D)
An independent magazine you can leaf through: drag a page corner and it folds over with curl shading, or use the arrows, contents and keyboard.
Oct 26, 2026 - Live demo
AI & techBeginnerShader-gradient hero for an AI startup
A living WebGL gradient that flows like silk behind a glass nav, an email capture and a tilting product preview.
Oct 26, 2026 - Live demo
Sections & UIBeginnerSaaS pricing with a monthly / yearly toggle
Three plans, a sliding billing toggle and prices that count to their new value when you switch.
Oct 26, 2026 - Live demo
Sections & UIIntermediateDeveloper portfolio with a working terminal
A bold portfolio hero with an auto-typing terminal that visitors can actually type commands into.
Oct 26, 2026 - Live demo
Sections & UIBeginnerLocal business page with a clickable booking card
Editorial serif design for a barbershop or studio, with a service → day → time booking card that really works.
Oct 26, 2026 - Live demo
Sections & UIBeginnerLaunch page with a live countdown
A starry particle background, a real countdown to your launch date and a waitlist form with validation.
Oct 26, 2026 - Live demo
Sections & UIIntermediateBento grid features section with live visuals
Six feature tiles in a bento layout — a self-drawing chart, growing budget bars, pulsing security and a rotating orbit.
Oct 26, 2026
— Beyond prompts
Learn to build the whole app, not just paste the prompt
Every prompt here comes from a lesson where you build the feature step by step, test it and ship it.