Animated Text

"use client";

import { ArrowUpRight } from "lucide-react";
import { AlternatingTextSwap } from "@/components/premium/animated-text";

export function AlternatingTextSwapPreview() {
  return (
    <div className="flex min-h-72 w-full items-center justify-center px-6 py-14">
      <a
        href="#alternating-text-swap"
        className="group inline-flex min-h-12 items-center gap-3 border-border border-b pb-2 font-medium text-3xl text-foreground tracking-[-0.04em] outline-none sm:text-5xl focus-visible:ring-2 focus-visible:ring-ring"
      >
        <AlternatingTextSwap text="Explore work" hoverText="View projects" />
        <ArrowUpRight
          aria-hidden
          className="size-6 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 sm:size-8"
        />
      </a>
    </div>
  );
}

"use client";

import { BlurHighlight } from "@/components/premium/animated-text";

const PARAGRAPH =
  "We turn ideas into interfaces where movement creates clarity, rhythm builds trust, and every interaction carries meaning.";

export function BlurHighlightPreview() {
  return (
    <div className="flex min-h-96 w-full items-center justify-center px-6 py-16 sm:px-12">
      <BlurHighlight
        text={PARAGRAPH}
        highlights={[
          "ideas into interfaces",
          "movement creates clarity",
          "carries meaning",
        ]}
        className="max-w-4xl font-medium text-3xl text-foreground leading-[1.18] tracking-[-0.04em] sm:text-5xl lg:text-6xl"
      />
    </div>
  );
}

"use client";

import { ProgressiveBlurHighlight } from "@/components/premium/animated-text";

const PARAGRAPH =
  "Great products emerge when clear thinking meets careful details, confident motion, and the patience to refine what matters.";

export function ProgressiveBlurHighlightPreview() {
  return (
    <div className="flex min-h-96 w-full items-center justify-center px-6 py-16 sm:px-12">
      <ProgressiveBlurHighlight
        text={PARAGRAPH}
        highlights={[
          "clear thinking",
          "careful details",
          "refine what matters",
        ]}
        className="max-w-4xl font-medium text-3xl text-foreground leading-[1.18] tracking-[-0.04em] sm:text-5xl lg:text-6xl"
      />
    </div>
  );
}