Kinetic Text Ramp

Oversized type scrolls across a receding perspective plane with a hard shadow edge.

Components / Kinetic Text Ramp

Feedbackmotiontextperspectiveheadline

Oversized repeated type moves across a receding perspective plane with a hard extruded edge.

Preview

Loading preview…

Usage

Oversized type scrolls across a receding perspective plane with a hard shadow edge.

<KineticTextRamp>STEP IT UP</KineticTextRamp>
<KineticTextRamp trigger="hover" rows={10}>MAKE SOME NOISE</KineticTextRamp>

Files

components/steez/KineticTextRamp.tsxcomponent

components/steez/KineticTextRamp.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { KineticTextRamp } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/kinetic-text-ramp.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { KineticTextRamp } from "<project-root>/components/steez/KineticTextRamp";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/kinetic-text-ramp.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Kinetic Swipe Text

Bold display type that snaps through a quick horizontal or vertical split.

ASCII Ripple Text

Hover-driven glitch ripple that scrambles characters outward from the cursor position.

Marquee Strip

Continuous horizontal marquee for providers, extensions, or launch lanes.