Border Trail Textarea Demo

1"use client";
2 
3import { BorderTrail } from "@/components/sora-ui/effects/border-trail";
4 
5export interface BorderTrailTextareaProps {
6  duration?: number;
7  size?: number;
8}
9 
10/** motion-primitives `border-trail-textarea` */
11export function BorderTrailTextarea({
12  duration = 5,
13  size = 120,
14}: BorderTrailTextareaProps) {
15  return (
16    <div className="relative h-[160px] w-[260px] overflow-hidden rounded-md border border-zinc-950/10 bg-white text-zinc-700 outline-hidden dark:border-zinc-50/20 dark:bg-zinc-950 dark:text-zinc-300">
17      <textarea className="h-full w-full resize-none rounded-md bg-transparent px-4 py-3 text-sm outline-hidden" />
18      <BorderTrail
19        className="bg-linear-to-l from-blue-200 via-blue-500 to-blue-200 dark:from-blue-400 dark:via-blue-500 dark:to-blue-700"
20        size={size}
21        transition={{
22          duration,
23          ease: "linear",
24          repeat: Number.POSITIVE_INFINITY,
25        }}
26      />
27    </div>
28  );
29}
30 
31export default BorderTrailTextarea;