Why a marketing site should be fast before it is clever

A fast marketing website answers before it performs. The first paint should show the offer, the proof, and a way to talk to someone. Motion can follow that paint, and only when it explains a relationship a still frame would hide.

Clever motion on a slow page reads as carelessness. A visitor who waits on a blank screen, then watches a headline drift in, has already spent the attention the animation wanted. Speed is the courtesy. The flourish is a later choice.

What fast means before any flourish

When a founder asks whether the site is fast, use Google's Core Web Vitals. They measure three things a person feels: how long the main content takes to appear, how quickly the page responds to a tap, and whether the layout jumps while it settles.

web.dev, Google's guide to those metrics, states the good thresholds in figures a team can remember. Largest Contentful Paint should occur within 2.5 seconds of the page starting to load. Interaction to Next Paint should be 200 milliseconds or less. Cumulative Layout Shift should stay at 0.1 or less. Google Search Central recommends the same kind of line for Search: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint under 200 milliseconds, and Cumulative Layout Shift under 0.1. A page can be handsome and still miss all three.

Those figures describe real visits, including phones on ordinary networks. That is how most founders check their own site between meetings. A lab score on a studio laptop is a useful rehearsal. The visit on a phone is the one that counts. web.dev also notes that a sensible bar is the 75th percentile of page loads, split by mobile and desktop, so a single lucky refresh does not stand in for the crowd.

On a Hanabi marketing site, that first paint is part of the design. The headline, the supporting sentence, and the action are HTML the browser can show without waiting for a script to invent the page. Images carry their dimensions. Type choices stay few. The layout reserves space so a picture cannot shove the next paragraph down when it arrives.

Why a late flourish feels careless

A loading curtain, a cursor that trails the mouse, and a hero that assembles itself piece by piece all assume the visitor will wait. Many will leave during the wait. The animation then plays for an empty room, or it plays after the person has decided the company feels slow.

The failure is an order of effort. The team spent its care on the entrance. The visitor spent their care on a blank screen. That order says the performance of the page mattered more than the job of the page, which is to explain the company.

There is a second failure, quieter and measurable. Motion that starts late often moves the layout. A headline that fades in after the navigation has painted, or a video that pushes the following section down, is visual instability. That is what Cumulative Layout Shift records. The clever bit becomes the part that makes the page feel broken.

Decorative loops have a third cost. They keep the main thread busy on a phone that is already drawing type. A button that responds late is an interactivity problem. The visitor wanted the work page. The site was busy animating a gradient.

One motion that explains something

After the page is readable, one motion can earn its place. The test is whether the movement shows a relationship or a change of state that a still frame would hide.

Useful motion on a company site is usually small.

• A section that eases in once as it enters the viewport, so a long page does not feel like a stack of posters dumped at the same time.
• A menu that opens and closes with a short transition, so the visitor can see where the navigation went.
• A hover state on a project card that confirms the card is a link, without sliding the card out from under the pointer.
• A comparison that reveals a second state, such as a before and after, because the comparison is the point of the section.

Each of those can be removed without losing the content. The words remain. The link remains. The motion is a hint, which is the right size for a hint.

Hanabi holds the marketing site to the same rule in production. The animated version and the quiet version carry the same information. Reduced motion is part of done, so a person who has asked their system for calmer interfaces still gets the offer, the proof, and the path. If a move is the only way to understand the company, the offer is not written yet.

What to build first

Put speed in the sequence as a decision. Leave the flourish for a later decision, after the page already holds up.

1. Write the first screen as text. Headline, one sentence, one action. If that screen is unclear, no animation will repair it.
2. Ship the page as HTML and CSS that paint without a large script. A marketing page can be mostly static. Interactivity belongs on the menu, the form, and the few components that change.
3. Place real images in their final boxes, with width and height, so the layout does not jump. A hero photograph is often the largest element. Treat it as the element you owe the visitor quickly, which is the practical meaning of Largest Contentful Paint.
4. Read the three vitals on a phone-sized viewport before you add motion. If the page is already late, motion is how you make it later.
5. Add one move that explains something. Review it with motion reduced. If the quiet version is confusing, fix the layout, then keep the move as an enhancement.

This sequence is quiet in a design review. It is the sequence that leaves a site a stranger can use on a train.

What to refuse, and what to ask for

Some ideas are inventive and still wrong for a company site.

A custom cursor hides the system cursor the visitor already understands. It tends to lag, which makes the whole site feel behind the hand.

A full-screen intro that must be clicked away spends the first action on dismissing the studio. The first action should belong to the company: look at the work, write, or book a conversation.

Parallax that moves the headline at a different rate from the body taxes reading. Reading is the job.

Autoplaying video with sound, or a looping background that never rests, asks for attention the offer has not earned. When the product is a film or a physical object that truly moves, a still frame with a play control is enough. The visitor chooses the motion.

None of this bans craft. A short transition, a careful type ramp, and a photograph with a real subject are craft. They do not require the page to stall.

Ask a studio for the first paint before you ask for the reel. A useful question in a proposal is which element is expected to be the largest paint, and what the page shows while JavaScript is still loading. Another is how the same page behaves when the visitor has asked for less motion. If the answer is a library of effects and a promise to tune them later, the speed work has been postponed. Later is when the content is locked in and the effects are expensive to remove.

Hanabi designs and builds with that order: a clear page, production code, and motion that can stand down. Hanabi's services are the map of that work, from the marketing site through the interface behind it.

When you want the three thresholds with one example each, read Core Web Vitals in plain language. That piece stays with the definitions. This one stays with the order: paint the offer, then move one thing, and only if the move teaches.