Guides · · Maxwell Prehoda
14 SaaS Website Animation Examples, Explained by the Teams Who Built Them
The SaaS sites people point to for motion animate one thing well and keep everything else quiet: Stripe's gradient, GitHub's globe of live pull requests, Figma's product explainers. The motion explains the product or proves a claim, and it degrades gracefully on slow devices.
Most roundups list famous homepages and guess at how they work. Every third-party entry here comes from the team's own write-up or a documented case study, so you get what they built, the numbers they shared and the decisions worth copying. We left out sites whose teams have not published how their motion works, rather than guess. Pure CSS versions of the patterns from our directory play live where they fit.
1. Stripe's homepage gradient: Best for a signature hero background that is the brand
Platform: WebGL on a canvas, custom shader
Stripe's flowing, angled gradient is probably the most copied SaaS hero of the last few years. Kevin Hufnagl's teardown shows it is not CSS: it is a WebGL shader drawn on a canvas through a tiny WebGL wrapper (he calls it minigl), driven by a Gradient class, with its four colors read from CSS custom properties. Stripe's version also uses a scroll observer to stop the effect when it is out of the viewport.
The lesson is restraint as much as technique. It is one effect, behind the headline, in brand colors, and it stops when nobody can see it.
Our Skewed Gradient Hero Background below is a pure CSS take on the angled-band look, no canvas or shader.
Watch out for: Copying the exact Stripe look makes your site read as a Stripe clone. Keep the technique and change the angle, palette and motion speed.
2. Stripe's interactive globe: Best for showing global reach at a glance
Platform: Three.js, WebGL, GLSL
Nick Jones's September 2020 write-up describes the 1:40 million scale Earth on stripe.com: a semi-transparent ocean sphere, a layer of twinkling dots that define the continents, and arcs from countries where Stripe accepts payments to countries where businesses use it. The team started with about 60,000 dots and cut it to about 20,000 by only drawing countries where Stripe is live, and each arc is drawn over 2.5 seconds.
Two performance calls stand out. Turning off antialiasing fixed lag on high-resolution displays and sped things up everywhere. And while you scroll, the arc animations pause and the globe rotates with scroll position instead, so the page never fights itself.
A static image was planned as a fallback; the team writes that they never needed it.
Watch out for: The write-up does not mention reduced motion. If you build something similar, pause the rotation under prefers-reduced-motion and keep the globe usable as a still.
3. Stripe Connect's landing page: Best for product pages that demo the UI in motion
Platform: CSS 3D transforms + Web Animations API
Benjamin De Cock's June 2017 post is still one of the best accounts of marketing-site motion. The page's onboarding demo runs on the Web Animations API (a keyboard slide is element.animate() over 800 ms with cubic-bezier(.2, 1, .2, 1)), and the floating cubes in the header are CSS 3D transforms animated with requestAnimationFrame, with shading computed in JavaScript.
His rules are the ones to copy: animate only cheap properties, transform and opacity; define your own cubic-bezier curves instead of using ease-in or linear; and switch decorative animation off with a prefers-reduced-motion media query and a matchMedia check.
Our 3D Rotating Cube below is a pure CSS version of the floating-cube idea, using preserve-3d and perspective with no JavaScript.
Watch out for: Demo animations that mimic your UI go stale when the product changes. Build them from real components or schedule an update with each redesign.
4. GitHub's homepage globe: Best for turning live product data into the hero
Platform: Three.js, WebGL, Web Animations API
Tobias Ahlin's December 2020 post explains a globe built from real activity: blue spikes for open pull requests and pink arcs for merged ones, each arc linking where a pull request was opened to where it was merged. Hover shows the repo, language and locations, and every line is clickable. There are no textures; about 12,000 circles draw land and water from a small PNG world map.
The performance design is the part to steal. A Figma-made SVG placeholder shows immediately and crossfades to the canvas over 600 ms. If the frame rate drops below 55.5 FPS over 50 frames, the scene steps down a quality tier: lower pixel density, fewer pull requests and as few as about 8,000 circles. The starting rotation comes from your timezone, so no IP lookup delays the first render.
It works because the motion is the proof: you are watching people use the product.
Watch out for: Live data means live failure modes. Have the placeholder be a finished design, not a spinner, so a blocked script or slow API still leaves a good hero.
5. Vercel's Next.js Conf prism: Best for event and launch pages that can afford one big moment
Platform: react-three-fiber, drei, postprocessing
For the Next.js Conf 2022 registration page, Paul Henschel and Anthony Shew built a light beam that follows the cursor, bounces off objects and splits into a rainbow when it hits a prism, with bloom and a blue color grade. Their October 2022 write-up covers the stack: react-three-fiber, drei helpers and react-postprocessing to merge effects into one pass.
Their performance advice is practical: measure frame rate rather than GPU load, lower effect quality or pixel ratio when it drops, keep the expensive reflections on the prism only and turn them off on mobile, and use plain positioned PNGs for glows instead of more WebGL.
Our Prism Rainbow Background below is a pure CSS take on the beam-through-a-prism image, with the spectrum as one conic gradient.
Watch out for: A cursor-driven scene does nothing on touch screens. Give phones an autoplaying or static version, since that is where much of your traffic is.
6. Figma's homepage product animations: Best for explaining several products on one page
Platform: Rive
In July 2023 Figma relaunched its homepage with interactive Rive animations that explain how its products work, and Rive wrote it up as a case study. Instead of screenshots or long videos, each section shows the product in a short, looping, interactive illustration.
This is the pattern for multi-product SaaS: one small animation per product, each answering "what does this do?" in a few seconds, rather than one giant hero. Rive files play through a runtime and can react to hover and clicks with state machines, which video cannot.
If your product is a canvas or editor, simplified animated UI usually explains it faster than a real screen recording full of detail.
Watch out for: Rive needs its runtime on the page. Load it only where the animations are, and give each one a poster so the section is not blank while it loads.
7. Intercom's product animations: Best for SaaS teams replacing heavy Lottie or video files
Platform: Rive, migrated from Lottie
Intercom recreates its product as animation across its website so visitors can see it without signing up. Rive's August 2024 case study, starting with the Fin AI Copilot launch, documents the move from Lottie: After Effects pre-comps were hard to rearrange, some animations looked soft, and Safari struggled with the heavy Lottie files.
The numbers are the reason to read it. File sizes roughly halved (the Copilot hero went from 1.49 MB to 831 KB, Insights and Reporting from 880 KB to 441 KB), process time dropped to about 20% of the Lottie workflow, and four more animations went live within 24 hours instead of a week.
Our Dashboard Skeleton below shows the lightest end of "product as animation": KPI cards and a chart that draws itself, in pure CSS.
Watch out for: Product animations are marketing, not documentation. Label them clearly, and link to a real screenshot or demo for buyers who want to see the actual UI.
8. Dropbox's brand guidelines site: Best for brand and design-system sites that tell a story
Platform: Webflow + Rive
Dropbox's Brand Studio and Daybreak Studio rebuilt the brand guidelines site with Webflow for structure and Rive for interactive animation, launched in January 2025. The Color page uses animated graphics and the Iconography page has an interactive carousel, built with Rive's State Machine and Viewport features.
The team describes it as more about storytelling than their earlier, functional guideline sites. For a SaaS company, the brand site is where motion can be most expressive, because visitors come to explore, not to finish a task.
Use it as the reference when your design system or brand page needs to feel like a product in its own right.
Watch out for: Guidelines exist to be used. Keep downloads, color values and rules one click away and never behind an animation that has to finish first.
9. IBM Carbon's productive and expressive motion: Best for teams setting motion rules for product and marketing
Platform: Design system docs, CSS tokens
Carbon splits motion into two modes. Productive motion is fast and stays out of the way, for button states, dropdowns and data tables. Expressive motion is lively and visible, saved for important moments such as opening a new page or clicking a primary action. Each has its own curves: productive standard easing is cubic-bezier(0.2, 0, 0.38, 0.9), expressive standard is cubic-bezier(0.4, 0.14, 0.3, 1).
Durations are tokens, from duration-fast-01 at 70 ms for toggles to duration-slow-02 at 700 ms for background dimming. That vocabulary maps neatly onto SaaS: your app is productive, your homepage hero and launch pages are expressive.
Adopting the split stops the common mistake of marketing-page flourishes leaking into the product, where they slow people down.
Watch out for: Carbon is tuned for IBM's enterprise products. Treat the tokens as a sensible starting point and adjust them to your brand rather than copying them wholesale.
10. Atlassian's motion foundations: Best for product UI timing rules a whole team can follow
Platform: Design system docs
Atlassian sums up its approach in one line: "Motion is a clarifying layer, not decoration." Its rules are concrete: hover and press interactions run 50 to 150 ms, transitions 150 to 400 ms (a dropdown enters in 150 ms, a modal in 250 ms), exits are faster than entrances, and reduced motion means instant.
The test it gives is the best one for any SaaS UI: would removing the motion cause the user to lose information or context? If not, consider omitting it. It also asks for one focal point at a time and no animation that makes people wait before their next step.
Pin these numbers next to Carbon's and you have most of a motion spec for a B2B app.
Watch out for: Its semantic motion tokens cover only some components so far. Expect to define your own for anything custom.
11. Rauno Freiberg's Invisible Details of Interaction Design: Best for deciding what not to animate in a product
Platform: Essay, July 2023
This essay is about why interactions feel right, and one section matters most for SaaS: frequency and novelty. Things people do many times a day, like command menus, context menus and app switchers, work better with no animation at all. The author writes that removing motion from his own bookmarking tool made it feel faster.
The rest is a tour of interruptible animation, spatial consistency and gestures, drawn mostly from iOS and macOS. It explains why a menu that animates every time you press Cmd+K feels sluggish by the third day, even if it looked great in the design review.
Read it before you add motion to your app shell, then save the expressive work for the marketing site.
Watch out for: Its examples are mostly native Apple platforms, not web. The principles transfer; the specific gestures and timings do not.
12. Our Ambient Glow Background: Best for the dark developer-tool hero, without WebGL
Platform: Motions directory, free, HTML + CSS Ours
The dark product hero look many developer tools use: two soft accent glows bleed in from opposite corners and slowly breathe, under a hairline of light along the top edge. It is pure CSS, so it costs no script and themes from one custom property.
Like everything in our directory it has a prefers-reduced-motion guard that holds the glow still. For more hero options, browse animated backgrounds or the gradient backgrounds collection.
Watch out for: Large blurred areas still cost paint time. Keep the glow behind the hero only, not fixed behind the whole page.
13. Our Spotlight Card Hover: Best for feature grids on dark SaaS landing pages
Platform: Motions directory, free, HTML + CSS Ours
See every signal
Live dashboards that update the moment your data lands.
A dark card where a soft spotlight glides in from the corner on hover and settles at the top, lighting the border as it passes. It uses two registered @property values, so the light animates smoothly with no JavaScript pointer tracking.
It is the feature-card treatment that pairs with a dark hero. The card hover collection has lighter options, and our Pricing Card Hover handles the plans section.
Watch out for: Hover-only effects do not exist on phones. Make sure the card looks finished at rest and the link is obvious without the light.
14. Our Monthly Yearly Pricing Toggle: Best for pricing pages with an annual discount
Platform: Motions directory, free, HTML + CSS Ours
The pricing page switch: Monthly and Yearly on either side of a track that stays colored, because both choices are valid, plus a savings badge for the yearly side. It is a real checkbox with role="switch", so it works with the keyboard and screen readers.
Pair it with an animated price so the change is noticed: our Animated Price Counter counts the number up. Or describe your pricing section to the creator and get the motion back as CSS.
Watch out for: Do not animate prices so long that people wait to read them. Keep any count-up under about 600 ms and show the final value to screen readers immediately.
How to choose animation for a SaaS website
Every team above made the same three decisions.
Match the motion to the claim
Animate the thing you want believed. Global reach: a globe like Stripe's. Real usage: live data like GitHub's. Ease of use: short product animations like Figma's and Intercom's. A brand you want remembered: one signature background. If an animation does not support a claim on the page, cut it.
Match the weight to the page
Use Carbon's split. Homepage heroes and launch pages can be expressive and can afford WebGL or Rive. Pricing, docs and the app itself should be productive: Atlassian's 50 to 150 ms for interactions, no motion on high-frequency actions. CSS covers almost everything in the productive tier.
Plan the fallback first
Every heavy example here has a fallback story: GitHub's SVG placeholder and quality tiers, Stripe pausing off screen, Vercel turning reflections off on mobile. Decide what a slow phone and a reduced-motion user see before you build the hero, and make that version good on its own.
Pick one moment and animate it this week
Look at your homepage and find the one claim that matters most. Give it one piece of motion that proves it, keep everything else still, and ship a static version that looks finished without it.
For the building blocks, a hero background, feature card or pricing toggle, copy a pure CSS version from our directory. For something specific to your product, describe it and refine it in chat.
Make a hero background for a dark SaaS landing page, pure CSS, behind a headline and two buttons. Two soft brand-colored glows drift slowly from opposite corners on a 12 s loop, with a hairline highlight along the top edge. Animate only transform and opacity; no blur filters on large areas. Pause the drift when the hero is off screen if possible, and under prefers-reduced-motion show the glows still.
Common questions
What animations work best on a SaaS website?
One signature hero element that supports your main claim (a gradient, a globe, a product animation), quiet hover states on feature cards, and small functional motion on pricing and forms. The teams in this list keep the rest of the page still.
Do website animations hurt SaaS conversion or performance?
Heavy ones can, if they delay the first paint or drain phones. The examples here avoid that with placeholders that render immediately, quality tiers based on frame rate, pausing off screen and turning effects off on mobile. Pure CSS motion on transform and opacity is cheap.
Should I use Lottie or Rive for SaaS product animations?
Both work. Intercom moved from Lottie to Rive and reported files roughly halved and much faster production, and Figma and Dropbox use Rive for interactive pieces. Lottie fits teams already animating in After Effects. For small UI motion, CSS needs no runtime at all.
How did Stripe make its gradient background?
According to Kevin Hufnagl's teardown, it is a WebGL shader rendered on a canvas through a minimal WebGL wrapper, with colors set in CSS custom properties and a scroll observer that stops it off screen. A CSS-only approximation can get close with layered gradients.
How long should SaaS UI animations be?
Atlassian recommends 50 to 150 ms for hover and press feedback and 150 to 400 ms for things entering or leaving, with exits faster than entrances. IBM Carbon's tokens run from 70 ms for toggles to 700 ms for background dimming.
Sources
- Kevin Hufnagl: How to create the Stripe website gradient effect
- Stripe: To design and develop an interactive globe
- Stripe: Connect, behind the front-end experience
- GitHub: How we built the GitHub globe
- Vercel: Build an interactive WebGL experience with Next.js
- Rive: Figma's new homepage is full of Rive animations
- Rive: Intercom's product animation evolution
- Rive: Dropbox launches interactive brand guidelines site
- IBM Carbon: Motion
- Atlassian Design: Motion
- Invisible Details of Interaction Design