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

export function ElasticTextHover() {
return (
  <ElasticText mode="hover" className="text-4xl tracking-tight">
    Move Your Mouse
  </ElasticText>
);
}

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

export function ElasticTextOnce() {
return (
  <ElasticText loop={false} className="text-4xl tracking-tight">
    Plays once
  </ElasticText>
);
}

DesignforHumans

Elastic Text

tsx

import { ElasticText } from "@/components/godui/elastic-text";export function ElasticTextDemo() {return (  <ElasticText className="text-4xl font-sans">    Design for Humans  </ElasticText>);}

Documentation

Learn Playground

Variable-font text whose weight springs up under an automatic spotlight or the pointer.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/elastic-text.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

tsx

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.

tsx

<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:

tsx

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

Hover

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

tsx

<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

Prop	Type	Default	Description
`children`	`ReactNode`	—	Text content to animate
`mode`	`"auto" \| "hover"`	`"auto"`	`auto` self-sweeps a spotlight; `hover` follows the pointer
`minWeight`	`number`	`300`	Resting (lightest) font weight
`maxWeight`	`number`	`900`	Peak (heaviest) weight under the spotlight / pointer
`duration`	`number`	`2`	Seconds for one full `auto` sweep
`loop`	`boolean`	`true`	Repeat the `auto` sweep
`startOnView`	`boolean`	`true`	Start the `auto` sweep only once the text scrolls into view
`radius`	`number`	`120`	Pointer influence radius in px (`hover` mode)

Accessibility

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