Shared Axis X

A text animation component that cycles through phrases horizontally. It transitions each phrase by sliding left as the next slides in from the right. Use it to display dynamic text content with smooth visual effects.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/shared-axis-x

npx layro-cli add @educlopez/shared-axis-x

npx layro-cli add @educlopez/shared-axis-x

bunx layro-cli add @educlopez/shared-axis-x

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useState } from "react";

export interface SharedAxisXProps {
  className?: string;
  /** Interval between phrase swaps in milliseconds. */
  interval?: number;
  phrases: string[];
}

const ENTER_EASE = [0.2, 0, 0, 1] as const;
const EXIT_EASE = [0.4, 0, 1, 1] as const;