Prompt library — free

Prompts that make websites move.

Every prompt here came out of real project work — scroll-driven heroes, hand-tracked interfaces, generated plates and the clips that sit behind them. Copy one, paste it into your AI, ship something that doesn’t look AI-made.

Browse the library Start a project

9 promptsFree to copyBuilt on client work

The library

Click any card

Control a website with your hand

Tutorial

Free

Turn images into interactive heroes

Tutorial

Free

Tear your hero open

Tutorial

Free

Sites that prove design can still be magical

Reference

Free

Liquid buttons

Vibe-code

Free

Turn one prompt into a premium Hero section

Vibe-code

Free

A mountain that moves when you scroll

Vibe-code

Free

A hero the bird flies in front of

Vibe-code

Free

A yacht page you scrub with the scroll

Vibe-code

Free

Components

One piece at a time.

Not every build needs a whole page. Sometimes what’s missing is one element — a button that reacts properly, a rail that opens under the cursor, type that pulls into focus. Every piece below is live on this page: hover it, drag it, break it. Free while the library is young.

Focus Reveal

Words sit blurred until a focus frame travels to each one, stretching into its box on the way rather than snapping to it. Every box is measured, so it takes any font at any size.

Text

Mesh Flow

A dot grid that sits almost invisible until the pointer draws it into a singularity, the lines bending like a rubber sheet under a weight. Canvas 2D, one gaussian, no shader.

Background

Carousel Ring

Pages seated edge-out around a tipped wheel, spinning slowly and throwing with momentum when you drag. Depth is sorted per frame rather than handed to the browser.

3D

Card Folder

A folder card whose face slides down on hover to reveal an iridescent gradient, with a cut-out object rising from behind it. The notch is an SVG mask, so the face can be any fill.

Card

Card Bookmark

A bookmark-tab card with a bite taken out of its lower edge, whose artwork blooms into saturated colour on hover — dissolving into the glow rather than being painted over.

Card

Expanded Cards

A rail of tall slivers where hovering one widens it into a full card and slides its neighbours aside. The caption is laid out once at the open width, so text never rewraps mid-reveal.

Card

Particle Cloak

A particle field that hides what sits under it until the pointer parts the cloak, the grains pushed out of a soft radius and drifting home when it leaves.

Background

Glow Ring Button

A pill button whose icon disc wears an iridescent ring that travels around it — the colour shifts through the spectrum as it orbits, and settles on hover.

Button

Particle Globe

Land drawn as thousands of individual points on a slowly turning sphere. Drag to spin it — the far side dims rather than disappearing, so it reads as a volume.

3D

Scroll Key

A glass keycap that turns under the cursor and presses when you click — bevelled edges catching a violet rim light, the label sunk into the surface rather than printed on it.

3D

Spotlight Carousel

Framed pictures shingled into a rail with the focused one opened out to carry its caption. It doesn’t scale up — it re-crops, so the picture widens into the frame instead of stretching.

Card

Send Hello

A one-line contact field where sending launches the message: the text lifts off as a paper plane, the field collapses behind it, and the button turns over into a tick.

Form

Noir Mesh

The same slow drift with the colour taken out. Graphite through to paper white, carried entirely by the dither.

Gradient

Mint Haze

Cream and sea-glass greens breathing into each other. The quietest one on the shelf, made for text to sit on.

Gradient

Plum Mesh

Deep plum through rose, dark enough to carry white type without a scrim.

Gradient

Neon Mesh

Acid green, hot pink and cyan on near-black. The one that doesn’t whisper.

Gradient

Web design ebook

Want to build sites that convert?

The essentials most designers never get taught — from landing the client through design, no-code build and a hand-off that earns the next project.

Landing clients

Where the work actually comes from, and how to build trust before the first call.

KCSPDG GKMRHL
💬 0 ❤️ 0

Every freelance document

Contract, proposal and invoice templates you can send the same day.

3 templates

Onboarding & communication

Clear, professional first contact — so the project starts on the right footing.

Welcome aboard, Mike 👋 Thanks Kunal! 🔐 Kick-off Monday ✅

Research & analysis

A repeatable process that makes discovery fast instead of daunting.

🧭 Discovery 🕯️ Q&A session 📊 Competitor scan 🎯 Success metrics

Copywriting & storytelling

Turn attention into action — structure, tone and the words that carry weight.

💡 Clear ❣️ Emotional 🔑 Concise

Grids & layout

The theory and the technique behind layouts that hold up at every width.

375px1440px

Typography

Scale, rhythm and spacing settings that make type feel deliberate.

Aa H1 — 80px · body — 16px

Colour

How to choose, build and apply a palette that survives real interfaces.

Visuals

A strategic way to generate art direction instead of waiting for inspiration.

The complete process

Start to finish with no guesswork and no wasted weeks.

📞 Call 📝 Contract 📮 Materials 🔍 Research 🔮 Structure

No-code development

Run the whole build yourself — and keep the margin that used to go elsewhere.

Framer Webflow CMS Custom code

Review, test & hand-off

Close the project properly — the part that turns one client into three.

96% ⚡ Performance

Free, for now

Get the ebook.

Everything above, in one file. Drop your email and it comes straight to you — no payment, no card, no drip sequence.

  • Sent personally, usually same day
  • Free while it’s in version one
  • Your email is only used to send it

No list, no spam. Unsubscribe doesn’t apply — there’s nothing to unsubscribe from.