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: one kitchen photo, the messy half laid over the spotless half. A round handle wipes it away left→right with clip-path inset, then 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 photo cards 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: a photo sneaker on a studio pedestal. Every second the swatch ring slides on, the name rolls up and the shoe hops, landing recolored by hue-rotate. Tailwind.

Map hero: a CSS/SVG city map with streets, a park and a river. Price pins drop in one by one, the $648K pin is tapped, turns red and a listing card with a house photo slides up. Tailwind.

Menu tabs hero: a pill slides Pasta → Pizza → Salad → Dessert, the round plate photo spins in (CSS crops of one 2×2 photo) and name + price roll up. 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 photo bottle floats on a CSS plinth while a masked sheen sweeps it. A cursor clicks "Add to cart" → spinner → green "✓ Added", the badge pops, a toast drops in. Tailwind.

Mortgage calculator hero: home price and down payment sliders glide, the monthly payment counts $2,852 → $3,295 with @property and a donut splits P&I, taxes, insurance. Tailwind.

Cafe loyalty hero: a latte photo and an espresso stamp card. Stamps 7–10 slam in, the count climbs to 10/10 and a gold "Free coffee unlocked" pill pops. 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.

Dark color-studio hero: a before / after slider wipes across a model photo, frizzy brown hair becomes a glossy copper bob, a warm glow lifts and a price tag drops. One 4s CSS loop, 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.

Card stack hero, dark and gold: three house photo cards are dealt onto a pile. The front one pops a "Just listed" tag, its price rolls $1,295,000 → $1,249,000, the old one gets struck. Tailwind.

Reservation hero over a candle-lit room photo: guests step 2 → 4, the 7:30 chip lights up and the button flips to "Table for 4 · 7:30 PM" with a check. Tailwind.

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.

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.

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.

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.

Before/after slider hero: one living-room photo, empty half and staged half. A handle sweeps right→left cutting in the staged room with clip-path, hotspots pop, then it rests at 50/50. 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.

Order tracker hero: Placed → Cooking → Ready. The line fills, an @property countdown ticks 12 → 1 min and "Ready now" pops in green with a shelf number. 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.

Booking widget hero: an agent photo card and a tour picker. The day pill slides to Sat, slots pop in, 10:30 is tapped, the button rolls to "Book viewing · Sat 10:30" and a toast drops. Tailwind.

Tasting menu hero: a chef portrait wipes in, six courses appear one by one with dotted leaders and prices, and the total counts up to $130 with @property. 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.