Kinetic Type Scroll

A text animation component that creates a kinetic typing effect as the user scrolls. It scales, lifts, and adjusts the tracking of each word based on scroll position. Use it to add visual interest to long-form text sections. The effect is subtle and enhances readability during scrolling.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/kinetic-type-scroll

npx layro-cli add @educlopez/kinetic-type-scroll

npx layro-cli add @educlopez/kinetic-type-scroll

bunx layro-cli add @educlopez/kinetic-type-scroll

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  type MotionValue,
  motion,
  useReducedMotion,
  useScroll,
  useSpring,
  useTransform,
} from "motion/react";
import type { RefObject } from "react";
import { useRef } from "react";