An AI SaaS site with motion I proposed and built

Motion I proposed for a static design

The design was static, and the client hadn’t asked for animation. A product this abstract benefits from movement that shows what it does, so I built a motion layer on top of the design and presented it. The client kept all of it.

Next to the client’s hero Lottie, which I integrated into the layout, the motion is my own:

• Cards: each card’s shape reacts on hover with its own Webflow Interaction. Some shapes rotate, others move.
• Feature tabs: each tab has its own animated illustration (see 02)

The motion respects the reduced-motion preference wherever possible.

Illustrations that follow the tabs

The feature tabs rotate automatically, and each one has its own SVG illustration animated with a GSAP timeline. Keeping them in step was the hard part: an illustration that starts late, or keeps playing after its tab has gone, breaks the effect. I wired the tab script to fire a custom event on every switch, and each illustration’s timeline listens for it, so every animation starts with its tab and resets when the tab changes.

Technical SEO from 77 to 98

After the build, a Semrush site audit scored 77. I worked through the issues it flagged, including metadata, broken links, redirects, alt text, the sitemap and canonical tags, and brought the score to 98.

legato.ai

Structured data that maintains itself

I added JSON-LD schema across the site: Organization, WebPage and AboutPage on the static pages, and BlogPosting on articles. The blog schema is generated from CMS fields on the post template, so every new post ships with structured data without anyone touching code. That matters here because I publish the posts: 37 so far, none needing manual schema work.

legato.ai