How does the kinetic word-swap work without re-animating the whole headline?

The static word "Ship" lives on a block that is reused across the first three panes, so it never re-enters - it just holds position. Only the swapped word ("faster.", "safer.", "together.") changes per pane, landing with a letter-scale entrance while a hand-drawn blue underline redraws beneath it. That is the whole trick: because the rest of the composition stays anchored, the eye reads one continuous headline with a rotating verb instead of four separate slides.

Are the UI cards screenshots of a real product?

No, and that is the point. The deploy log, the checks card, and the review thread are all built from PaneFlow blocks - mono text rows, circle shapes for status dots and avatars, a rounded rectangle for the card itself. That means you can edit every row of "build · compiled in 12.4s" or "security audit · clean" as text, recolor the cards to your brand, or rebuild them to mirror your actual product UI without opening a screenshot editor.

Can I use this as the actual hero on my marketing site?

Yes - that is the intended destination. Export to HTML, React, Vue, or Svelte and drop the component into your homepage hero band; the 2:1 format is sized for exactly that slot. The word-swap, draw underline, and number-roll chips all run from the exported code, so the kinetic headline keeps cycling on your live site. You can also export to video for ads or social cuts of the same message.

SaaS Hero Template - Kinetic Type Headline

A homepage hero for SaaS and startup teams built around one kinetic idea: the verb does the selling. "Ship" holds still in 200px Inter Tight black while the next word rotates - faster, safer, together - each swap landing with its own proof card on the right. Four panes, an off-white field, one electric blue accent, and not a single stock image or generated screenshot anywhere in the file.

#What Makes This Template Stand Out

The kinetic type trick is the headline move. Most rotating-headline heroes re-animate the entire line every cycle. Here the static "Ship" is a reused block that never moves, so only the swapped word enters - letter by letter, with a hand-drawn blue underline that redraws beneath each new verb. The result reads as one sentence thinking out loud rather than a slideshow of three sentences, and the closing pane compresses the whole argument into a lone centered "Ship." over the tagline "The deploy platform for teams that hate waiting."

The proof cards are built UI, not screenshots. Each pane pairs its verb with a floating card assembled from real PaneFlow children: a deploy log with mono rows and a green "live in production" line for faster, a checks card with three passed test rows for safer, a review thread with avatar circles and a "Looks great. Ship it" comment bubble for together. Every row is editable text, every dot is a shape, and the slight rotation and stacked depth come from the blocks themselves.

The numbers move so you do not have to oversell. A blue metric chip rides the corner of each card and number-rolls into place - 38s average deploy, 0 incidents this quarter, 12 reviewers in thread - while a quiet "Trusted by 4,200 teams" line anchors the bottom right. Cards float at higher parallax than the type, so the hero has depth without a single gradient or blob fighting the message.

Kinetic word-swap headline: static "Ship" holds while faster / safer / together rotate per pane
Hand-drawn blue underline that redraws beneath each swapped word with the draw animation
Three proof cards built entirely from blocks: deploy log, checks list, and review thread
Number-roll metric chips on every card: 38s deploys, 0 incidents, 12 reviewers
Closing proof beat that compresses to a lone "Ship." with three mono stats below
4-pane 2:1 format sized for homepage hero bands, zero stock images or screenshots

#Who Should Use This Template

SaaS founders and growth teams who need a homepage hero that states the value proposition three ways without three paragraphs of copy. The verb-first structure forces the message down to what the product actually does.
Developer tool and infrastructure companies whose audience distrusts marketing gloss. The mono metric chips, deploy log card, and commit-hash details read as native to a technical buyer's world.
Product marketers running message testing who want to rotate positioning angles - speed, safety, collaboration - inside one asset instead of shipping three landing page variants.
Design-conscious teams without a designer on call. Because every card is built from editable blocks, rebranding the entire hero is a palette swap and a copy pass, not a Figma project.

#Best Use Cases

#Homepage Hero Sections

This is the template's native habitat. Export to HTML, React, Vue, or Svelte and mount it in the hero band of your marketing site - the 2:1 canvas is proportioned for exactly that slot. The headline keeps cycling through its three verbs on autoplay while the CTA pill ("Get started - free") stays fixed in place, so the page works whether a visitor watches one swap or all four panes.

#Product Launch and Feature Announcements

When the launch message is one strong verb, this structure carries it. Swap "Ship" for your own anchor word, rewrite the three rotating completions, and rebuild the proof cards around the feature you are announcing. Export to video for the launch tweet and embed the interactive version on the announcement page so both assets share one source of truth.

#Paid Landing Pages and Ad Variants

The three verb panes are effectively three positioning tests living in one file. Run the full cycle on a landing page, or export each pane as a static image and A/B the angles in ad creative. Because the metric chips and card copy are plain text, updating the numbers as your stats improve takes seconds rather than a design request.

#How to Customize This Template

Open PaneFlow and select "SaaS Hero - Kinetic Type" from the template gallery
Replace "Ship" with your own anchor verb and rewrite the three swapped words - faster, safer, together - to match your positioning
Edit the deploy log card on pane 1: the three mono rows, the green status line, and the branch and commit footer
Update the metric chips and their labels - 38s avg deploy, 0 incidents this quarter, 12 reviewers in thread - with your real numbers
Rework the checks card on pane 2 and the review thread on pane 3, swapping avatar initials and the comment bubble copy
Rewrite the CTA pill text and the "Trusted by 4,200 teams" proof line to your own offer and customer count
On the closing pane, update the tagline and the three mono stats (38s deploys, 99.99% uptime, SOC 2)
Swap the electric blue accent for your brand color, then export to HTML, React, Vue, or Svelte for your homepage

Feature Tour - SaaS Section - the section that follows this hero, walking the product feature by feature
Stats Band - Number Roll Strip - the same number-roll proof language as a standalone metrics band
Web App Feature Announcement - launch-day counterpart for announcing what you just shipped
SaaS Pitch - Minimal - the investor deck in the same restrained, numbers-first register

PaneFlow for SaaS - animated heroes, product tours, and feature reveals built for SaaS teams
PaneFlow for Landing Pages - animated sections that export straight into your page code
PaneFlow for Developers - export to React, Vue, Svelte, or plain HTML and keep every animation

Start with SaaS Hero - Kinetic Type

Open this template in PaneFlow, customize it to match your brand, and export as HTML, React, Vue, or video.

Use This Template Browse All Templates

SaaS Hero - Kinetic Type Template