AI Citation

"use client";

import Component from "@/components/ui/ai-citation";

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-lg rounded-2xl border bg-card p-6 shadow-sm">
        <p className="font-semibold text-foreground text-sm">Answer</p>
        <p className="mt-3 text-foreground text-sm leading-relaxed">
          Spring animations are preferred over fixed-duration tweens for
          interface motion because they stay interruptible
          <Component
            description="Springs keep momentum when a new target arrives mid-flight, so an interrupted animation never snaps."
            label={1}
            title="Spring options"
            url="https://motion.dev/docs/react-transitions"
          />{" "}
          and because the browser can run transform and opacity off the main
          thread
          <Component
            description="Only transform and opacity are composited. Animating width or top forces layout on every frame."
            label={2}
            title="Animations guide"
            url="https://web.dev/animations-guide"
          />
          . Keep the bounce at or below 0.1 for UI
          <Component
            description="Higher bounce reads as playful. A dialog that wobbles open looks broken rather than lively."
            label={3}
            title="Animation best practices"
            url="https://smoothui.dev/docs/guides/animation-best-practices"
          />
          .
        </p>
        <p className="mt-5 border-t pt-4 text-muted-foreground text-xs">
          Click a citation to open its source card.
        </p>
      </div>
    </div>
  );
}