Corner Frame Scramble Text

A flexible and elegant text component wrapped in a corner frame with a scramble animation effect. Built with Tailwind CSS and Framer Motion, it visually enhances dynamic text values like stats, counters, or identifiers while maintaining accessibility and styling consistency.

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

'use client'

import CornerFrameScrambleText from '@/components/ui/corner-frame-scramble-text'

export default function Demo() {
  return (
    <CornerFrameScrambleText
      value="Corner Frame Scramble"
      as="h5"
      className="text-xl text-foreground"
    />
  )
}