The entrance, engineered
Your search, knit into cloth. The previewer below runs the real presets.
Hero section animation that moves without hurting your LCP.
You searched for hero section animation, so you already know the entrance is where a hero earns its first second of attention. The hard part isn't picking an effect. It's adding motion while the headline still wins LCP, the layout never jumps, and the first tap still feels instant.
Most pages ranking for this term hand you a gallery of effects and skip the cost. An entrance that fades the headline up from nothing pushes your Largest Contentful Paint back by the length of the fade. One that animates width or margins repaints the whole hero and shifts everything under it. The previewer above runs the presets on a real hero so you can see the motion and the tradeoff at once.
I'm David Weaver — I build the sites, write the copy, and answer this form myself. The interactive loom on this site's homepage is the same discipline: heavy craft that still paints fast on a phone. If you want an entrance added to your hero without a Core Web Vitals regression, that's the work.
01
Preview four entrance presets on a live hero
Hero animation preset previewer
Preview entrance presets for a marketing hero. The right motion sells the first three seconds — the wrong one feels like a template.
Your product, finally unforgettable
Technique: opacity + translateY · cubic-bezier(0.22, 1, 0.36, 1)
02
Why the headline is the one thing you don't fade in
On most heroes the H1 is your Largest Contentful Paint element. Start it at opacity 0 and fade it up, and the browser doesn't count it as painted until it's visible — so your LCP is measured from the end of the fade, not the start. A 600ms fade is a 600ms LCP tax you never see in the design tool. Worse is gating the headline behind a JavaScript library that only reveals it after boot; now LCP waits on hydration too.
The fix is boring and it works: paint the headline immediately as server-rendered HTML, then animate everything around it — the eyebrow, subhead, CTA, background. If the headline itself must move, move it with transform, not opacity. A translated element is still painted, so it counts for LCP the moment it lands in the DOM.
03
The four presets, and what each one actually animates
The previewer covers these. Each is built from properties the browser animates on the compositor — transform and opacity — so none of them trigger layout.
Fade-rise
Opacity 0→1 with a small transform: translateY. The workhorse. Use it on secondary elements, not the LCP headline. Keep the travel under about 24px or it reads as slow.
Clip reveal
A clip-path inset that wipes the element open. Reads as crafted and costs nothing in layout, because the box never resizes — only the visible region changes.
Stagger
The same entrance applied down a list with increasing animation-delay. Cheap in CSS. Keep the total under about 500ms or the last item feels like a wait, not a flourish.
Scale
transform: scale from roughly 0.96 to 1. Subtle depth on a card or image. Full-hero scale tends to look cheap, so I reserve it for one focal element.
04
The rules that keep the entrance green
Animate transform and opacity only. Both run on the compositor thread, so the entrance can't jank the way animating width, top, or margin does — those trigger layout and drag surrounding content with them, which is exactly the CLS you're trying to avoid. Reserve each element's final space up front and let it move inside that box.
Honor prefers-reduced-motion as a designed state, not an afterthought: content simply appears, no travel. And keep the animation in CSS or the Web Animations API wherever I can. A heavy motion library booted at load adds main-thread work that surfaces as sluggish first taps — the entrance plays once, but the cost lingers.
05
Where this page stops
The scope here is the entrance — the motion in the first second. If your real question is hero layout, composition, and which element should carry the LCP, that's a different page. If you want a menu of animation ideas across the whole site, that's another. This one stays narrow on purpose: motion that greets a visitor without costing them speed.
Proof is at /work — live products, playable Roblox games, published books, all running, none of it a video reel. Judge the craft there, then send the form. It arrives tagged to this thread and you get a written reply from me.
Proof over promises
Open the work. Judge it live.
2026 · Software · Shipped
Black Nile
A conversational website builder where small businesses talk, a site appears, and their own AI answers customers — metered to the credit.
2026 · Sound · Shipped
DWeaveAi Fan Funnel
A static fan funnel, live at dweaveai.space — one owned landing page per song, routing listeners to every streaming platform.
2026 · Software · Shipped
BookWriter
AI book-writing software from an author with thirty books of skin in the game — live, billing, and tested 454 files deep.
Straight answers
Asked often. Answered honestly.
- Will a hero entrance animation slow down my LCP?
- Only if it's built wrong. The usual culprit is fading the headline up from opacity 0, which stops the browser counting it as painted until the fade ends. Keep the H1 painted immediately and animate the elements around it, and the entrance costs your LCP nothing.
- Can you animate the headline itself, or does it have to sit still?
- You can move it — just with transform, not opacity. A translated headline is still painted, so it counts for LCP the instant it renders; a faded-in one doesn't. A slide-up on the H1 is fine; a fade-in on the H1 is the thing to avoid.
- How do you stop the entrance from causing layout shift?
- By animating only transform and opacity, and reserving each element's final space before it moves. CLS comes from animating size or position properties like width, margin, or top. Transform moves the pixels without moving the box, so nothing underneath jumps.
- What do users with reduced motion turned on see?
- The content, with no travel — it simply appears. prefers-reduced-motion is a state I design for, not an error path. It's a browser and OS setting real people use, so the reduced version has to look intentional, not broken.
- Do you use GSAP or Framer Motion, or plain CSS?
- Whatever keeps the main thread free. Most hero entrances are CSS animations or the Web Animations API — nothing to download or boot. I reach for a motion library only when the interaction genuinely needs it, because every kilobyte of JS at load can make the first tap feel slow.
- Can you add an entrance to my existing hero without rebuilding the site?
- Usually yes. A well-behaved entrance is often a surgical change — a few elements, the right properties, a reduced-motion fallback — not a rewrite. Send me the live URL and I'll tell you what it takes.
Preview a preset above, then send me your hero's URL. I'll tell you which entrance fits and what it costs your Core Web Vitals — free, in writing.