Gradient Border
グラデーションボーダー
A rim of colour turning slowly around a card — the usual way to say a machine is busy. It is a conic gradient↗↗ spun behind the content, on a square deliberately larger than the frame so its own corners never rotate into view and nick the edge. Toggle active to stop it. Built with Framer Motion and Tailwind CSS.
Thinking
Working through the request.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion } from "framer-motion"
import type { ReactNode } from "react"
type GradientBorderProps = {
children: ReactNode,
active?: boolean,
thickness?: number,
duration?: number,
How to use it3
"use client"
import { GradientBorder } from "@/components/ui/gradient-border"
export default function Page() {
return (
<GradientBorder active thickness={2} duration={4}>
<div className="p-5">Thinking…</div>
</GradientBorder>
)
Props
GradientBorder
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode The content inside the border |
| active | true | boolean Whether the gradient is turning |
| thickness | 2 | number Border width in pixels |
| duration | 4 | number Seconds for one full revolution |
| colors | 4 hues | string[] Conic gradient stops; repeat the first colour last for a seamless loop |
| dark | false | boolean Render the dark palette |