font-weight-default
Let's Go
import { FontWeight } from "@/components/ui/texts/font-weight"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<FontWeight
text="Let's Go"
fontSize={60}
className="dark:text-[#fff200]"
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/font-weight-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/font-weight.json
Usage
import { FontWeight } from "@/components/ui/font-weight"<div className="relative flex h-screen w-full items-center justify-center">
<FontWeight text="Breathe" />
</div>API Reference
FontWeight
Renders animated text with variable font weight oscillation.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | – | The text content to animate. |
className | string | "" | Additional Tailwind/CSS classes for styling. |
fontSize | number | 150 | Font size (in pixels). |
minWeight | number | 0 | Minimum font weight variation setting. |
maxWeight | number | 840 | Maximum font weight variation setting. |
animationDuration | number | 1.5 | Duration (seconds) of one weight oscillation cycle. |
delayMultiplier | number | 0.25 | Staggered delay factor for each character’s animation. |