Shared Axis Y

Text 9

About

An animated text component that swaps phrases with a per-word hard-cut staircase transition for sharp, editorial word cycling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shared Axis Y to your project and fits it to your theme.

Code

How Shared Axis Y is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import SharedAxisY from "@/components/ui/shared-axis-y";

const SharedAxisYDemo = () => (
  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center text-foreground">
    <SharedAxisY
      className="font-bold text-4xl tracking-tight"
      phrases={[
        "Layered navigation.",
        "Hierarchy made clear.",
        "Depth with restraint.",
      ]}
    />
  </div>
);

export default SharedAxisYDemo;