Animations & Interactions

Kivo Theme Documentation

Files: src/config/config.toml, section content files · Skill level: Beginner

Kivo’s motion is calm by design: content fades in a short distance, and product mockups play once when they scroll into view. Every animation respects the visitor’s reduce motion setting.

Fade-In On Scroll

[settings.animation]
  enable               = true
  respectReducedMotion = true
  duration             = "600ms"     # how long each fade takes
  distance             = "0.75rem"   # how far content rises while fading in
  easing               = "cubic-bezier(0.215, 0.61, 0.355, 1)"
  rootMargin           = "0px 0px -8% 0px"
  threshold            = 0.14        # how much of an element is visible before it starts

Set enable = false to show everything without fading. Keep respectReducedMotion = true: some visitors get dizzy from motion.

Smooth Scrolling

[settings.smoothScroll]
  enable               = true
  respectReducedMotion = true
  duration             = 1.1      # higher feels slower and smoother
  easing               = "expo"   # expo | linear | easeOutQuad | easeOutCubic

Set enable = false for the browser’s normal scrolling.

Section Animations

These are set in each section’s content file:

Where	Option	What it does
Hero (`hero-saas.md`)	`rotatingWords`	Words typed one after another at the end of the title
Hero	`options.rotatingStyle`: `typewriter` or `fade`	Typed and deleted, or a soft cross-fade
Hero	`options.showGrid`	The grid backdrop with lit cells
Hero	`preview`, `preview.terminal`, `agent`, `dashboard`	The animated product mockup (one at a time)
Steps (`steps-section.md`)	`options.autoplay`, `options.interval`	Cycles through the steps (`interval` in milliseconds)
Testimonials (`customer-quotes-section.md`)	`options.autoplay`, `options.interval`	Rotates the quotes in the `default` layout
Stack (`stack-section.md`)	`marquee.duration`, `marquee.pauseOnHover`, `marquee.reverse`	Speed and direction of the scrolling logos
Call to action (`call-to-action.md`)	`pipeline`	The deploy steps that play under the buttons
Footer (`config.toml`)	`[settings.layout] footerWordmark`	`interactive` dots that follow the cursor, or `static` text

The Demo Layout Switcher

The floating Change layout button is a tool for choosing layouts, not a feature for your visitors. It is off by default ([settings.layoutSwitcher] enable = false). If you turn it on while you choose layouts, turn it off again before launch. See Section Layouts.