Variable Text

Installation

Usage

import VariableText from "@/components/ruixen/variable-text";
 
export default function App() {
  return (
    <VariableText as="h1" className="text-5xl font-medium">
      Variable Lens
    </VariableText>
  );
}

Props

Supported Elements

The as prop accepts: p, span, h1, h2, h3, h4, h5, h6.

Features

• Variable Font Weight: Leverages Geist's continuous wght axis (100–900) — characters smoothly transition from 250 (far) to 800 (near) with sub-pixel precision
• Photographic Depth-of-Field: Near characters sharpen into focus (bolder, lifted, full opacity); far characters soften (lighter, smaller, translucent)
• Single Spring, Four Properties: One proximity spring per character drives fontWeight, scale, y, and opacity simultaneously — no redundant physics
• Bidirectional Falloff: Effect works both ways — near chars get bolder AND far chars get lighter than baseline, creating true focal contrast
• Quadratic Proximity: Quadratic ease creates a tight focal spot with gentle falloff, not linear
• Zero Re-Renders: All animation via useMotionValue → useTransform → useSpring chain — React never re-renders
• 2D Distance: Works correctly with multi-line text (X and Y cursor tracking)
• Resize-Safe: Character positions recalculate on window resize