Elastic Text

Installation

pnpm dlx shadcn@latest add @godui/elastic-text

{  "registries": {    "@godui": "https://godui.design/r/{name}.json"  }}

ElasticText animates the wght axis of your theme's sans font (--font-sans). With a variable font like Geist the weight sweeps smoothly; on a non-variable font it steps to the nearest available weight. No extra font dependency required.

Usage

import { ElasticText } from "@/components/godui/elastic-text";

Auto (default)

A spotlight sweeps across the text on its own, springing each character's weight up as it passes.

<ElasticText className="text-4xl">
  Design for Humans
</ElasticText>

By default the spotlight loops forever. Set loop={false} to run a single sweep out and back to rest:

<ElasticText loop={false} className="text-4xl">
  Plays once
</ElasticText>

Hover

The weight emphasis follows the pointer while it's over the text.

<ElasticText mode="hover" className="text-4xl">
  Move Your Mouse
</ElasticText>

Examples

Hover

mode="hover" ties the weight emphasis to the pointer instead of an automatic spotlight.

Plays once

loop={false} runs a single spotlight sweep across the text, then settles back to normal weight. Use the replay button to run it again.

Props

Accessibility

When prefers-reduced-motion is enabled, the animation is disabled and the text renders statically at minWeight.