PROMPT_009 / HERO SECTIONS

MAKE THE HEADLINE ARRIVE.

Line-by-line masked reveal for display type, with a shimmer accent used exactly once.

BEST FOR: Heroes that currently just appear.
DIFFICULTY: Easy
TOOLS: Lovable · Cursor · v0

USE THIS IN LOVABLE

Animate the hero typography.

Split the headline into explicit lines, wrap each in an overflow-hidden container with an inner span starting at translateY(100%) and animating to 0 over 900ms with cubic-bezier(0.22, 1, 0.36, 1) and a 90ms stagger per line. Fade the eyebrow in first and the supporting copy and CTAs after the last line, keeping the full sequence under 1.6s and never blocking interaction.

Add one shimmer accent only: a small monospace eyebrow using a background-clip: text chrome gradient. Do not animate body copy.

---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.

RECOMMENDED INTERACTIONS.

MOVEDIFFERENT.

INTERACTION_018CSS

Headline Reveal

Lines rise out of a clipped mask, one after another.

Typography / LightView

CHROME TEXT

INTERACTION_019CSS

Shimmer Text

A metallic highlight sweeps through the letterforms.

Typography / LightView

SCRAMBLE

INTERACTION_020CSS + JS

Text Scramble

Characters cycle through noise before settling.

Typography / LightView

RELATED PROMPTS.

All prompts

PROMPT_001 / LANDING PAGES

MAKE MY WEBSITE FEEL EXPENSIVE.

Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.

premiumlanding-pagemicrointeraction

Preview

PROMPT_002 / LANDING PAGES

BUILD A LANDING PAGE THAT LOOKS HIRED.

A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.

premiumlanding-pagedark-ui

Preview

PROMPT_003 / BUTTONS

GIVE MY CTA GRAVITY.

A reusable cursor-following button component with proper touch and reduced-motion fallbacks.

buttonmousepremium

Preview