Kinetic Center Build

A text animation component that displays phrases one word at a time, with each word entering from the right and pushing previous words to the left. It transitions smoothly between phrases, locking the full phrase centered. Use it to create dynamic, Apple keynote-style text effects.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/kinetic-center-build

npx layro-cli add @educlopez/kinetic-center-build

npx layro-cli add @educlopez/kinetic-center-build

bunx layro-cli add @educlopez/kinetic-center-build

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 KineticCenterBuildProps {
  className?: string;
  /** Interval between phrase completions in milliseconds. */
  interval?: number;
  phrases: string[];
}

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