Potfolio Text

Text 281

About

Elegant animated text component with the rotating diamond visual replacing the "o" character.

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

Code

How Potfolio Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedLetterText } from "@/components/ui/potfolio-text"

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center gap-16 p-8 w-full">
      <div className="flex flex-col items-center gap-8">
        <AnimatedLetterText text="Portfolio" letterToReplace="o" className="text-7xl md:text-9xl" />

        <p className="text-muted-foreground text-lg max-w-md text-center">
          An elegant text component where letters transform into animated visuals
        </p>
      </div>
    </main>
  )
}