When evaluating a SaaS, I often just skip the landing page and all of its marketing fancy words and go straight to Pricing page.

Usually, I will find what I need there: what features does the SaaS has, and how much do I have to pay to get what features.

For that reason, I added GIFs to every single feature of my SaaS pricing page:

Demo

CleanShot 2021-12-03 at 00.26.43.mp4

On mobile:

CleanShot 2021-12-03 at 00.28.32.mp4

That's 27 GIFs and took me a whole morning! You can see it here: https://blackmagic.so/membership/

I like my pricing page a lot. It even works on mobile! And people seem to like it too!

https://twitter.com/dsabar/status/1464112898901360640

If you have a SaaS, I encourage you to do the same.

How I built the tooltips

Here are the tools I used to do it:

• LICEcap (free): this app record a GIF very fast and the output size is very small!
• ReactTooltip (free): the React library for the tooltips. It allows you to customize the tooltip content to add other React components and images to the tooltip content. Works very well on mobile too.
• The pricing page is built from a Tailwind UI template page (paid template, but you can use any other templates out there).

The code

// These are the components inside the tooltip
import WebPortalTour from 'components/tour/WebPortalTour.js';
import MobileAppsTour from 'components/tour/MobileAppsTour.js';
import BrowserExtensionsTour from 'components/tour/BrowserExtensionsTour.js';
import ScheduleTweetsThreadsTour from 'components/tour/ScheduleTweetsThreadsTour.js';
//... more

// Define the list of your "tour" like this
const TOUR = {
  TweetRealTimeMetricTour,
  PastInteractionsTour,
  BrowserExtensionsTour,
  WebPortalTour,
  MobileAppsTour,
  ScheduleRetweetsTour,
  ScheduleTweetsThreadsTour,
  // ... more
}

// In your React 

The feature lines: