Landing page heroes,
free prompts.

Pricing hero: a Monthly / Yearly pill toggle. The knob slides and every plan price rolls up to its yearly price in a 1.1em mask, a −20% badge pops. One 4s CSS loop.

Cleaning hero, before/after: an SVG kitchen under a grime layer. A round handle wipes it away left→right with clip-path inset, sparkles pop, then it glides back to a 50/50 split. Tailwind.

Light split hero: big headline with one italic serif word on the left, a chat card on the right where the AI reply types out line by line with a blinking caret. HTML + Tailwind.

Warm salon hero, serif headline left. Three stylist cards with SVG portraits are dealt into a fan, a cursor picks the middle one: it lifts, gets an orange ring and a "Today · 3:30 PM" chip. Tailwind.

Color picker hero: an SVG sneaker uses fill: currentColor. Every second the swatch ring slides on, the color name rolls up, and the shoe hops and lands in the new colorway. HTML + Tailwind.

Light SaaS hero: centered headline, then a dashboard built from divs tilts up from rotateX(34deg) to flat. KPIs count up, a 12-bar chart grows bar by bar. HTML + Tailwind.

Quote calculator hero: pick 3 bed, 2 bath, Deep clean, oven + fridge. Pills slide, chips light up and the price counts up $99 → $319 with @property. HTML + Tailwind, mobile first.

Dark AI hero: a blurred violet-to-teal orb slowly spins behind the headline, the 2nd line shimmers, email field + white "Join the waitlist" pill. HTML + Tailwind, mobile first.

Booking widget hero: a week strip where the dark day pill slides Tue → Thu, time slots pop in (taken ones struck out), 3:30 PM gets tapped, the button rolls to "Book" and a toast drops. Tailwind.

Product hero: a CSS bottle spins on a turntable (its label strip loops on translateX). A cursor clicks "Add to cart" → spinner → green "✓ Added", the bag badge pops, a toast drops in. Tailwind.

Kanban hero: text left, board right. One card lifts with a tilt and shadow, rides to Done with a cursor, drops into a dashed slot and gets a green check. HTML + Tailwind.

Dark office-cleaning hero: a live checklist ticks 6 rooms one by one, a progress ring fills to 100% and a floor plan lights up room by room. A "Report sent" toast lands last.

Warm centered hero: serif headline "What will you build today?", a big prompt box that types a request, then the round send button pops from grey to black. HTML + Tailwind.

Pink salon hero with a price list card: services get ticked one by one, a $ total and minutes count up with @property, a 3-part time bar fills and the Book button turns pink. HTML + Tailwind.

Streetwear drop hero: two tilted marquee bands cross, a countdown ticks, product cards slide in from the right and a red SOLD OUT stamp slams onto one card. HTML + Tailwind, mobile first.

Dark hero: ⌘ and K keycaps press, a command palette drops in, "inv" gets typed and an amber highlight steps down the results every second. Pure CSS + Tailwind.

Booking hero: a November calendar card. A cursor taps Sat 14, time slots pop in, 10:00 gets picked and a dark "Booked" toast slides up with the crew. Pure CSS + Tailwind.

White SaaS hero, text left, bento grid right: revenue counts up from $0 with @property, a green line chart draws itself, bars grow in a dark card. HTML + Tailwind.

Dark color-studio hero: a before / after slider wipes across an SVG portrait, frizzy brown hair becomes a glossy copper bob, sparkles twinkle and a price tag drops. One 4s CSS loop, Tailwind.

Free shipping bar hero: 3 items slide into a cart card, the subtotal counts up with @property and the progress bar fills until "Free shipping unlocked" turns green with confetti. Tailwind.

CRM hero: notification cards drop in at the top one by one and push the stack down (grid-template-rows 0fr → 1fr). Last one: a dark "Deal won $24,000". Tailwind.

Dark dev hero: code types in line by line in a deploy.ts window, glowing dots travel along a node graph with offset-path, stats strip below. HTML + Tailwind.

Dark integrations hero: a glowing gradient hub on two dashed rings. App tiles orbit in opposite directions, counter-rotate to stay upright and pop in one by one. Tailwind.

Bold centered hero: "AI that writes your ___" where the last word slides up through emails → reports → code in a violet-pink gradient. Logo marquee below. HTML + Tailwind.